增加indexed list示例

examples/hello-mui/css/mui.indexedlist.css

+.mui-group-list {
+	position: relative;
+	border-top: solid 1px #e3e3e3;
+	border-bottom: solid 1px #e3e3e3;
+	overflow: hidden;
+	background-color: #fafafa;
+	height: 300px;
+	cursor: default;
+}
+.mui-group-list-inner {
+	margin: 0px;
+	padding: 0px;
+	overflow-y: auto;
+	border: none;
+}
+.mui-group-list-inner::-webkit-scrollbar {
+	width: 0px;
+	height: 0px;
+	visibility: hidden;
+}
+.mui-group-list-empty-alert,
+.mui-group-list-inner.empty ul {
+	display: none;
+}
+.mui-group-list-inner.empty .mui-group-list-empty-alert {
+	display: block;
+}
+.mui-group-list-empty-alert {
+	padding: 30px 15px;
+	text-align: center;
+	color: #ccc;
+	padding-right: 45px;
+}
+.mui-ios .mui-group-list-inner {
+	width: calc(100% + 10px);
+}
+.mui-group-list-group,
+.mui-group-list-item {
+	padding-right: 45px;
+}
+.mui-ios .mui-group-list-group,
+.mui-ios .mui-group-list-item,
+.mui-ios .mui-group-list-empty-alert {
+	padding-right: 55px;
+}
+.mui-group-list-group {
+	background-color: #f7f7f7;
+}
+.mui-group-list-group {
+	padding-top: 3px;
+	padding-bottom: 3px;
+}
+.mui-group-list-search {
+	border-bottom: solid 1px #e3e3e3;
+	z-index: 15;
+}
+.mui-group-list-search.mui-search:before {
+	margin-top: -10px;
+}
+.mui-group-list-search input {
+	border-radius: 0px;
+	margin: 0px;
+	background-color: #fafafa;
+}
+.mui-group-list-bar {
+	width: 30px;
+	background-color: rgba(0, 0, 0, 0.1);
+	position: absolute;
+	height: 100%;
+	z-index: 10;
+	right: 0px;
+	-webkit-transition: .2s;
+}
+.mui-group-list-bar a {
+	display: block;
+	text-align: center;
+	font-size: 11px;
+	padding: 0px;
+	margin: 0px;
+	line-height: 15px;
+	color: #aaa;
+}
+.mui-group-list-bar.active {
+	background-color: rgba(0, 0, 0, 0.2);
+}
+.mui-group-list-bar.active a {
+	color: #333;
+}
+.mui-group-list-bar.active a.active {
+	color: #007aff;
+}
+.mui-group-list-alert {
+	position: absolute;
+	z-index: 20;
+	background-color: rgba(0, 0, 0, 0.5);
+	width: 80px;
+	height: 80px;
+	left: 50%;
+	top: 50%;
+	margin-left: -40px;
+	margin-top: -40px;
+	border-radius: 40px;
+	text-align: center;
+	line-height: 80px;
+	font-size: 35px;
+	color: #fff;
+	display: none;
+	-webkit-transition: .2s;
+}
+.mui-group-list-alert.active {
+	display: block;
+}
\ No newline at end of file

examples/hello-mui/css/mui.indexedlist.js

