jquery mobile Listview （列表视图）详讲

来源：互联网发布：领流量软件编辑：程序博客网时间：2024/05/16 10:55

http://www.lampweb.org/jquerymobile/16/55.html

http://jquery.com/

http://www.jqmapi.com/preview/quickstartquide.html

http://www.wglong.com/main/artical!details?id=16

http://www.zhangxinxu.com/wordpress/?p=2020

Listview（列表，列表视图）是一个简单的无序列表，包是含链接的列表。添加了 data-role="listview" 属性来构成。jQuery Mobile 将应用所有必要的风格转换列表，，以便在移动设备上显示出列表效果，对触屏方式更加友好。列表有右箭头指示，以及填充浏览器窗口的宽度。当你点击列表项，该框架将触发在列表内的项的链接点击，发送URL链接的Ajax请求，在DOM创建新的页面，然后启动一个页面转变场景。

<ul data-role="listview"><li><a href="acura.html">Acura</a></li><li><a href="audi.html">Audi</a></li><li><a href="bmw.html">BMW</a></li></ul>

对非内嵌的列表的样式的说明：
为了让所有的非内嵌式的列表都充满屏幕边缘，非内嵌式的列表会有一个-15px的 margin 来抵消掉body 15px 的 padding 。所以如果你想在列表的上方或下方添加内容的话，需要给他们添加额外的margin，否则会产生重叠的现象。

嵌套列表

通过UL或OL的子元素可以嵌套列出的子项目，创建嵌套列表。当一个拥有子列表的列表项被点击时，Jquery Mobile框架会生成一个新的ul页面充满屏幕，并自动生成一个为父列表项名称为标题的header,以及一个子列表。这些动态嵌套的列表样式是“B”主题的样本（在默认主题的蓝色）来表明你是在一个二级导航。列表可以嵌套，多层次的深入和所有页面和链接将由Jquery Mobile框架自动处理。

