zoukankan      html  css  js  c++  java

  • mui框架通讯录检索

    使用工具: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，感兴趣可以下载看看，入口点我
    这里写图片描述
  • 相关阅读:
    机房收费系统总结
    python手记(45)
    Hbase深入学习(二) 安装hbase
    Java异常机制
    MySQL 分析服务器状态
    人生感悟：人生像吃自助餐
    Android使用蓝牙连接adb调试App
    JQuery DataTables 列自己定义数据类型排序
    Android-自己定义图像资源的使用（1）
    11款开放中文分词引擎大比拼
  • 原文地址：https://www.cnblogs.com/wangqilong/p/8279748.html
Copyright © 2011-2022 走看看