mui的索引页面代码很简洁,但是div滚动兼容性不是很好,整个索引页面作为弹出层,会有滚动bug。因此用jQuery重新写了下索引页面,用世界国家作为演示数据,其中右侧的数字是国家区号。
索引弹出层
$(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();
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791