概述

本文演示了被索引的IOS联系人列表UI。 使用的外部库链接就是这样。

源代码包含一个JS库(iphone-scoller.js)和JQuery 插件(jquery-1.2.6.min.js)。 它们可以从这里下载。

索引列表HTML页面

web应用程序包括一个列表，这个列表有分隔符，用于按字母表顺序来区分列表。 最左边会有一个搜索栏位，其中所有的字母表会列在其中。

<ul id="iphone-search">
        <li><a href="#A" title="A">A</a></li>
        <li><a href="#B" title="B">B</a></li>
	<li><a href="#C" title="C">C</a></li>
	<li><a href="#D" title="D">D</a></li>
        <li><a href="#E" title="E">E</a></li>
	<li><a href="#F" title="F">F</a></li>
	<li><a href="#G" title="G">G</a></li>
	<li><a href="#H" title="H">H</a></li>
	<li><a href="#I" title="I">I</a></li>
	<li><a href="#J" title="J">J</a></li>
	<li><a href="#K" title="K">K</a></li>
	<li><a href="#L" title="L">L</a></li>
	<li><a href="#M" title="M">M</a></li>
	<li><a href="#N" title="N">N</a></li>
	<li><a href="#O" title="O">O</a></li>
	<li><a href="#P" title="P">P</a></li>
	<li><a href="#Q" title="Q">Q</a></li>
	<li><a href="#R" title="R">R</a></li>
	<li><a href="#S" title="S">S</a></li>
	<li><a href="#T" title="T">T</a></li>
	<li><a href="#U" title="U">U</a></li>
	<li><a href="#V" title="V">V</a></li>
	<li><a href="#W" title="W">W</a></li>
	<li><a href="#X" title="X">X</a></li>
	<li><a href="#Y" title="Y">Y</a></li>
	<li><a href="#Z" title="Z">Z</a></li>
</ul>

上面的代码会产生一个列出所有字母表的侧边栏，当点击的时候，侧边栏会滚动索引列表到相应的字母表。

<ul id="iphone-scroll">
    		<li><div id="nav-indicator-fixed"></div> <a name="A"></a>
		   <div class="nav-indicator" id="nav-a">A</div>
			<ul>
				<li>Amsterdam</li>
				<li>Arnhem</li>
				<li>Assen</li>
				<li>Apeldoorn</li>
				<li>Alkmaar</li>
				<li>Almelo</li>
			</ul>
		</li>
		<li><a name="B"></a>
			<div class="nav-indicator" id="nav-b">B</div>
			<ul>
				<li>Bolsward</li>
				<li>Buren</li>
				<li>Bergen op Zoom<</li>
				<li>Breda</li>
			</ul>
                </li>
		<li><a name="C"></a>
			<div class="nav-indicator" id="nav-c">C</div>
			<ul>
				<li>Culemborg</li>
				<li>Coevorden</li>
			</ul>
                </li>
</ul>

上面的代码会为每个字母表显示出带有分隔符的索引列表。

索引列表CSS

下面的代码用于为搜索列表来编排侧边栏的风格。 当点击任何字母表的时候，侧边栏的背景会产生变化。
 

#iphone-search {
    list-style: none;
    padding: 0 5px;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    left: 325px;
    margin-top: 20px;
    position: fixed;
    text-align: center;
    font-weight: bold;
}

#iphone-search li a {
    color: #666666;
}

#iphone-search li a:hover {
    color: #000000;
}

.searchbg {
    background-color: #999999;
}

索引列表JS (iphone-scroller.js)

当一个侧边栏的字母表被选择的时候，下面的代码会控制列表的滚动， 最初"nav-indicator-fixed"附加于字母"A"后面，当用户向下滚动列表的时候，"nav-indicator-fixed"会根据索引列表的分隔符的位置改变到相应的字母。 侧边栏的作用是，当一个字母被从侧边栏选中的时候，索引列表会滚动以使得那个字母的列表部分显示在顶部。 

$(document).ready(function()
{
    // First time, the indicator needs a character
    $("#nav-indicator-fixed").append("A");
    
    // Fading out the search bar
    $("#iphone-search").fadeTo(1, 0.85);
    
    // Append background when search bar is hovered
    $("#iphone-search").hover(function()
    {
        $("#iphone-search").addClass("searchbg");
    },function()
    {
        $("#iphone-search").removeClass("searchbg");
    });
    // When scrolling, this function checks if the indicator needs to be changed
    var curb = $("#nav-b").position().top;
    var curc = $("#nav-c").position().top;
    var curd = $("#nav-d").position().top;
    var changeNavIndicator = function(value)
    {
        $("#nav-indicator-fixed").replaceWith("<div id=\"nav-indicator-fixed\">"+value+"</div>");
    }
    
    $("#iphone-scrollcontainer").scroll(function()
    {
        if($("#nav-a").position().top < 20 && $("#nav-a").position().top > -20)
            changeNavIndicator("A");
        
        if($("#nav-b").position().top < 20 && $("#nav-b").position().top > -20)
        {
            if(curb < $("#nav-b").position().top)
                changeNavIndicator("A");
            else
                changeNavIndicator("B");;
            curb = $("#nav-b").position().top;
        }
        if($("#nav-c").position().top < 20 && $("#nav-c").position().top > -20)
        {
            if(curc < $("#nav-c").position().top)
                changeNavIndicator("B");
            else
                changeNavIndicator("C");;
            curc = $("#nav-c").position().top;
        }
        if($("#nav-d").position().top < 20 && $("#nav-d").position().top > -20)
        {
            if(curd < $("#nav-d").position().top)
                changeNavIndicator("C");
            else
                changeNavIndicator("D");
            curd = $("#nav-d").position().top;
        }
        // Fade the indicator, staying CSS2.1 valid
        $("#nav-indicator-fixed").fadeTo(1, 0.85);
    });
});

屏幕截图