Skip to content

M
mui
Commit b0089a43 authored by hbcui1984's avatar hbcui1984
Browse files
Options

选择列表增加省、市、县三级联动示例

parent b97623e7
Hide whitespace changes
Inline Side-by-side
Showing with 11875 additions and 194 deletions
examples/hello-mui/css/mui.listpicker.css
View file @ b0089a43
......@@ -46,6 +46,9 @@
padding: 8px;
text-align: center;
color: #555;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mui-listpicker ul li:last-child {
border-bottom: none;
......
examples/hello-mui/examples/poppicker.html
View file @ b0089a43
......@@ -40,17 +40,20 @@
<div class="mui-content">
<div class="mui-content-padded">
<h5 class="mui-content-padded">普通示例</h5>
<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>显示选择人员 ...</button>
<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
<div id='userResult' class="ui-alert"></div>
<h5 class="mui-content-padded">级联示例</h5>
<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>显示选择城市 ...</button>
<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>
<div id='cityResult' class="ui-alert"></div>
<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>
<div id='cityResult3' class="ui-alert"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.listpicker.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
(function($, doc) {
$.init();
......@@ -94,7 +97,7 @@
userPicker.show(function(items) {
userResult.innerText = JSON.stringify(items[0]);
});
}, false);
}, false);
//-----------------------------------------
//级联示例
var cityPicker = new $.PopPicker({
......@@ -105,7 +108,20 @@
var cityResult = doc.getElementById('cityResult');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker.show(function(items) {
cityResult.innerText ="你选择的城市是:" + items[0].text + items[1].text;
cityResult.innerText ="你选择的城市是:" + items[0].text+" " + items[1].text;
});
}, false);
//-----------------------------------------
// //级联示例
var cityPicker3 = new $.PopPicker({
layer: 3
});
cityPicker3.setData(cityData3);
var showCityPickerButton = doc.getElementById('showCityPicker3');
var cityResult3 = doc.getElementById('cityResult3');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker3.show(function(items) {
cityResult3.innerText ="你选择的城市是:" + items[0].text+" " + items[1].text+" " + items[2].text;
});
}, false);
});
......
examples/hello-mui/js/city.data-3.js 0 → 100644
View file @ b0089a43
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.listpicker.js
View file @ b0089a43
......@@ -23,226 +23,340 @@
return [].slice.call($.__create_dom_div__.childNodes);
};
//plugin
$.fn.listpicker = function(options) {
return this.each(function(index, box) {
var ListPicker = $.ListPicker = $.Class.extend({
init: function(box, options) {
var self = this;
if (!box) {
throw "构造 ListPicker 时找不到元素";
}
self.box = box;
//避免重复初始化开始
if (box.__listpicker_inited) return;
box.__listpicker_inited = true;
if (self.box.__listpicker_inited) return;
self.box.__listpicker_inited = true;
//避免重复初始化结束
//
var boxInner = $('.mui-listpicker-inner', box)[0];
if ($.os.ios) {
boxInner.classList.add('mui-listpicker-inner-ios');
options = options || {};
options.fiexdDur = options.fiexdDur || 150;
//ios 默认用 h5 模式
if (options.enabledH5 === null || typeof options.enabledH5 === 'undefined') {
options.enabledH5 = $.os.ios;
}
var boxHeight = box.offsetHeight;
var ul = $('ul', boxInner)[0];
var firstItem = $('li', ul)[0];
var itemHeight = 0;
//options.enabledH5 = true;
self.options = options;
self._create();
self._handleShim();
self._bindEvent();
self._applyToBox();
self._handleHighlight();
},
_create: function() {
var self = this;
self.boxInner = $('.mui-listpicker-inner', self.box)[0];
self.boxHeight = self.box.offsetHeight;
self.list = $('ul', self.boxInner)[0];
var firstItem = $('li', self.list)[0];
self.itemHeight = 0;
if (firstItem) {
itemHeight = firstItem.offsetHeight;
self.itemHeight = firstItem.offsetHeight;
} else {
ul.innerHTML = "<li>...</li>";
firstItem = $('li', ul)[0];
itemHeight = firstItem.offsetHeight;
ul.innerHTML = '';
self.list.innerHTML = "<li>...</li>";
firstItem = $('li', self.list)[0];
self.itemHeight = firstItem.offsetHeight;
self.list.innerHTML = '';
}
ul.style.paddingTop = ul.style.paddingBottom = (boxHeight / 2 - itemHeight / 2) + 'px';
var rule = $.dom('<div class="mui-listpicker-rule"> </div>')[0];
rule.style.height = itemHeight + 'px';
rule.style.marginTop = -(itemHeight / 2) + 'px';
box.appendChild(rule);
//
var disabledScrollEnd = false;
var scrollEnd = function(event) {
if (disabledScrollEnd) return;
disabledScrollEnd = true;
/*
var remainder = boxInner.scrollTop % itemHeight;
if(remainder>itemHeight/2){
boxInner.scrollTop+=(itemHeight-remainder);
}el
boxInner.scrollTop-=remainder;
}*/
var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0));
setTimeout(function() {
box.setSelectedIndex(fiexd);
$.trigger(box, 'change', {
index: box.getSelectedIndex(),
value: box.getSelectedValue(),
text: box.getSelectedText(),
item: box.getSelectedItem(),
element: box.getSelectedElement()
});
handleHighlight(event);
disabledScrollEnd = false;
}, 0);
};
var handleHighlight = function(event) {
var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0));
var itemElements = $('li', ul);
for (var index in itemElements) {
var itemElement = itemElements[index];
if (!itemElement || !itemElement.classList) continue;
if (index == fiexd) {
itemElement.classList.add('mui-listpicker-highlight');
self.list.style.paddingTop = self.list.style.paddingBottom = (self.boxHeight / 2 - self.itemHeight / 2) + 'px';
self.rule = $.dom('<div class="mui-listpicker-rule"> </div>')[0];
self.rule.style.height = self.itemHeight + 'px';
self.rule.style.marginTop = -(self.itemHeight / 2) + 'px';
self.box.appendChild(self.rule);
if ($.os.ios) {
self.boxInner.classList.add('mui-listpicker-inner-ios');
}
},
_handleShim: function() {
var self = this;
if (self.options.enabledH5) {
self.options.fiexdDur *= 2;
self._scrollerApi = $(self.boxInner).scroll();
self.setScrollTop = function(y, dur, callback) {
self._scrollerApi.scrollTo(0, -y, dur);
};
self.getScrollTop = function() {
var self = this;
if (self._scrollerApi.lastY > 0) {
return 0
} else {
itemElement.classList.remove('mui-listpicker-highlight');
return Math.abs(self._scrollerApi.lastY);
}
}
/*
var opacity = 1;
for (var index = fiexd; index >= 0; index--) {
var itemElement = itemElements[index];
itemElement.style.opacity = opacity;
opacity -= 0.25;
if (opacity < 0) opacity = 0;
}
opacity = 1;
var length = itemElements.length;
for (var index = fiexd; index < itemElements.length; index++) {
var itemElement = itemElements[index];
itemElement.style.opacity = opacity;
opacity -= 0.25;
if (opacity < 0) opacity = 0;
}
*/
};
var isTouchDown = false;
var isScrolling = false;
boxInner.addEventListener('scroll', function(event) {
if (disabledScrollEnd) return;
isScrolling = true;
if (boxInner.scrollTimer) {
clearTimeout(boxInner.scrollTimer);
}
handleHighlight(event);
boxInner.scrollTimer = setTimeout(function() {
isScrolling = false;
if (!isTouchDown || !mui.os.ios) {
scrollEnd(event);
};
} else {
//alert(0);
//为 boxInner 增加 scrollend 事件 (没有原生 scrollend 事件)
self.boxInner.addEventListener('scroll', function(event) {
if (self.disabledScroll) return;
self.isScrolling = true;
if (self.scrollTimer) {
clearTimeout(self.scrollTimer);
}
}, 100);
}, false);
//在 ios 上手指不弹起时，防止定位抖动开始
if (mui.os.ios) {
boxInner.addEventListener('touchstart', function(event) {
isTouchDown = true;
self.scrollTimer = setTimeout(function() {
self.isScrolling = false;
if (!self.isTouchDown || !$.os.ios) {
$.trigger(self.boxInner, 'scrollend');
}
}, 100);
}, false);
boxInner.addEventListener('touchend', function(event) {
isTouchDown = false;
if (!isScrolling) {
self.aniScrollTop = function(y, dur, callback) {
self.disabledScroll = true;
var stepNum = dur > 0 ? dur / 10 : 1;
var stepSize = (y - self.boxInner.scrollTop) / stepNum;
self._lastScrollTop = self.boxInner.scrollTop; //记录最后的位置
self._aniScrollTop(y, 0, stepNum, stepSize, callback);
};
self._aniScrollTop = function(y, stepIndex, stepNum, stepSize, callback) {
self.boxInner.scrollTop = self._lastScrollTop + stepSize * stepIndex;
if (stepIndex < stepNum) {
setTimeout(function() {
scrollEnd(event);
}, 0);
self._aniScrollTop(y, ++stepIndex, stepNum, stepSize);
}, 10);
} else {
//self.boxInner.scrollTop = y;
self.disabledScroll = false;
if (callback) callback();
}
}, false);
};
self.setScrollTop = function(y, dur, callback) {
self.aniScrollTop(y, dur);
};
self.getScrollTop = function() {
var self = this;
return self.boxInner.scrollTop;
};
//在 ios 上手指不弹起时，防止定位抖动开始
if ($.os.ios) {
self.boxInner.addEventListener('touchstart', function(event) {
var self = this;
self.isTouchDown = true;
}, false);
self.boxInner.addEventListener('touchend', function(event) {
self.isTouchDown = false;
if (!self.isScrolling) {
setTimeout(function() {
$.trigger(self.boxInner, 'scrollend');
}, 0);
}
}, false);
}
//在 ios 上手指不弹起时，防止定位抖动结束
}
//在 ios 上手指不弹起时，防止定位抖动结束
$(boxInner).on('tap', 'li', function(event) {
},
_handleHighlight: function() {
var self = this;
var scrollTop = self.getScrollTop();
var fiexd = (scrollTop / self.itemHeight).toFixed(0);
var itemElements = $('li', self.list);
for (var index in itemElements) {
var itemElement = itemElements[index];
if (!itemElement || !itemElement.classList) continue;
if (index == fiexd) {
itemElement.classList.add('mui-listpicker-highlight');
} else {
itemElement.classList.remove('mui-listpicker-highlight');
}
}
/*
var opacity = 1;
for (var index = fiexd; index >= 0; index--) {
var itemElement = itemElements[index];
itemElement.style.opacity = opacity;
opacity -= 0.25;
if (opacity < 0) opacity = 0;
}
opacity = 1;
var length = itemElements.length;
for (var index = fiexd; index < itemElements.length; index++) {
var itemElement = itemElements[index];
itemElement.style.opacity = opacity;
opacity -= 0.25;
if (opacity < 0) opacity = 0;
}
*/
},
_triggerChange: function() {
var self = this;
$.trigger(self.box, 'change', {
index: self.getSelectedIndex(),
value: self.getSelectedValue(),
text: self.getSelectedText(),
item: self.getSelectedItem(),
element: self.getSelectedElement()
});
},
_scrollEndHandle: function() {
var self = this;
var scrollTop = self.getScrollTop();
var fiexd = (scrollTop / self.itemHeight).toFixed(0);
self.disabledScrollEnd = true;
self.setSelectedIndex(fiexd);
self._triggerChange();
self._handleHighlight();
setTimeout(function() {
self.disabledScrollEnd = false;
self._handleHighlight();
}, self.options.fiexdDur);
},
_bindEvent: function() {
var self = this;
//滚动处理高亮
self.boxInner.addEventListener('scroll', function(event) {
self._handleHighlight(event);
}, false);
//处理滚动结束
self.disabledScrollEnd = false;
self.boxInner.addEventListener('scrollend', function(event) {
if (self.disabledScrollEnd) return;
self.disabledScrollEnd = true;
self._scrollEndHandle();
}, false);
//绑定项 tap 事件
$(self.boxInner).on('tap', 'li', function(event) {
var tapItem = this;
var items = [].slice.call($('li', ul));
var items = [].slice.call($('li', self.list));
for (var i in items) {
var item = items[i];
if (item == tapItem) {
box.setSelectedIndex(i);
self.setSelectedIndex(i);
return;
}
};
});
box.getSelectedIndex = function() {
return parseInt(boxInner.scrollTop / itemHeight);
},
getSelectedIndex: function() {
var self = this;
return (self.getScrollTop() / self.itemHeight).toFixed(0);
},
setSelectedIndex: function(index, noAni) {
var self = this;
index = (index || 0);
self.setScrollTop(self.itemHeight * index, noAni ? 0 : self.options.fiexdDur);
},
getSelectedElement: function() {
var self = this;
var index = self.getSelectedIndex();
return $('li', self.list)[index];
},
getSelectedItem: function() {
var self = this;
var itemElement = self.getSelectedElement();
if (!itemElement) return null;
var itemJson = itemElement.getAttribute('data-item');
return itemJson ? JSON.parse(itemJson) : {
text: itemElement.innerText,
value: itemElement.getAttribute('data-value')
};
var aniScrollTop = function(y1, y2, dur, callback) {
var stepNum = dur / 13;
var stepSize = (y2 - y1) / stepNum;
setTimeout(function() {
_aniScrollTop(y1, y2, 0, stepNum, stepSize, callback);
}, 13);
};
var _aniScrollTop = function(y1, y2, stepIndex, stepNum, stepSize, callback) {
var val = stepIndex * stepSize;
boxInner.scrollTop = y1 + val;
if (stepIndex < stepNum) {
stepIndex++;
setTimeout(function() {
_aniScrollTop(y1, y2, stepIndex, stepNum, stepSize);
}, 13);
} else {
boxInner.scrollTop = y2;
if (callback) callback();
}
};
box.setSelectedIndex = function(index) {
index = parseInt(index || 0);
//boxInner.scrollTop = itemHeight * index;
aniScrollTop(boxInner.scrollTop, itemHeight * index, 100);
};
box.getSelectedElement = function() {
var index = box.getSelectedIndex();
return $('li', ul)[index];
},
setItems: function(items) {
var self = this;
var buffer = [];
for (index in items) {
var item = items[index] || {
text: 'null',
value: 'null' + index
};
var itemJson = JSON.stringify(item);
buffer.push("<li data-value='" + item.value + "' data-item='" + itemJson + "'>" + item.text + "</li>");
};
box.getSelectedItem = function() {
var itemElement = box.getSelectedElement();
if (!itemElement) return null;
self.list.innerHTML = buffer.join('');
//self._scrollEndHandle();
if (self._scrollerApi && self._scrollerApi.refresh) {
self._scrollerApi.refresh();
}
self._handleHighlight();
self._triggerChange();
},
getItems: function() {
var self = this;
var items = [];
var itemElements = $('li', self.list);
for (index in itemElements) {
var itemElement = itemElements[index];
var itemJson = itemElement.getAttribute('data-item');
return itemJson ? JSON.parse(itemJson) : {
items.push(itemJson ? JSON.parse(itemJson) : {
text: itemElement.innerText,
value: itemElement.getAttribute('data-value')
};
};
box.setItems = function(items) {
var buffer = [];
for (index in items) {
var item = items[index] || {
text: 'null',
value: 'null' + index
};
var itemJson = JSON.stringify(item);
buffer.push("<li data-value='" + item.value + "' data-item='" + itemJson + "'>" + item.text + "</li>");
};
ul.innerHTML = buffer.join('');
scrollEnd();
};
box.getItems = function() {
var items = [];
var itemElements = $('li', ul);
for (index in itemElements) {
var itemElement = itemElements[index];
var itemJson = itemElement.getAttribute('data-item');
items.push(itemJson ? JSON.parse(itemJson) : {
text: itemElement.innerText,
value: itemElement.getAttribute('data-value')
});
});
}
return items;
},
getSelectedValue: function() {
var self = this;
var item = self.getSelectedItem();
if (!item) return null;
return item.value;
},
getSelectedText: function() {
var self = this;
var item = self.getSelectedItem();
if (!item) return null;
return item.text;
},
setSelectedValue: function(value, noAni) {
var self = this;
var itemElements = $('li', self.list);
for (index in itemElements) {
var itemElement = itemElements[index];
if (!itemElement || !itemElement.getAttribute) {
continue;
}
return items;
};
box.getSelectedValue = function() {
var item = box.getSelectedItem();
if (!item) return null;
return item.value;
};
box.getSelectedText = function() {
var item = box.getSelectedItem();
if (!item) return null;
return item.text;
};
box.setSelectedValue = function(value) {
var itemElements = $('li', ul);
for (index in itemElements) {
var itemElement = itemElements[index];
if (!itemElement || !itemElement.getAttribute) {
continue;
}
if (itemElement.getAttribute('data-value') == value) {
box.setSelectedIndex(index);
return;
}
if (itemElement.getAttribute('data-value') == value) {
self.setSelectedIndex(index, noAni);
return;
}
}
},
_applyToBox: function() {
var self = this;
var memberArray = [
"getSelectedIndex",
"setSelectedIndex",
"getSelectedElement",
"getSelectedItem",
"setItems",
"getItems",
"getSelectedValue",
"getSelectedText",
"setSelectedValue"
];
var _clone = function(name) {
if (typeof self[name] === 'function') {
self.box[name] = function() {
return self[name].apply(self, arguments);
};
} else {
self.box[name] = self[name];
}
};
for (var i in memberArray) {
var name = memberArray[i];
_clone(name);
}
}
});
//添加 locker 插件
$.fn.listpicker = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (options) {
new ListPicker(element, options);
} else {
var optionsText = element.getAttribute('data-listpicker-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.enabledH5 = element.getAttribute('data-listpicker-enabledh5') || options.enabledH5;
options.fixedDur = element.getAttribute('data-listpicker-fixddur') || options.fixedDur;
new ListPicker(element, options);
}
});
}
return this;
};
//auto apply
$.ready(function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment