mui框架通讯录检索
来源：互联网 发布：国外免费代理软件 编辑：程序博客网 时间：2024/06/06 18:27
使用工具:HBuilder,这个软件开发效率非常高；
需求：手机通讯录页面,有字母拼音检索功能，如下图 
解析：利用mui框架的index list组件即可搭建这个页面,可参考教程UI组件(这个页面很简单，我在谷百都很少人写这个东西，估计太简单没人写，有经验的大佬任意吐槽这篇菜鸡文章）
项目结构：
mui框架形成主页面：addressList.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.min.css" rel="stylesheet" /> <link href="css/mui.indexedlist.css" rel="stylesheet" /> <style> html, body { height: 100%; overflow: hidden; } .mui-bar { -webkit-box-shadow: none; box-shadow: none; } .oa-contact-cell.mui-table .mui-table-cell { padding: 10px 0; vertical-align: middle; } .oa-contact-cell { position: relative; margin: -11px 0; } .oa-contact-avatar { width: 75px; } .oa-contact-avatar img { border-radius: 50%; width: 50px; height: 50px; } .oa-contact-content { width: 100%; } .oa-contact-name { margin-right: 20px; } .oa-contact-name, .oa-contact-position { float: left; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">通讯录</h1> </header> <div class="mui-content"> <div id='list' class="mui-indexed-list"> <div class="mui-indexed-list-search mui-input-row mui-search"> <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索用户"> </div> <div class="mui-indexed-list-bar"> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a> </div> <div class="mui-indexed-list-alert"></div> <div class="mui-indexed-list-inner"> <div class="mui-indexed-list-empty-alert">没有数据</div> <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"> <li data-value="ZHA" data-tags="AoTeMan" class="mui-table-view-cell mui-indexed-list-item"> <div class="mui-slider-cell"> <div class="oa-contact-cell mui-table"> <div class="oa-contact-avatar mui-table-cell"> <img src="images/44444.png" onclick="update();" /> </div> <div class="oa-contact-content mui-table-cell"> <div class="mui-clearfix"> <h4 class="oa-contact-name">奥特曼</h4> <span class="oa-contact-position mui-h6">开发商</span> </div> <p class="oa-contact-address mui-h6"> 师院9栋426 </p> </div> </div> </div> </li> <li data-value="ZHA" data-tags="WangCai" class="mui-table-view-cell mui-indexed-list-item"> <div class="mui-slider-cell"> <div class="oa-contact-cell mui-table"> <div class="oa-contact-avatar mui-table-cell"> <img src="images/111.png" onclick="update();" /> </div> <div class="oa-contact-content mui-table-cell"> <div class="mui-clearfix"> <h4 class="oa-contact-name">旺财</h4> <span class="oa-contact-position mui-h6">管理人员</span> </div> <p class="oa-contact-address mui-h6"> 科院7栋225 </p> </div> </div> </div> </li> <li data-value="ZHA" data-tags="XiaoMing" class="mui-table-view-cell mui-indexed-list-item"> <div class="mui-slider-cell"> <div class="oa-contact-cell mui-table"> <div class="oa-contact-avatar mui-table-cell"> <img src="images/33333.png" onclick="update();" /> </div> <div class="oa-contact-content mui-table-cell"> <div class="mui-clearfix"> <h4 class="oa-contact-name">小明</h4> <span class="oa-contact-position mui-h6">用户</span> </div> <p class="oa-contact-address mui-h6"> 浍河欣城40栋2401 </p> </div> </div> </div> </li> </ul> </div> </div> </div> <script src="js/mui.min.js"></script> <script src="js/mui.indexedlist.js"></script> <script src="js/jquery-1.8.3.js "></script> <script type="text/javascript" charset="utf-8"> mui.init(); mui.ready(function() { var header = document.querySelector('header.mui-bar'); var list = document.getElementById('list'); //calc hieght list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px'; //create window.indexedList = new mui.IndexedList(list); }); function update(){ open("personInformation_show.html"); } </script> </body></html>css渲染文件mui.indexedlist.css：
.mui-indexed-list { position: relative; border-top: solid 1px #e3e3e3; border-bottom: solid 1px #e3e3e3; overflow: hidden; background-color: #fafafa; height: 300px; cursor: default;}.mui-indexed-list-inner { margin: 0px; padding: 0px; overflow-y: auto; border: none;}.mui-indexed-list-inner::-webkit-scrollbar { width: 0px; height: 0px; visibility: hidden;}.mui-indexed-list-empty-alert,.mui-indexed-list-inner.empty ul { display: none;}.mui-indexed-list-inner.empty .mui-indexed-list-empty-alert { display: block;}.mui-indexed-list-empty-alert { padding: 30px 15px; text-align: center; color: #ccc; padding-right: 45px;}.mui-ios .mui-indexed-list-inner { width: calc(100% + 10px);}.mui-indexed-list-group,.mui-indexed-list-item { padding-right: 45px;}.mui-ios .mui-indexed-list-group,.mui-ios .mui-indexed-list-item,.mui-ios .mui-indexed-list-empty-alert { padding-right: 55px;}.mui-indexed-list-group { background-color: #f7f7f7;}.mui-indexed-list-group { padding-top: 3px; padding-bottom: 3px;}.mui-indexed-list-search { border-bottom: solid 1px #e3e3e3; z-index: 15;}.mui-indexed-list-search.mui-search:before { margin-top: -10px;}.mui-indexed-list-search input { border-radius: 0px; margin: 0px; background-color: #fafafa;}.mui-indexed-list-bar { width: 23px; background-color: lightgrey; position: absolute; height: 100%; z-index: 10; right: 0px; -webkit-transition: .2s;}.mui-indexed-list-bar a { display: block; text-align: center; font-size: 11px; padding: 0px; margin: 0px; line-height: 15px; color: #aaa;}.mui-indexed-list-bar.active { background-color: rgb(200,200,200);}.mui-indexed-list-bar.active a { color: #333;}.mui-indexed-list-bar.active a.active { color: #007aff;}.mui-indexed-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-indexed-list-alert.active { display: block;}js文件:mui.indexedlist.js
/** * IndexedList * 类似联系人应用中的联系人列表，可以按首字母分组 * 右侧的字母定位工具条，可以快速定位列表位置 **/(function($, window, document) { var classSelector = function(name) { return '.' + $.className(name); } var IndexedList = $.IndexedList = $.Class.extend({ /** * 通过 element 和 options 构造 IndexedList 实例 **/ init: function(holder, options) { var self = this; self.options = options || {}; self.box = holder; if (!self.box) { throw "实例 IndexedList 时需要指定 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('indexed-list-search')); self.el.searchInput = self.box.querySelector(classSelector('indexed-list-search-input')); self.el.searchClear = self.box.querySelector(classSelector('indexed-list-search') + ' ' + classSelector('icon-clear')); self.el.bar = self.box.querySelector(classSelector('indexed-list-bar')); self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-bar') + ' a')); self.el.inner = self.box.querySelector(classSelector('indexed-list-inner')); self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-item'))); self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-inner') + ' li')); self.el.alert = self.box.querySelector(classSelector('indexed-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($.EVENT_MOVE, function(event) { findStart(event); }, false); self.el.bar.addEventListener($.EVENT_START, function(event) { findStart(event); }, false); document.body.addEventListener($.EVENT_END, function(event) { findEnd(event); }, false); document.body.addEventListener($.EVENT_CANCEL, 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('indexed-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('indexed-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('indexed-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(selector).indexedList 方式 $.fn.indexedList = function(options) { //遍历选择的元素 this.each(function(i, element) { if (element.indexedList) return; element.indexedList = new IndexedList(element, options); }); return this[0] ? this[0].indexedList : null; };})(mui, window, document);代码实现到这里结束。
页面效果展示：
参考教程：http://dev.dcloud.net.cn/mui/ui/
这几天小组做了一个社区APP，感兴趣可以下载看看，入口点我
阅读全文
0 0
- mui框架通讯录检索
- mui框架
- iOS 通讯录拼音检索
- 检索通讯录列表
- 模拟mui框架编码
- MUI框架初级教程
- mui框架学习笔记
- MUI框架入门
- 手机页面框架 MUI
- MUI框架（1）
- MUI框架（2）
- 二.MUI框架 开始体验MUI
- MUI--高性能前端框架
- MUI框架前端开发知识点
- MUI框架 栅格化系统
- 手机端MUI---html5框架
- Android 通讯录搜索(中文和拼音检索通讯录)
- MUI框架学习之Utils[init()][mui()][each()]
- Spring中Bean及@Bean的理解
- 关于get_magic_quotes_gpc()函数
- Python学习之Pandas的安装
- 密码学原理_Crypto++实现RSA加密
- [LUOGU] P1339 [USACO09OCT]热浪Heat Wave
- mui框架通讯录检索
- 数据结构实验之查找六：顺序查找
- 源码解析 ThreadPoolExecutor JAVA1.8
- Day11 --Eclipse工具 Object对象
- 基于C#实现SQLServer班级管理系统
- 策略模式(java)
- Day12 --Scanner键盘录入对象 和 String字符串对象
- 一步步深入了解View
- 关于mac上eclipse的偏好设置中没有runtime environment