+/**
+ * 分组列表
+ * 类似联系人应用中的联系人列表，可以按首字母分组
+ * 右侧的字母定位工具条，可以快速定位列表位置
+ * varstion 1.0.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ **/
+(function($, window, document) {
+
+	var classSelector = function(name) {
+		return '.' + $.className(name);
+	}
+
+	var GroupList = $.GroupList = $.Class.extend({
+		/**
+		 * 通过 element 和 options 构造 GroupList 实例
+		 **/
+		init: function(holder, options) {
+			var self = this;
+			self.options = options || {};
+			self.box = holder;
+			if (!self.box) {
+				throw "实例 GroupList 时需要指定 element";
+			}
+			self.createDom();
+			self.findElements();
+			self.caleLayout();
+			self.bindEvent();
+		},
+		createDom: function() {
+			var self = this;
+			self.el = self.el || {};
+			//styleForSearch 用于搜索，此方式能在数据较多时获取很好的性能
+			self.el.styleForSearch = document.createElement('style');
+			(document.head || document.body).appendChild(self.el.styleForSearch);
+		},
+		findElements: function() {
+			var self = this;
+			self.el = self.el || {};
+			self.el.search = self.box.querySelector(classSelector('group-list-search'));
+			self.el.searchInput = self.box.querySelector(classSelector('group-list-search-input'));
+			self.el.searchClear = self.box.querySelector(classSelector('group-list-search') + ' ' + classSelector('icon-clear'));
+			self.el.bar = self.box.querySelector(classSelector('group-list-bar'));
+			self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('group-list-bar') + ' a'));
+			self.el.inner = self.box.querySelector(classSelector('group-list-inner'));
+			self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('group-list-item')));
+			self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('group-list-inner') + ' li'));
+			self.el.alert = self.box.querySelector(classSelector('group-list-alert'));
+		},
+		caleLayout: function() {
+			var self = this;
+			var withoutSearchHeight = (self.box.offsetHeight - self.el.search.offsetHeight) + 'px';
+			self.el.bar.style.height = withoutSearchHeight;
+			self.el.inner.style.height = withoutSearchHeight;
+			var barItemHeight = ((self.el.bar.offsetHeight - 40) / self.el.barItems.length) + 'px';
+			self.el.barItems.forEach(function(item) {
+				item.style.height = barItemHeight;
+				item.style.lineHeight = barItemHeight;
+			});
+		},
+		scrollTo: function(group) {
+			var self = this;
+			var groupElement = self.el.inner.querySelector('[data-group="' + group + '"]');
+			if (!groupElement || (self.hiddenGroups && self.hiddenGroups.indexOf(groupElement) > -1)) {
+				return;
+			}
+			self.el.inner.scrollTop = groupElement.offsetTop;
+		},
+		bindBarEvent: function() {
+			var self = this;
+			var pointElement = null;
+			var findStart = function(event) {
+				if (pointElement) {
+					pointElement.classList.remove('active');
+					pointElement = null;
+				}
+				self.el.bar.classList.add('active');
+				var point = event.changedTouches ? event.changedTouches[0] : event;
+				pointElement = document.elementFromPoint(point.pageX, point.pageY);
+				if (pointElement) {
+					var group = pointElement.innerText;
+					if (group && group.length == 1) {
+						pointElement.classList.add('active');
+						self.el.alert.innerText = group;
+						self.el.alert.classList.add('active');
+						self.scrollTo(group);
+					}
+				}
+				event.preventDefault();
+			};
+			var findEnd = function(event) {
+				self.el.alert.classList.remove('active');
+				self.el.bar.classList.remove('active');
+				if (pointElement) {
+					pointElement.classList.remove('active');
+					pointElement = null;
+				}
+			};
+			self.el.bar.addEventListener('touchmove', function(event) {
+				findStart(event);
+			}, false);
+			self.el.bar.addEventListener('touchstart', function(event) {
+				findStart(event);
+			}, false);
+			document.body.addEventListener('touchend', function(event) {
+				findEnd(event);
+			}, false);
+			document.body.addEventListener('touchcancel', function(event) {
+				findEnd(event);
+			}, false);
+		},
+		search: function(keyword) {
+			var self = this;
+			keyword = (keyword || '').toLowerCase();
+			var selectorBuffer = [];
+			var groupIndex = -1;
+			var itemCount = 0;
+			var liArray = self.el.liArray;
+			var itemTotal = liArray.length;
+			self.hiddenGroups = [];
+			var checkGroup = function(currentIndex, last) {
+				if (itemCount >= currentIndex - groupIndex - (last ? 0 : 1)) {
+					selectorBuffer.push(classSelector('group-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
+					self.hiddenGroups.push(liArray[groupIndex]);
+				};
+				groupIndex = currentIndex;
+				itemCount = 0;
+			}
+			liArray.forEach(function(item) {
+				var currentIndex = liArray.indexOf(item);
+				if (item.classList.contains($.className('group-list-group'))) {
+					checkGroup(currentIndex, false);
+				} else {
+					var text = (item.innerText || '').toLowerCase();
+					var value = (item.getAttribute('data-value') || '').toLowerCase();
+					var tags = (item.getAttribute('data-tags') || '').toLowerCase();
+					if (keyword && text.indexOf(keyword) < 0 &&
+						value.indexOf(keyword) < 0 &&
+						tags.indexOf(keyword) < 0) {
+						selectorBuffer.push(classSelector('group-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
+						itemCount++;
+					}
+					if (currentIndex >= itemTotal - 1) {
+						checkGroup(currentIndex, true);
+					}
+				}
+			});
+			if (selectorBuffer.length >= itemTotal) {
+				self.el.inner.classList.add('empty');
+			} else if (selectorBuffer.length > 0) {
+				self.el.inner.classList.remove('empty');
+				self.el.styleForSearch.innerText = selectorBuffer.join(', ') + "{display:none;}";
+			} else {
+				self.el.inner.classList.remove('empty');
+				self.el.styleForSearch.innerText = "";
+			}
+		},
+		bindSearchEvent: function() {
+			var self = this;
+			self.el.searchInput.addEventListener('input', function() {
+				var keyword = this.value;
+				self.search(keyword);
+			}, false);
+			$(self.el.search).on('tap', classSelector('icon-clear'), function() {
+				self.search('');
+			}, false);
+		},
+		bindEvent: function() {
+			var self = this;
+			self.bindBarEvent();
+			self.bindSearchEvent();
+		}
+	});
+
+})(mui, window, document);
\ No newline at end of file