注意：
每个嵌套的列表视图的页面是在父页面加载时创建，并且每个嵌套的页的页事件也将触发。
子页面的标题是父列表的列表文本。所以一定要使用一个单一的元素的列表项的标题，其他元素（像计数气泡后面的文字描述）应该在其下面显示。

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script><style>html, body { padding: 0; margin: 0; }html, .ui-mobile, .ui-mobile body {    height: 635px;}.ui-mobile, .ui-mobile .ui-page {    min-height: 635px;}.ui-content{padding:10px 15px 0px 15px;}.ui-content .ui-listview {    margin: -15px -15px 0px -15px;}</style></head> <body> <div data-role="page" style="max-height:640px; min-height:640px;"><div data-role="content" > <ul data-role="listview"> <li> <h3>Animals</h3> <p>All your favorites from aarkvarks to zebras.</p> <ul> <li><div>Pets</div><span class="ui-li-count">6</span><ul><li><a href="example2.html">Canary</a></li><li><a href="example2.html">Cat</a></li><li><a href="example2.html">Dog</a></li><li><a href="example2.html">Gerbil</a></li><li><a href="example2.html">Iguana</a></li><li><a href="example2.html">Mouse</a></li></ul></li><li><div>Farm animals</div><p class="ui-li-count">6</p><ul><li><a href="example2.html">Chicken</a></li><li><a href="example2.html">Cow</a></li><li><a href="example2.html">Duck</a></li><li><a href="example2.html">Horse</a></li><li><a href="example2.html">Pig</a></li><li><a href="example2.html">Sheep</a></li></ul></li><li><div>Wild animals</div><p class="ui-li-count">18</p><ul><li><a href="example2.html">Aardvark</a></li><li><a href="example2.html">Alligator</a></li><li><a href="example2.html">Ant</a></li><li><a href="example2.html">Bear</a></li><li><a href="example2.html">Beaver</a></li><li><a href="example2.html">Cougar</a></li><li><a href="example2.html">Dingo</a></li><li><a href="example2.html">Eagle</a></li><li><a href="example2.html">Elephant</a></li><li><a href="example2.html">Ferret</a></li><li><a href="example2.html">Frog</a></li><li><a href="example2.html">Giraffe</a></li><li><a href="example2.html">Lion</a></li><li><a href="example2.html">Monkey</a></li><li><a href="example2.html">Panda bear</a></li><li><a href="example2.html">Polar bear</a></li><li><a href="example2.html">Tiger</a></li><li><a href="example2.html">Zebra</a></li></ul></li></ul> </li> <li> <h3>Colors</h3> <p>Fresh colors from the magic rainbow.</p> <ul> <li><a href="example2.html">Blue</a></li><li><a href="example2.html">Green</a></li><li><a href="example2.html">Orange</a></li><li><a href="example2.html">Purple</a></li><li><a href="example2.html">Red</a></li><li><a href="example2.html">Yellow</a></li><li><a href="example2.html">Violet</a></li></ul> </li> <li> <h3>Vehicles</h3> <p>Everything from cars to planes.</p> <ul> <li><div>Cars</div><span class="ui-li-count">22</span><ul><li><a href="example2.html">Acura</a></li><li><a href="example2.html">Audi</a></li><li><a href="example2.html">BMW</a></li><li><a href="example2.html">Cadillac</a></li><li><a href="example2.html">Chrysler</a></li><li><a href="example2.html">Dodge</a></li><li><a href="example2.html">Ferrari</a></li><li><a href="example2.html">Ford</a></li><li><a href="example2.html">GMC</a></li><li><a href="example2.html">Honda</a></li><li><a href="example2.html">Hyundai</a></li><li><a href="example2.html">Infiniti</a></li><li><a href="example2.html">Jeep</a></li><li><a href="example2.html">Kia</a></li><li><a href="example2.html">Lexus</a></li><li><a href="example2.html">Mini</a></li><li><a href="example2.html">Nissan</a></li><li><a href="example2.html">Porsche</a></li><li><a href="example2.html">Subaru</a></li><li><a href="example2.html">Toyota</a></li><li><a href="example2.html">Volkswagon</a></li><li><a href="example2.html">Volvo</a></li></ul></li><li><div>Planes</div><span class="ui-li-count">7</span><ul><li><a href="example2.html">Boeing</a></li><li><a href="example2.html">Cessna</a></li><li><a href="example2.html">Derringer</a></li><li><a href="example2.html">Embraer</a></li><li><a href="example2.html">Gulfstream</a></li><li><a href="example2.html">Piper Aircraft</a></li><li><a href="example2.html">Raytheon</a></li></ul></li><li><div>Construction</div><span class="ui-li-count">3</span><ul><li><a href="example2.html">Caterpillar</a></li><li><a href="example2.html">Ford</a></li><li><a href="example2.html">John Deere</a></li></ul></li></ul> </li> </ul> </div></div></body></html>

开始的效果

点击第一个列表的效果

数字排序列表 ol

使用有序列表 ol 可以创建数字排序的列表，用来表现顺序。比如说，搜索结果或者电影排行榜时非常有用。当增强效果应用到列表时，Jquery Mobile优先使用css的方式给列表添加编号，当浏览器不支持这种方式时，框架会采用JavaScript将编号写入列表中。

<ol data-role="listview"> <li><a href="example3.html">The Godfather</a></li> <li><a href="example3.html">Inception</a></li> <li><a href="example3.html">The Good, the Bad and the Ugly </a></li> <li><a href="example3.html">Pulp Fiction</a></li> <li><a href="example3.html">Schindler's List</a></li> </ol>

只读列表

列表也可以用来展示没有交互的条目，，通常作为插图列表。这个列表是建立从一个无序或有序列表，没有链接列表项。该框架样式列表项目按钮像其他类型列表（见主题列表），但没有对渐变背景。

<h2>Simple list</h2> <ul data-role="listview" data-inset="true"> <li>Acura</li> <li>Audi</li> <li>BMW</li> <li>Cadillac</li> <li>Ferrari</li> </ul>

<h2>Thumbnail list</h2> <ul data-role="listview" data-inset="true"> <li> <img src="images/album-bb.jpg" /> <h3>Broken Bells</h3> <p>Broken Bells</p> </li> <li> <img src="images/album-hc.jpg" /> <h3>Warning</h3> <p>Hot Chip</p> </li> <li> <img src="images/album-p.jpg" /> <h3>Wolfgang Amadeus Phoenix</h3> <p>Phoenix</p> </li> </ul>

拆分按钮列表

有时每个列表项会有多于一个操作，这时拆分按钮用来提供2个独立的可点击的部分：列表项本身和列表项右边的小icon。要创建这种拆分按钮，在li 插入第二个链接即可，框架会创建一个竖直的分割线，并把链接样式化为一个只有icon的按钮，记得设置title属性以保证可访问性。

