大佬教程收集整理的这篇文章主要介绍了jquery-mobile – jQuery Mobile是否存在现有的按字母顺序排列的列表小部件?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
关键功能是在右侧向下运行的字母表将滚动到最接近的匹配项目.
这样的事情已经存在或者我需要自己动手吗?我无法在演示中找到它,虽然List dividers让我在那里分道扬..
> http://jsfiddle.net/qXT9Z/32/
CSS
#list-navigation { color:#696969; position:absolute; right:0px; top:0px; z-index:200; }
JS
$('.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"} ); });
HTML
<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> <p id="list-1" class="scrollToSELEcted"><strong>1</strong></p> <p id="list-2" class="scrollToSELEcted"><strong>2</strong></p> <p id="list-3" class="scrollToSELEcted"><strong>3</strong></p> <p id="list-a" class="scrollToSELEcted"><strong>A</strong></p> <p id="list-b" class="scrollToSELEcted"><strong>B</strong></p> <p id="list-c" class="scrollToSELEcted"><strong>C</strong></p> <p id="list-d" class="scrollToSELEcted"><strong>D</strong></p> <p id="list-e" class="scrollToSELEcted"><strong>E</strong></p> <p id="list-f" class="scrollToSELEcted"><strong>F</strong></p> <p id="list-g" class="scrollToSELEcted"><strong>G</strong></p> <p id="list-h" class="scrollToSELEcted"><strong>H</strong></p> <p id="list-i" class="scrollToSELEcted"><strong>I</strong></p> <p id="list-j" class="scrollToSELEcted"><strong>J</strong></p> <p id="list-k" class="scrollToSELEcted"><strong>K</strong></p> <p id="list-l" class="scrollToSELEcted"><strong>L</strong></p> <p id="list-m" class="scrollToSELEcted"><strong>M</strong></p> <p id="list-n" class="scrollToSELEcted"><strong>N</strong></p> <p id="list-o" class="scrollToSELEcted"><strong>O</strong></p> <p id="list-p" class="scrollToSELEcted"><strong>P</strong></p> <p id="list-q" class="scrollToSELEcted"><strong>Q</strong></p> <p id="list-r" class="scrollToSELEcted"><strong>R</strong></p> <p id="list-s" class="scrollToSELEcted"><strong>S</strong></p> <p id="list-t" class="scrollToSELEcted"><strong>T</strong></p> <p id="list-u" class="scrollToSELEcted"><strong>U</strong></p> <p id="list-v" class="scrollToSELEcted"><strong>V</strong></p> <p id="list-w" class="scrollToSELEcted"><strong>W</strong></p> <p id="list-x" class="scrollToSELEcted"><strong>X</strong></p> <p id="list-y" class="scrollToSELEcted"><strong>Y</strong></p> <p id="list-z" class="scrollToSELEcted"><strong>Z</strong></p> </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> <br /> <p> Here are the details you were looking for </p> </div> </div>
以上是大佬教程为你收集整理的jquery-mobile – jQuery Mobile是否存在现有的按字母顺序排列的列表小部件?全部内容,希望文章能够帮你解决jquery-mobile – jQuery Mobile是否存在现有的按字母顺序排列的列表小部件?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。