mui框架通信錄檢索

時間  2020-05-09
標籤 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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程