你可以通过指定 data-split-icon 属性来设置位于右边的分隔项的图标。默认的图标是 arrow-r 。通过添加 data-icon 属性，为每一个分割设置单个图标。主题的样本颜色的分割按钮缺省为“B”（在默认主题的蓝色）但可以通过图标分隔项的主题样式可以通过 data-split-theme 属性来设置。

<ul data-role="listview" data-split-icon="gear" data-split-theme="d"><li><a href="index.html"><img src="images/album-bb.jpg" /><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a></li><li><a href="index.html"><img src="images/album-hc.jpg" /><h3>Warning</h3><p>Hot Chip</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a></li><li><a href="index.html"><img src="images/album-p.jpg" /><h3>Wolfgang Amadeus Phoenix</h3><p>Phoenix</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a></li><ul>

列表分隔 data-role="list-divider"

列表项也可以转化为列表分割项，用来组织列表，使列表项成组。给任意列表项添加 data-role="list-divider" 属性即可。默认情况下列表项的主题样式为“b“（蓝色），但给列表（ul或ol）添加 data-divider-theme 属性可以设置列表分割项的主题样式。

<body> <div data-role="page" style="max-height:1410px; min-height:1410px;"><div data-role="content" > <ul data-role="listview"><li data-role="list-divider">A</li><li><a href="index.html">Adam Kinkaid</a></li><li><a href="index.html">Alex Wickerham</a></li><li><a href="index.html">Avery Johnson</a></li><li data-role="list-divider">B</li><li><a href="index.html">Bob Cabot</a></li><li data-role="list-divider">C</li><li><a href="index.html">Caleb Booth</a></li><li><a href="index.html">Christopher Adams</a></li><li><a href="index.html">Culver James</a></li></ul></div></div></body>

自动分隔 data-autodividers="true"

列表视图添加 data-autodividers="true" 属性，可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。或者你也可以指定分隔的文本设置，使用 autodividersSelector 选项，以编程的方式设置。

