Jquery mobile jQuery Mobile是否有一个现有的按字母顺序排列的列表小部件？_Jquery Mobile

Jquery mobile jQuery Mobile是否有一个现有的按字母顺序排列的列表小部件？

jquery-mobile

Jquery mobile jQuery Mobile是否有一个现有的按字母顺序排列的列表小部件？,jquery-mobile,Jquery Mobile,我希望使用jQuery Mobile创建这种常见（在iPhone上）列表类型：最关键的功能是右边的字母表，它将滚动到最接近的匹配项像这样的东西已经存在了吗？还是我需要自己动手？我在演示中找不到它，尽管它让我有了一段路。这是一项正在进行的工作，但我认为它是可以完成的。例如： CSS JS HTML a 亚当·金凯德亚历克斯·威克汉姆艾弗里·约翰逊 b 鲍勃·卡博特 c Caleb展位克里斯托弗·亚当斯卡尔弗·詹姆斯 d 大卫·沃尔什德雷克·阿尔弗雷德 e 伊丽莎白·培

我希望使用jQuery Mobile创建这种常见（在iPhone上）列表类型：

最关键的功能是右边的字母表，它将滚动到最接近的匹配项

像这样的东西已经存在了吗？还是我需要自己动手？我在演示中找不到它，尽管它让我有了一段路。

这是一项正在进行的工作，但我认为它是可以完成的。例如：

CSS

HTML



a

亚当·金凯德

亚历克斯·威克汉姆
艾弗里·约翰逊
b
鲍勃·卡博特
c
Caleb展位
克里斯托弗·亚当斯
卡尔弗·詹姆斯
d
大卫·沃尔什
德雷克·阿尔弗雷德
e
伊丽莎白·培根
埃默里·帕克
Enid Voldon
f
法兰西斯墙
g
格雷厄姆·史密斯
格丽塔·皮特
h
哈维·沃尔斯
m
迈克·法恩斯沃思
Murray Vanderbuild
n
内森·威廉姆斯
p
保罗·贝克
皮特·梅森
r
Rod Tarker
s
索耶韦克菲尔德



1

2

3

a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z



详细信息





以下是您要查找的详细信息

自己动手。Related:@Phill:问题不在于对数据进行排序，而是在呈现布局时，字母表朝下，似乎覆盖了内容，当你选择一封信时，你可以滚动到合适的位置。我还没有看到，但是他们提供了一个过滤列表选项：所以键入名字过滤列表这将是一个很好的插件，尽管+1
#list-navigation { color:#696969; position:absolute; right:0px; top:0px; z-index:200; }

$('.scrollToSelected').bind('click', function() { var view = $(this).attr('id'); var list = view.split('-'); var elem = $("#"+list[1]); // not sure if this is offset or position var position = elem.position(); var offset = elem.offset(); //alert('left: '+position.left + ", top: " + position.top); //alert('left: '+offset.left + ", top: " + offset.top); $.mobile.silentScroll(position.top); //$.mobile.silentScroll(offset.top); }); $('.showDetails').bind('click', function() { $.mobile.changePage( "#details", { transition: "slideup"} ); });

<div data-role="page" id="list"> <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider" id="a">A</li> <li class="showDetails"> Adam Kinkaid </li> <li class="showDetails">Alex Wickerham</li> <li class="showDetails">Avery Johnson</li> <li data-role="list-divider" id="b">B</li> <li class="showDetails">Bob Cabot</li> <li data-role="list-divider" id="c">C</li> <li class="showDetails">Caleb Booth</li> <li class="showDetails">Christopher Adams</li> <li class="showDetails">Culver James</li> <li data-role="list-divider" id="d">D</li> <li class="showDetails">David Walsh</li> <li class="showDetails">Drake Alfred</li> <li data-role="list-divider" id="e">E</li> <li class="showDetails">Elizabeth Bacon</li> <li class="showDetails">Emery Parker</li> <li class="showDetails">Enid Voldon</li> <li data-role="list-divider" id="f">F</li> <li class="showDetails">Francis Wall</li> <li data-role="list-divider" id="g">G</li> <li class="showDetails">Graham Smith</li> <li class="showDetails">Greta Peete</li> <li data-role="list-divider" id="h">H</li> <li class="showDetails">Harvey Walls</li> <li data-role="list-divider" id="m">M</li> <li class="showDetails">Mike Farnsworth</li> <li class="showDetails">Murray Vanderbuilt</li> <li data-role="list-divider" id="n">N</li> <li class="showDetails">Nathan Williams</li> <li data-role="list-divider" id="p">P</li> <li class="showDetails">Paul Baker</li> <li class="showDetails">Pete Mason</li> <li data-role="list-divider" id="r">R</li> <li class="showDetails">Rod Tarker</li> <li data-role="list-divider" id="s">S</li> <li class="showDetails">Sawyer Wakefield</li> </ul> <ul data-role="none" id="list-navigation"> <li> 1 2 3 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z </li> </ul> </div> </div> <div data-role="page" id="details"> <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">Details</li> <li><a href="#list" data-direction="reverse">List</a></li> </ul> Here are the details you were looking for </div> </div>