JQuery Mobile 应用实例（1）
本文档是我个人所做word总结的粘贴部分少了效果图，想要更全的，可以下载word文档，下载地址：
http://pan.baidu.com/s/1geIQ0Np
1.1引用CSS和js
<head> <link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script> </head>
1.2引用在线的css和js
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
2.Pages
例1：简单页面
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>
<div data-role="content">
<p>我是一名移动开发者！</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>· data-role="page" 是显示在浏览器中的页面
· data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
· data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
· data-role="footer" 创建页面底部的工具栏
例2：单一 HTML文件中创建多个页面
通过唯一的 id来分隔每张页面，并使用 href属性来连接彼此。
<div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo">转到页面二</a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">转到页面一</a> </div> </div>
例3：将页面用作对话框
<div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo" data-rel="dialog">转到页面二</a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">转到页面一</a> </div> </div>
3.Transitions过渡
过渡效果可应用于任意链接或通过使用 data-transition属性进行的表单提交：
<a href="#anylink" data-transition="slide">滑动到页面二</a>
| 过渡 | 描述 | 测试 |
| fade | 默认。淡入淡出到下一页。 | |
| flip | 从后向前翻动到下一页。 | |
| flow | 抛出当前页面，引入下一页。 | |
| pop | 像弹出窗口那样转到下一页。 | |
| slide | 从右向左滑动到下一页。 | |
| slidefade | 从右向左滑动并淡入到下一页。 | |
| slideup | 从下到上滑动到下一页。 | |
| slidedown | 从上到下滑动到下一页。 | |
| turn | 转向下一页。 | |
| none | 无过渡效果。 |
提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为"reverse" 的data-direction 属性。在后退按钮上是默认的。
实例1：反向滑动
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
4.Button按钮
jQuery Mobile 中的按钮可通过三种方法创建：
· 使用 <button> 元素
· 使用 <input> 元素
· 使用 data-role="button" 的 <a> 元素
示例1：<button>
<button>按钮</button>
示例2：<input>
<input type="button" value="按钮">
示例3：<a>
<a href="#" data-role="button">按钮</a>
示例4：用class设置样式
<a href="#" class="ui-btn">Anchor</a> <button class="ui-btn">Button</button>
实例5：链接按钮
<a href="#pagetwo" data-role="button">转到页面二</a>行内按钮
如果您需要两个或多个按钮并排显示，请添加 data-inline="true"：
实例6：行内按钮
<a href="#pagetwo" data-role="button" data-inline="true">button</a>
<a href="#pagetwo" data-role="button" data-inline="true">button</a>或者：
<a href="#" class="ui-btn ui-btn-inline">Anchor</a> <button class="ui-btn ui-btn-inline">Button</button>
组合按钮
将data-role="controlgroup"属性与 data-type="horizontal|vertical"一同使用，以规定水平或垂直地组合按钮。
提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。
实例7：组合按钮
<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
<div data-role="controlgroup" data-type="vertical">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>后退按钮
如需创建后退按钮，请使用 data-rel="back"属性（会忽略锚的 href值）
实例8:后退按钮
<a href="#" data-role="button" data-rel="back">返回</a>
更多用于按钮的 data-* 属性
| 属性 | 值 | 描述 | 实例 |
| data-corners | true | false | 规定按钮是否有圆角。 | |
| data-mini | true | false | 规定是否是小型按钮。 | |
| data-shadow | true | false | 规定按钮是否有阴影。 |
示例9：圆角按钮
<a href="#" class="ui-btn ui-corner-all">Anchor</a> <button class="ui-btn ui-corner-all">Button</button>
示例10：delete按钮
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a> <div id="custom-border-radius"> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a> </div>
示例11：Shadow
<a href="#" class="ui-btn ui-shadow">Anchor</a>
<button class="ui-btn ui-shadow">Button</button>示例12：Theme
<a href="#" class="ui-btn">Anchor - Inherit</a> <a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A</a> <a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B</a> <button class="ui-btn">Button - Inherit</button> <button class="ui-btn ui-btn-a">Button - Theme swatch A</button> <button class="ui-btn ui-btn-b">Button - Theme swatch B</button>
示例13：Mini
<a href="#" class="ui-btn ui-mini">Anchor</a> <button class="ui-btn ui-mini">Button</button>
5.Button Icons按钮图标
如需向您的按钮添加图标，请使用 data-icon 属性.
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
| 属性值 | 描述 | 图标 | 实例 |
| data-icon="arrow-l" | 左箭头 | ||
| data-icon="arrow-r" | 右箭头 | ||
| data-icon="arrow-d" | 向下 |
| |
| data-icon="arrow-u" | 向上 |
| |
| data-icon="delete" | 删除 | ||
| data-icon="info" | 信息 | ||
| data-icon="home" | 首页 | ||
| data-icon="back" | 返回 | ||
| data-icon="forward" | 向前 |
| |
| data-icon="search" | 搜索 | ||
| data-icon="grid" | 网格 | ||
| data-icon="plus" | 加号 |
| |
| data-icon="minus" | 减号 |
| |
| data-icon="check" | 喜爱 |
| |
| data-icon="star" | 星形 |
| |
| data-icon="gear" | 选项 |
|
示例1：Icons
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a> <button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button>
示例2：定位图标
使用 data-iconpos属性来规定位置：上、右、下或左
<a href="#link" data-role="button"data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button"data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button"data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button"data-icon="search" data-iconpos="left">左</a>提示：默认地，所有按钮中的图标靠左放置。
示例3：只显示图标
如果只需显示图标，请将 data-iconpos设置为"notext"：
<a href="#link" data-role="button"data-icon="search" data-iconpos="notext">搜索</a>
示例4：标题栏
<div data-role="page">
<div data-role="header">
<a href="#" data-role="button" data-icon="home">首页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" data-role="button" data-icon="search">搜索</a>
</div>
</div>
示例:5：标题栏右侧按钮
<div data-role="page">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right" data-icon="search">搜索</a>
</div>
</div>
示例6：页脚栏
<div data-role="footer">
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>
</div>
示例7：页脚栏按钮居中
<div data-role="footer" class="ui-btn">
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>
</div>
示例8：页脚栏组合按钮
<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>
</div>
</div>
示例9：定位页眉和页脚
使用 data-position属性来定位页眉和页脚：
放置页眉和页脚的方式有三种：
· Inline - 默认。页眉和页脚与页面内容位于行内。
· Fixed - 页面和页脚会留在页面顶部和底部。
· Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also overthe page content. It is also slightly see-through
Inline 定位（默认）
<div data-role="page">
<div data-role="header" data-position="inline">
<h1>行内页眉</h1>
</div>
<div data-role="content">
<p><b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。</p>
<p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
</div>
<div data-role="footer" data-position="inline">
<h1>行内页脚</h1>
</div>
</div>
Fixed 定位
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Fixed 页眉</h1>
</div>
<div data-role="content">
<p><b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。</p>
<p><b>提示：</b>如果滚动条可用，那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。</p>
<p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Fixed 页脚</h1>
</div>
</div>
提示：如果需要启用全面定位，请使用 data-position="fixed"，并向该元素添加data-fullscreen属性
Fullscreen 定位
<div data-role="page">
<div data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Fixed 和 Fullscreen 页眉</h1>
</div>
<div data-role="content"><br><br>
<p><b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。</p>
<p><b>提示：</b>敲击屏幕会隐藏或显示页眉和页脚。</p>
<p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable </p>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true">
<h1>Fixed 和 Fullscreen 页脚</h1>
</div>
</div>
提示：fullscreen对于照片、图像和视频非常理想。
提示：对于 fixed 和 fullscreen 定位，触摸屏幕将隐藏和显示页眉及页脚。
示例10：导航栏
导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。
默认地，导航栏中的链接会自动转换为按钮（无需data-role="button"）。
请使用 data-role="navbar" 属性来定义导航栏：
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">首页</a></li>
<li><a href="#" data-icon="arrow-r">页面二</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100%的宽度，两个按钮各分享 50%的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。
活动按钮
示例1：设置活动效果
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="home">首页</a></li>
<li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>
</ul>
</div>
</div>
示例2：为每个按钮设置“被选”外观，以表示用户正在浏览该页面
pageone中
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首页</a></li>
<li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>
</ul>
</div>
</div>
pagetwo中
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">首页</a></li>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">页面二</a></li>
</ul>
</div>
</div>
内容中的导航栏
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
<p>该例演示内容中的导航栏。</p>
</div>
页脚中的导航栏
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
在导航栏中定位图标
<div data-role="footer">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
五个以上的按钮
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
<li><a href="#" data-icon="forward">向前</a></li>
<li><a href="#" data-icon="back">向后</a></li>
<li><a href="#" data-icon="star">星形</a></li>
<li><a href="#" data-icon="gear">选项</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
<p>该例演示当导航栏包含超过五个按钮时的情况。</p>
</div>
6.可折叠
可折叠的内容块
可折叠（Collapsibles）允许您隐藏或显示内容。
<div data-role="content">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是可折叠的内容。</p>
</div>
</div>
默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：
<div data-role="content">
<div data-role="collapsible" data-collapsed="false">
<h1>点击我 - 我可以折叠！</h1>
<p>我是可折叠的内容。</p>
</div>
</div>
嵌套的可折叠块
<div data-role="content">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是可折叠的内容。</p>
<div data-role="collapsible">
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>
</div>
可折叠集合
可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。
创建若干内容块，然后通过data-role="collapsible-set" 用新容器包装这个可折叠块：
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
</div>
</div>
示例1：通过 data-inset 属性来删除圆角
<div data-role="content">
<h2>没有圆角的可折叠内容块：</h2>
<div data-role="collapsible" data-inset="false">
<h1>这是没有圆角的可折叠内容块。</h1>
<p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉圆角。</p>
</div>
</div>
示例2：通过 data-mini 最小化collapsibles
<div data-role="content">
<div data-role="collapsible" data-mini="true">
<h1>点击我 - 我是可折叠的！</h1>
<p>我是可折叠的内容。</p>
</div>
</div>
示例3：通过 data-collapsed-icon 和data-expanded-icon 改变图标（默认是 + 和-）
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h1>data-collapsed-icon 规定按钮的图标。</h1>
<p>data-expanded-icon 规定内容被展开时按钮的图标。</p>
</div>
</div>
7.网格
可使用的布局网格有四种：
| 网格类 | 列 | 列宽度 | 对应 | 实例 |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e |
提示：在列容器中，根据不同的列数，子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。
ui-grid-a
<div data-role="content">
<p>两列布局：</p>
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" data-role="button">第一列按钮</a><br>
<span>第一列：This is some text. This is some text. This is some text. This is some text. This is some text.</span>
</div>
<div class="ui-block-b">
<a href="#" data-role="button">第二列按钮</a><br>
<span>第二列：This is some text. This is some text. This is some text. This is some text.</span>
</div>
</div>
</div>
实例1: 对于 ui-grid-a 类（两列布局），您必须规定两个子元素 ui-block-a和 ui-block-b。
实例2: 对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。
定制网格
可以通过使用 CSS来定制列块：
<style>
.ui-block-a,
.ui-block-b,
.ui-block-c {
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
也可以通过使用行内样式来定制块：
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
多行
注释：ui-block-a-class将始终创建新行：
<div data-role="content">
<p>多行的三列布局：</p>
<div class="ui-grid-b">
<div class="ui-block-a" style="border: 1px solid black;"><span>Some Text1</span></div>
<div class="ui-block-b" style="border: 1px solid black;"><span>Some Text2</span></div>
<div class="ui-block-c" style="border: 1px solid black;"><span>Some Text3</span></div>
<div class="ui-block-a" style="border: 1px solid black;"><span>Some Text4</span></div>
<div class="ui-block-b" style="border: 1px solid black;"><span>Some Text5</span></div>
<div class="ui-block-a" style="border: 1px solid black;"><span>Some Text6</span></div>
</div>
</div>
</div>
8.列表视图
jQueryMobile 中的列表视图是标准的 HTML列表：有序列表 (<ol>)和无序列表 (<ul>)。
如需创建列表，请向 <ol>或 <ul>元素添加 data-role="listview"。
示例1：
<div data-role="content">
<h2>有序列表：</h2>
<ol data-role="listview">
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
</ol>
<h2>无序列表：</h2>
<ul data-role="listview">
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
</ul>
</div>
示例2：如需为列表添加圆角和外边距，请使用 data-inset="true"属性：
<ul data-role="listview" data-inset="true">
提示：默认地，列表中的列表项会自动转换为按钮（无需 data-role="button"）。
示例3：列表分隔符
如需规定列表分隔符，请向 <li>元素添加 data-role="list-divider"属性
<ul data-role="listview">
<li data-role="list-divider">欧洲</li>
<li><a href="#">法国</a></li>
<li><a href="#">德国</a></li>
</ul>
<div data-role="content">
<h2>列表分隔符</h2>
<ul data-role="listview">
<li data-role="list-divider">欧洲</li>
<li><a href="#">德国</a></li>
<li><a href="#">英国</a></li>
<li data-role="list-divider">亚洲</li>
<li><a href="#">中国</a></li>
<li><a href="#">印度</a></li>
<li data-role="list-divider">非洲</li>
<li><a href="#">埃及</a></li>
<li><a href="#">南非</a></li>
</ul>
</div>
示例:4：字母顺序
如果您的列表是字母顺序的（比如通讯录），jQuery Mobile自动添加恰当的分隔符，通过在<ol>或 <ul>元素上设置data-autodividers="true"属性：
<div data-role="content">
<h2>我的通讯录</h2>
<ul data-role="listview" data-autodividers="true" data-inset="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
提示：data-autodividers="true"属性通过对列表项文本的首字母进行大写来创建分隔符。
示例5：搜索过滤器
如需在列表中添加搜索框，请使用 data-filter="true"属性：
<ul data-role="listview" data-filter="true"></ul>
<div data-role="content">
<h2>我的通讯录</h2>
<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
示例6：改变搜索过滤器的文本
默认地，搜索框中的文本是 "Filter items..."。
如需修改默认文本，请使用 data-filter-placeholder属性：
<ul data-role="listview" data-filter="true"data-filter-placeholder="搜索姓名">
<div data-role="content">
<h2>我的通讯录</h2>
<uldata-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名...">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
示例7：只读列表
<div data-role="content">
<h2>有序列表：</h2>
<ol data-role="listview">
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ol>
<h2>无序列表：</h2>
<ul data-role="listview">
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
</div>
扫一扫
8481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
