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

examples/hello-mui/css/mui.listpicker.css

@@ -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

@@ -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/mui.listpicker.js

@@ -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() {