标签：
1. 列表组件
data-count-theme countTheme 指定数字泡泡的显示风格
data-divider-theme dividerTheme 指定分割线的显示风格
data-filter filter 若为true则列表组件提供过滤器
N/A filterCallback 过滤器列表项的回调函数
data-filter-placeholdr filterPlaceholder 过滤器的占位内容
data-filter-theme filterTheme 过滤器搜索栏显示风格
data-header-theme headerTheme 嵌套标题显示风格
data-icon
data-inset inset 若为true 列表组件以内嵌风格显示列表
data-split-icon splitIcon 分栏列表指定图标
data-split-theme splitTheme 分栏列表显示风格
生成内嵌列表
<div id="container" style="padding:20px">
<ul data-role="listview" data-inset="true">
<li><a href="#bj">北京</a></li>
<li><a href="#cd">成都</a></li>
<li><a href="#sh">上海</a></li>
</ul>
</div>
分栏列表
在一个 li 里面包含两个链接，jQueryMobile 默认右边的链接为带箭头的图标，可以给ul使用data-split-icon指定自定义图标
<div id="container" style="padding: 20px">
<ul data-role="listview" data-inset="true">
<li><a href="#basket" class="buy" id="rose">Roses</a>
<a href="#roses">Roses</a></li>
<li><a href="#basket" class="buy" id="orchid">Orchids</a>
<a href="#orchids">Orchids</a> </li>
<li><a href="#basket" class="buy" id="astor">Astors</a>
<a href="#astors">Astors</a> </li>
</ul>
</div>
过滤列表
data-filter="true" 在列表上方添加一个搜索框，只有输入两个以上字母后才启动搜索功能
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#basket">Roses</a></li>
<li><a href="#basket">Orchids</a></li>
<li><a href="#basket">Astors</a></li>
</ul>
自定义过滤列表
<script>
$(document).bind("pageinit",function(){
$("ui").listview("option","filterCallback",function(listItem,filter){ //listItem:列表项文本，filter:用户输入文本
var pattern=new RegExp("^"+filter,"i"); //匹配列表项的起始部分，不区分大小写
return !pattern.test(listItem);
});
});
</script>
添加分隔
设置元素的data-role="list-divider"，即可添加分隔。并给ul添加data-divider-theme="a" 做区分
<div id="container" style="padding: 20px">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">A</li>
<li><a href="">aaaa</a></li>
<li data-role="list-divider">B</li>
<li><a href="">bbbb</a></li>
<li data-role="list-divider">C</li>
<li><a href="">cccc</a></li>
</ul>
</div>
基于约定的格式(计数泡泡)
在li元素中额外增加一个后代元素，就创建了一个计数泡泡，这个子元素必须有内容且有ul-li-count属性
<ul data-role="listview" data-inset="true" data-theme="c" data-filter="true">
<li><a href="">
<h1>消息</h1> //强调文本
<p>未读消息累计有</p>
<div class="ui-li-count">25</div> //泡泡
</a></li>
<li><div class="ui-li-count">8</div><a href="">邮件</a></li>
<li><a href="">提醒<div class="ui-li-aside">该吃药了</div></a></li> // class="ui-li-aside" 侧栏代替泡泡
</ul>
2. 面板组件
把div元素的 data-role属性设置为 panel即可生成面板，
data-dismissable dismissable 指定点击触发面板显示的页是否可以关闭面板，默认true
data-display display 指定面板与触发面板的也之间的关系(reveal,push,overlay)
data-position position 指定面板的显示位置，默认left, right
data-position-fixed positionFixed 当用户向下滚动时，面板是否保持可见，默认false
data-swipe-close swipeClose 指定面板可否使用轻扫手势关闭，默认true
reveal 默认值，把页退走
push 页的尺寸会变小，与面板共享空间
overlay 面板显示在也得上方，盖住页
标签：
原文地址：http://www.cnblogs.com/zhangchen2015/p/4579690.html
