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

类似电话本字符索引的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();
        }
    }
}

CSS基本代码

#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;}

html代码

<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"
});