jquery mobile Listview （列表视图）详讲
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创建新的页面，然后启动一个页面转变场景。
对非内嵌的列表的样式的说明：
为了让所有的非内嵌式的列表都充满屏幕边缘，非内嵌式的列表会有一个-15px的 margin 来抵消掉body 15px 的 padding 。所以如果你想在列表的上方或下方添加内容的话，需要给他们添加额外的margin，否则会产生重叠的现象。
嵌套列表
通过UL或OL的子元素可以嵌套列出的子项目，创建嵌套列表。当一个拥有子列表的列表项被点击时，Jquery Mobile框架会生成一个新的ul页面充满屏幕，并自动生成一个为父列表项名称为标题的header,以及一个子列表。这些动态嵌套的列表样式是“B”主题的样本（在默认主题的蓝色）来表明你是在一个二级导航。列表可以嵌套，多层次的深入和所有页面和链接将由Jquery Mobile框架自动处理。
注意：
每个嵌套的列表视图的页面是在父页面加载时创建，并且每个嵌套的页的页事件也将触发。
子页面的标题是父列表的列表文本。所以一定要使用一个单一的元素的列表项的标题，其他元素（像计数气泡后面的文字描述）应该在其下面显示。
Page Title
-
Animals
All your favorites from aarkvarks to zebras.
-
Colors
Fresh colors from the magic rainbow.
-
Vehicles
Everything from cars to planes.
开始的效果
点击第一个列表的效果
数字排序列表 ol
使用有序列表 ol 可以创建数字排序的列表，用来表现顺序。比如说，搜索结果或者电影排行榜时非常有用。当增强效果应用到列表时，Jquery Mobile优先使用css的方式给列表添加编号，当浏览器不支持这种方式时，框架会采用JavaScript将编号写入列表中。
只读列表
列表也可以用来展示没有交互的条目，，通常作为插图列表。这个列表是建立从一个无序或有序列表，没有链接列表项。该框架样式列表项目按钮像其他类型列表（见主题列表），但没有对渐变背景。
Simple list
- Acura
- Audi
- BMW
- Cadillac
- Ferrari
Thumbnail list
-
Broken Bells
Broken Bells
-
Warning
Hot Chip
-
Wolfgang Amadeus Phoenix
Phoenix
拆分按钮列表
有时每个列表项会有多于一个操作，这时拆分按钮用来提供2个独立的可点击的部分：列表项本身和列表项右边的小icon。要创建这种拆分按钮，在li 插入第二个链接即可，框架会创建一个竖直的分割线，并把链接样式化为一个只有icon的按钮，记得设置title属性以保证可访问性。
你可以通过指定 data-split-icon 属性来设置位于右边的分隔项的图标。默认的图标是 arrow-r 。通过添加 data-icon 属性，为每一个分割设置单个图标。主题的样本颜色的分割按钮缺省为“B”（在默认主题的蓝色）但可以通过图标分隔项的主题样式可以通过 data-split-theme 属性来设置。
列表分隔 data-role="list-divider"
列表项也可以转化为列表分割项，用来组织列表，使列表项成组。给任意列表项添加 data-role="list-divider" 属性即可。默认情况下列表项的主题样式为“b“（蓝色），但给列表（ul或ol）添加 data-divider-theme 属性可以设置列表分割项的主题样式。
自动分隔 data-autodividers="true"
列表视图添加 data-autodividers="true" 属性，可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。或者你也可以指定分隔的文本设置，使用 autodividersSelector 选项，以编程的方式设置。
$( "#mylistview" ).listview({
autodividers: true,
// the selector function is passed a element from the listview;
// it should return the appropriate divider text for that
// 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()刷新。
搜索过滤 data-filter="true"
Jquery Mobile提供一个非常简单的方法，实现客户端搜索功能，筛选列表的选项。只需添加 data-filter="true" 属性即可。框架会在列表上方增加一个搜索框，当用户在搜索输入框中输入时，Jquery Mobile会自动过滤掉不含输入字符的列表项。
搜索输入框默认的字符为 “Filter items...”。通过设置mobileinit事件的绑定程序或者给 $.mobile.listview.prototype.options.filterPlaceholder 选项设置一个字符串，或者给列表设置 data-filter-placeholder 属性，可以设置搜索输入框的默认字符。
如果你想改变的列表项进行过滤的方式，即模糊搜索或匹配字符串的开始，你可以配置通过定义内部使用回调 $.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属性的项目并将其与一个或多个关键词和短语，应该用于搜索对比。请注意，如果是添加这个属性，列表项的内容被忽略（不被过滤掉）。
这个属性是有用的，处理允许股票代码和完整的公司名称进行搜索，或覆盖国家常见的拼写和缩写。
文本格式和计数气泡
框架支持通过语义化的HTML标签，来显示列表项中所需常见的文本格式（比如 标题/描述，二级信息，计数等）。
- Friday, October 8, 2010 2
-
Stephen Weber
You've been invited to a meeting at Filament Group in Boston, MA
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.
6:24 PM
-
jQuery Team
Boston Conference Planning
In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.
9:18 AM
- Thursday, October 7, 2010 1
-
Avery Walker
Re: Dinner Tonight
Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
4:48 PM
添加缩略图
在列表项目的左侧显示缩略图，只要添加一个图像，并且它是列表项的第一个子元素。该框架将缩放图像80px的正方形。而要使用标准的16*16的图标作为缩略图的话，为图片元素添加ui-li-icon class即可。
France 
Germany 内嵌列表样式 data-inset="true"
如果列表嵌入在其他类型的内容中，内嵌列表可以帮到忙，内嵌列表将会以圆角和边缘留白的块显示出来，并且也受主题调板所控制。 通过为 ul （ol）添加 data-inset="true" 即可。
过滤展示 data-filter-reveal="true"
搜索前
搜索时
远程数据的自动过滤 listviewbeforefilter
列表视图的过滤器赛选远程数据，使用 listviewbeforefilter 事件，动态填充一个列表视图，作为用户类型的搜索查询。这是有用的，当你有一个非常大的数据集，不能被预先加载到本地。如城市、邮政编码、或产品。
Page Title
上面的代码展示的是“全世界的城市”。至少输入三个字符，自动完成功能将显示所有可能的搜索。
搜索前
搜索时
调用视图的插件 listview()
你可以直接调用任何选择器ListView插件，就像任何jQuery插件：
$( "#mylist" ).listview();更新列表 refresh()
列表视图的增删项目或者创建嵌套列表，需要使用refresh()方法来刷新。
$( "#mylist" ).listview( "refresh" );