examples/hello-mui/list.html

@@ -358,6 +358,23 @@
 						image viewer（图片预览）
 					</a>
 				</li>
+				<li class="mui-table-view-cell mui-collapse">
+					<a class="mui-navigate-right" href="#">
+						indexed list（索引列表）
+					</a>
+					<ul class="mui-table-view mui-table-view-chevron">
+						<li class="mui-table-view-cell">
+							<a class="mui-navigate-right" open-type = "common" href="examples/indexed-list.html">
+								展示模式
+							</a>
+						</li>
+						<li class="mui-table-view-cell">
+							<a class="mui-navigate-right" open-type = "common" href="examples/indexed-list-select.html">
+								选择模式
+							</a>
+						</li>
+					</ul>
+				</li>
 				<li class="mui-table-view-cell">
 					<a class="mui-navigate-right" href="examples/lazyload-image.html">
 						lazyload（懒加载） 
@@ -395,18 +412,16 @@
 				//Android平台暂时使用slide-in-right动画
 				aniShow = "slide-in-right"
 			}
-			 //初始化，并预加载webview模式的选项卡
-			mui.init({
-				preloadPages: [{
-					url: 'examples/tab-webview-main.html'
-				},
-				{
+			//初始化，并预加载webview模式的选项卡			
+			function preload () {
+				mui.preload({url:'examples/tab-webview-main.html'});
+				mui.preload({
 					url:"examples/pullrefresh_main.html",
 					styles:{
 						popGesture:'hide'
 					}
-				}]
-			});
+				});
+			}
 			var templates = {};
 			var getTemplate = function(name, header, content) {
 				var template = templates[name];
@@ -459,10 +474,36 @@
 				getTemplate('default', 'examples/template.html');
 			};
 			mui.plusReady(function() {
-				//初始化模板
-				initTemplates(); //预加载所有模板	
-				//关闭splash页面；
-				plus.navigator.closeSplashscreen();
+				//读取本地存储，检查是否为首次启动
+				var showGuide = plus.storage.getItem("lauchFlag");
+				if(showGuide){
+					//有值，说明已经显示过了，无需显示；
+					//关闭splash页面；
+					plus.navigator.closeSplashscreen();
+					//初始化模板
+					initTemplates(); 
+					//预加载
+					preload();
+				}else{
+					//显示启动导航
+					mui.openWindow({
+						id:'guilde',
+						url:'examples/guide.html',
+						show:{
+							aniShow:'none'
+						},
+						waiting:{
+							autoShow:false
+						}
+					});
+					//延迟的原因：优先打开启动导航页面，避免资源争夺
+					setTimeout(function () {
+						//初始化模板
+						initTemplates(); 
+						//预加载
+						preload();
+					},200);
+				}
 			});
 			 //主列表点击事件
 			mui('#list').on('tap', 'a', function() {