类似电话本字符索引的JS简单实现

类似电话本字符索引的JS简单实现

/**
* @param letter 字母选择器
* @param letterList 字母容器选择器
* @param PanContainer Pan选择器
* @param bigLetter 大字母选择器
*/
function LetterIndex(options) {
var opts = {fitHeight:true};

$.extend(opts, options);

var letterStrs = [],
letterHeight = 0,
$letter = $(opts.letter),
$letterList = $(opts.letterList),
$letterListDiv = null;
$PanContainer = $(opts.PanContainer),
$bigLetter = $(opts.bigLetter),
//Pan类基于iScroll，使用方法一样
pan = new Pan($PanContainer[0], {
mouseWheel: true,
click: true
});

//初始化
function init(){
initDom();
if(opts.fitHeight){
fitHeight();
}
bindEvent();
}

//初始化DOM节点
function initDom(){
$letter.each(function(i) {
var _word = $.trim($(this).text());
letterStrs.push('<div data-num="' + i + '">' + _word + '</div>')
})
$letterList.html(letterStrs.join(""));
$letterListDiv = $letterList.children("div");
}

//自适应高度
function fitHeight(){
var $letterListPare = $letterList.parent();
if($letterListPare.css("visibility") ==  "visible"){
var letterListPareHeight = parseInt($letterListPare.css("height"));
if(letterListPareHeight < letterStrs.length * parseInt($letterListDiv.css("line-height")) ){
letterHeight = letterListPareHeight/letterStrs.length;
$letterListDiv.css({"font-size":(letterHeight-2)+"px", "line-height":letterHeight+"px"});
}
}else if($letterList.height() > $letterListPare.height()){
letterHeight = $letterListPare.height()/letterStrs.length;
$letterListDiv.css({"font-size":(letterHeight-2)+"px", "line-height":letterHeight+"px"});
}
}

//绑定事件
function bindEvent(){
$letterListDiv.on("click", function() {
pan.scrollToElement($letter.get($(this).attr("data-num")), 300);
});

$letterList.on("touchmove", function(e) {
var x = e.touches[0].pageX,
y = e.touches[0].pageY;
rect = $letterList[0].getBoundingClientRect();
num = parseInt((y - rect.top) / $letterListDiv.height());

pan.disable();
pan.scrollToElement($letter.get(num), 0);

if($bigLetter){
$bigLetter.show().html($letterList.children("div").eq(num).html());
}
});
$(window).on("touchend", function() {
pan.enable();
$bigLetter.hide();
});
}

init();

return {
fitHeight:function(){
this.fitHeight();
}
}
}

#words_list{position: absolute;right: 0;top: 0;width: 20px;}
#words_list div{font-size: 12px;line-height: 14px;text-align: center;}
#words_show{display:none;width:38px;height:38px;font-size:26px;position:absolute;left: 0px;top:0px;right:0px;bottom: 0px;margin:auto;border-radius:100%;background-color:#ddd;opacity:0.5;text-align:center;line-height:38px;}

<div id="list">
<ul>
<li><a>全部</a></li>
<li><a>热门</a></li>
<span class="letter">A</span>
<li><a>奥迪</a></li>
</ul>
<div id="letter_list"></div>
<div id="bigLetter"></div>
</div>

LetterIndex({
letter:"#list .letter",
letterList:"#letter_list",
PanContainer:"#list",
bigLetter:"#bigLetter"
});