mui世界国家索引弹出层选择【原创

来源:https://www.sucaihuo.com/js/2488.html 2017-07-21 14:16浏览(3851) 收藏

mui的索引页面代码很简洁,但是div滚动兼容性不是很好,整个索引页面作为弹出层,会有滚动bug。因此用jQuery重新写了下索引页面,用世界国家作为演示数据,其中右侧的数字是国家区号。
mui世界国家索引弹出层选择
分类:手机特效 > 弹出层 难易:中级
查看演示 下载资源 下载积分: 150 积分

索引弹出层

$(function() {
    var document_height = parseInt($(document).height());
    var list_height = document_height - 44;

    var indexed_height = list_height - 35;

    $("#list").css({"height": list_height + "px"});
    $(".mui-indexed-list-bar,.mui-indexed-list-inner").css({"height": indexed_height});
    var alpha_num = $(".mui-indexed-list-bar").children("a").length;

    if (alpha_num > 0) {
        var alpaha_height = parseInt(indexed_height / alpha_num);
        $(".mui-indexed-list-bar").children("a").css({"height": alpaha_height + "px", "line-height": alpaha_height + "px"})
    }

    //字母点击
    $(".mui-indexed-list-bar").children("a").click(function() {
        var alpha = $(this).text();
        $(".mui-indexed-list-alert").show().text(alpha);
        $(".mui-indexed-list-bar").addClass("active");
        $(this).addClass("active").siblings("a").removeClass("active");
        setTimeout(function() {
            $(".mui-indexed-list-bar").removeClass("active");
            $(".mui-indexed-list-alert").hide()
        }, 300)
    })
    //关键词搜索
    $(".mui-indexed-list-search-input").keyup(function() {
        var keyword = ($(this).val()).toLowerCase();
        $(".mui-title").text(keyword);
        var groups = [];
        if (keyword != '') {

            $(".mui-indexed-list-item").each(function() {
                var tags = ($(this).attr("data-tags")).toLowerCase();
                var value = ($(this).attr("data-value")).toLowerCase();
                var title = $(this).text();
                //关键字 首字母大写、拼音和中文检索
                if (tags.indexOf(keyword) >= 0 || value.indexOf(keyword) >= 0 || title.indexOf(keyword) >= 0) {
                    groups.push(tags.substr(0, 1));

                    $(this).show();
                } else {
                    $(this).hide();
                }
            })

            var groups_unique = getUnique(groups);
            $(".mui-indexed-list-group").each(function() {
                var group_value = ($(this).attr("data-group")).toLowerCase();

                if ($.inArray(group_value, groups_unique) >= 0) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            })
            var length = $(".mui-indexed-list-item:visible").length;
            if (length == 0) {
                $('.mui-indexed-list-empty-alert').show();
            } else {
                $('.mui-indexed-list-empty-alert').hide();
            }
            $(".group_hot").hide();
        } else {

            $(".mui-indexed-list-item,.mui-indexed-list-group,.mui-table-view,.group_hot").show();
            $(".mui-indexed-list-empty-alert").hide();
        }

    })
    //搜索清除符号
    mui(".mui-icon-clear")[0].addEventListener('tap', function() {
        $(".mui-indexed-list-item,.mui-indexed-list-group,.mui-table-view,.group_hot").show();
        $(".mui-indexed-list-empty-alert").hide();
    });
    //点击选择区号
    $(".mui-indexed-list-item").click(function() {
        var code = $(this).find(".code_box").text();
        $("#code_prefix").text(code);
        $('#containner').show();
        $("#window_box").empty().hide();
    })
});

//头部左上角关闭索引弹出层
function closeIndexList() {
    $('#containner').show();
    $("#window_box").empty().hide();
}
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2488.html
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 沙发
    03-09 15:58
    x***n
    太好了,这个插件很赞
1 2