$( "#mylistview" ).listview({ autodividers: true,  // the selector function is passed a <li> element from the listview; // it should return the appropriate divider text for that <li> // element as a string autodividersSelector: function ( li ) { var out = /* generate a string based on the content of li */; return out; } });

如果你使用的是格式化列表，项目中包含一个浮动元素（例如 ui-li-aside），无论它的HTML标记中顺序，该元素都会优先它的兄弟元素。这一结果在浮动元素作为分隔文本的第一个字符。因此，建议在这种情况下，指定的分隔的文本。
如果新的列表项添加到列表或从其中删除，分隔列表，不会自动更新，应该使用refresh()刷新。

<body> <div data-role="page" style="max-height:1410px; min-height:1410px;"><div data-role="content" > <ul data-role="listview" data-autodividers="true"><li><a href="index.html">Adam Kinkaid</a></li><li><a href="index.html">Alex Wickerham</a></li><li><a href="index.html">Avery Johnson</a></li><li><a href="index.html">Bob Cabot</a></li><li><a href="index.html">Caleb Booth</a></li><li><a href="index.html">Christopher Adams</a></li><li><a href="index.html">Culver James</a></li><li><a href="index.html">David Walsh</a></li><li><a href="index.html">Drake Alfred</a></li> </ul></div></div></body>

搜索过滤 data-filter="true"

Jquery Mobile提供一个非常简单的方法，实现客户端搜索功能，筛选列表的选项。只需添加 data-filter="true" 属性即可。框架会在列表上方增加一个搜索框，当用户在搜索输入框中输入时，Jquery Mobile会自动过滤掉不含输入字符的列表项。

搜索输入框默认的字符为 “Filter items...”。通过设置mobileinit事件的绑定程序或者给 $.mobile.listview.prototype.options.filterPlaceholder 选项设置一个字符串，或者给列表设置 data-filter-placeholder 属性，可以设置搜索输入框的默认字符。

<ul data-role="listview" data-filter="true"><li><a href="index.html">Acura</a></li><li><a href="index.html">Audi</a></li><li><a href="index.html">BMW</a></li><li><a href="index.html">Cadillac</a></li><li><a href="index.html">Chrysler</a></li></ul>

如果你想改变的列表项进行过滤的方式，即模糊搜索或匹配字符串的开始，你可以配置通过定义内部使用回调 $.mobile.listview.prototype.options.filterCallback 在mobileinit期间。或者插件创建之后，使用 $( "#mylist" ).listview( "option", "filterCallback", yourFilterFunction)。任何函数定义的回调将提供三个参数。第一，当前列表项的文本，二值搜索，和第三个列表项被过滤。一个真实性值将导致一个隐藏的列表项。默认回调过滤条目没有searchvalue作为子字符串描述如下：

function( text, searchValue, item ) {     return text.toString().toLowerCase().indexOf( searchValue ) === -1; };

data-filtertext

通过对比其他的文本值，来过滤器列表项，添加 data-filtertext 属性列表项。此属性的值将为filtercallback函数的第一个参数代替文字传递。或者你可以使用你所选择的属性的定义列表项目。
默认情况下，视图的简单搜索过滤器在每个列表项的内容。如果你想过滤搜索内容的不同，将data-filtertext属性的项目并将其与一个或多个关键词和短语，应该用于搜索对比。请注意，如果是添加这个属性，列表项的内容被忽略（不被过滤掉）。
这个属性是有用的，处理允许股票代码和完整的公司名称进行搜索，或覆盖国家常见的拼写和缩写。

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search ticker or firm name..." data-inset="true"><li data-filtertext="NASDAQ:ADBE Adobe Systems Incorporated"><a href="#">Adobe</a></li><li data-filtertext="NASDAQ:AMZNL Amazon.com, Inc."><a href="#">Amazon</a></li><li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li><li data-filtertext="NASDAQ:GOOG Google Inc."><a href="#">Google</a></li><li data-filtertext="NYSE:IBM Intl. International Business Machines Corp."><a href="index.html">IBM</a></li><li data-filtertext="NASDAQ:MSFT Microsoft Corporation"><a href="#">Microsoft</a></li><li data-filtertext="NASDAQ:YHOO Yahoo! Inc."><a href="#">Yahoo</a></li><li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li></ul>

文本格式和计数气泡

框架支持通过语义化的HTML标签，来显示列表项中所需常见的文本格式（比如标题/描述，二级信息，计数等）。

列表项右侧显示计数指示器，把数字包含在一个容器内，并给它要添加CSS类 ui-li-count 即可。
文本内容按层次等级来显示，标题使用<h1><h2>...<h6>来强调，段落文本来使用 p 标签减少强调。
在列表项右侧显示补充信息，把它包裹在一个容器内，并给它添加CSS类 ui-li-aside 即可。

<ul data-role="listview"><li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li><li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li><li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li><li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li><li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li></ul>

<ul data-role="listview" data-theme="d" data-divider-theme="d"> <li data-role="list-divider"> Friday, October 8, 2010 <span class="ui-li-count"> 2</span> </li> <li> <a href="index.html"> <h3> Stephen Weber</h3> <p> <strong> You've been invited to a meeting at Filament Group in Boston, MA</strong> </p> <p> Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> <p class="ui-li-aside"> <strong> 6:24</strong> PM</p> </a> </li> <li> <a href="index.html"> <h3> jQuery Team</h3> <p> <strong> Boston Conference Planning</strong> </p> <p> In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p> <p class="ui-li-aside"> <strong> 9:18</strong> AM</p> </a> </li> <li data-role="list-divider"> Thursday, October 7, 2010 <span class="ui-li-count"> 1</span> </li> <li> <a href="index.html"> <h3> Avery Walker</h3> <p> <strong> Re: Dinner Tonight</strong> </p> <p> Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p> <p class="ui-li-aside"> <strong> 4:48</strong> PM</p> </a> </li> </ul>

添加缩略图

在列表项目的左侧显示缩略图，只要添加一个图像，并且它是列表项的第一个子元素。该框架将缩放图像80px的正方形。而要使用标准的16*16的图标作为缩略图的话，为图片元素添加ui-li-icon class即可。

<ul data-role="listview"> <li> <a href="index.html"> <img src="images/album-bb.jpg" /> <h3> Broken Bells</h3> <p> Broken Bells</p> </a> </li> <li> <a href="index.html"> <img src="images/album-hc.jpg" /> <h3> Warning</h3> <p> Hot Chip</p> </a> </li> </ul>

<ul data-role="listview"> <li> <a href="index.html"> <img src="images/gf.png" alt="France" class="ui-li-icon"> France <span class="ui-li-count"> 4</span> </a> </li> <li> <a href="index.html"> <img src="images/de.png" alt="Germany" class="ui-li-icon"> Germany <span class="ui-li-count"> 4</span> </a> </li> </ul>

内嵌列表样式 data-inset="true"

如果列表嵌入在其他类型的内容中，内嵌列表可以帮到忙，内嵌列表将会以圆角和边缘留白的块显示出来，并且也受主题调板所控制。通过为 ul （ol）添加 data-inset="true" 即可。

<ul data-role="listview" data-inset="true"> <li> <a href="index.html"> Acura</a> </li> <li> <a href="index.html"> Audi</a> </li> <li> <a href="index.html"> BMW</a> </li> <li> <a href="index.html"> Cadillac</a> </li> <li> <a href="index.html"> Ferrari</a> </li> </ul>

过滤展示 data-filter-reveal="true"

过滤显示功能使易与本地数据建立一个简单的自动完成功能。当一个过滤列表的有 data-filter-reveal="true" 的属性，搜索栏是空白的时候，它会自动隐藏所有的列表项。
data-filter-placeholder 属性可以被添加到指定过滤器的占位符文本。
如果你要搜索一长列的值，我们提供了另外一种方式来与远程数据源创建一个过滤器。

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true"> <li> <a href="#"> Apple</a> </li> <li> <a href="#"> Banana</a> </li> <li> <a href="#"> Cherry</a> </li> <li> <a href="#"> Cranberry</a> </li> <li> <a href="#"> Grape</a> </li> <li> <a href="#"> Orange</a> </li> </ul>

搜索前

搜索时

远程数据的自动过滤 listviewbeforefilter

列表视图的过滤器赛选远程数据，使用 listviewbeforefilter 事件，动态填充一个列表视图，作为用户类型的搜索查询。这是有用的，当你有一个非常大的数据集，不能被预先加载到本地。如城市、邮政编码、或产品。

<!DOCTYPE html>  <html>  <head>  <title> Page Title</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script>     <script> $( document ).on( "pageinit", "#myPage", function() {$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {var $ul = $( this ),$input = $( data.input ),value = $input.val(),html = "";$ul.html( "" );if ( value && value.length >  2 ) {$ul.html( "<li> <div class='ui-loader'> <span class='ui-icon ui-icon-loading'> </span> </div> </li> " );$ul.listview( "refresh" );$.ajax({url: "http://gd.geobytes.com/AutoCompleteCity",dataType: "jsonp",crossDomain: true,data: {q: $input.val()}}).then( function ( response ) {$.each( response, function ( i, val ) {html += "<li> " + val + "</li> ";});$ul.html( html );$ul.listview( "refresh" );$ul.trigger( "updatelayout");});}});});    </script> <style> html, body { padding: 0; margin: 0; }html, .ui-mobile, .ui-mobile body {    height: 1035px;}.ui-mobile, .ui-mobile .ui-page {    min-height: 1035px;}.ui-content{padding:10px 15px 0px 15px;}.ui-listview-filter-inset {margin-top: 0;}</style> </head>  <body>  <div data-role="page" id="myPage" style="max-height:1040px; min-height:1040px;"> <div data-role="content" >      <div data-demo-html="true" data-demo-js="true" data-demo-css="true"> <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"> </ul> </div> </div> </div> </body> </html>

上面的代码展示的是“全世界的城市”。至少输入三个字符，自动完成功能将显示所有可能的搜索。

搜索前

搜索时

调用视图的插件 listview()

你可以直接调用任何选择器ListView插件，就像任何jQuery插件：

$( "#mylist" ).listview();

更新列表 refresh()

列表视图的增删项目或者创建嵌套列表，需要使用refresh()方法来刷新。

$( "#mylist" ).listview( "refresh" );

refresh()方法仅影响被添加到列表的新节点。这是因为列表本身的任何项已经被强化，所以刷新过程中忽视。这意味着，如果你改变的内容或属性在一个已经增强的列表项中，那么这些不会被改变。如果你想要一个列表项被更新替换，要在refresh()方法之前使用新的HTML标签。
如果你最初想隐藏项目中你可以通过添加一个CSS类 ui-screen-hidden 给此元素。使用此类可以保证项目的圆角以及border-bottom的效果显示。