mui框架通信錄檢索
使用工具:HBuilder,這個軟件開發效率很是高；
需求：手機通信錄頁面,有字母拼音檢索功能，以下圖
解析：利用mui框架的index list組件便可搭建這個頁面,可參考教程UI組件(這個頁面很簡單，我在谷百都不多人寫這個東西，估計太簡單沒人寫，有經驗的大佬任意吐槽這篇菜雞文章）javascript
項目結構：
php
mui框架造成主頁面：addressList.htmlcss
<!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);
代碼實現到這裏結束。
頁面效果展現：
html
參考教程：http://dev.dcloud.net.cn/mui/ui/java
這幾天小組作了一個社區APP，感興趣能夠下載看看，入口點我
jquery
相關文章
- 1. 在react腳手架中使用mui框架中的通信錄檢索
- 2. 在react腳手架中使用mui框架中的通訊錄檢索
- 3. mui框架探索
- 4. MUI 框架微信支付
- 5. hbulider mui框架
- 6. MUI框架
- 7. 全文檢索框架
- 8. hibernate search框架（檢索）
- 9. Hibernate框架檢索策略
- 10. Mui框架淺入
- 更多相關文章...
- • Hibernate的5種檢索方式 - Hibernate教程
- • QBC的2種檢索方式 - Hibernate教程
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 在react腳手架中使用mui框架中的通信錄檢索
- 2. 在react腳手架中使用mui框架中的通訊錄檢索
- 3. mui框架探索
- 4. MUI 框架微信支付
- 5. hbulider mui框架
- 6. MUI框架
- 7. 全文檢索框架
- 8. hibernate search框架（檢索）
- 9. Hibernate框架檢索策略
- 10. Mui框架淺入