jQuery2 高级教程（十二）
三十、按钮和可折叠块
在这一章中，我描述了另外两个 jQuery Mobile 部件:按钮和可折叠块。jQuery Mobile button widget 的工作方式与您在本书前面看到的 jQuery UI 按钮类似，只是您可以创建和使用简单的按钮，而无需使用任何定制的 JavaScript 代码，而是依靠data属性。
可折叠块类似于手风琴的单个面板；事实上，您可以单独使用可折叠积木，或者将几个积木组合在一起，形成一个简单的手风琴。表 30-1 对本章进行了总结。我还向您展示了在同一主题上提供变体的小部件——导航条，它对按钮进行分组以提供一致的导航支持，以及可折叠集，它可用于创建折叠式小部件。
表 30-1 。章节总结
| 问题 | 解决办法 | 列表 |
|---|---|---|
| 自动创建一个按钮部件。 | 添加一个类型为submit、reset或button的button元素或input元素。 | one |
| 从其他元素创建按钮部件。 | 应用值为button的data-role属性。 | Two |
| 创建一组按钮。 | 使用值为controlgroup的data-role属性。使用data-type属性改变方向。 | 3, 4 |
| 在按钮上添加和定位图标。 | 使用data-icon和data-iconpos属性。 | five |
| 创建更小的按钮。 | 使用data-mini和data-inline属性。 | six |
| 更新按钮以反映基础元素中的更改。 | 使用refresh方法。 | seven |
| 响应按钮事件。 | 处理来自基础元素的事件。 | eight |
| 提供一致的导航按钮。 | 使用导航条小部件。 | nine |
| 将图标放置在导航栏中。 | 使用data-iconpos属性 | Ten |
| 创建可折叠块。 | 应用值为collapsible的data-role属性。确保有一个 header 元素作为第一个子元素。 | 11, 12 |
| 当块折叠或展开时接收通知。 | 处理collapse和expand事件。 | Thirteen |
| 创建一个手风琴。 | 使用值为collapsible-set的data-role属性。 | Fourteen |
使用 jQuery Mobile 按钮
我已经在前面的例子中使用了一些按钮部件，但是现在是时候返回来解释它们是如何工作的了。
创建按钮小部件
作为自动页面增强过程的一部分，jQuery Mobile 从button元素或从类型属性设置为submit、reset、button或image的input元素创建按钮小部件。您不必对这些元素类型采取任何特殊的操作，因为 jQuery Mobile 会为您完成所有的工作。清单 30-1 显示了一个包含一些自动增强元素的页面。
清单 30-1 。依靠按钮部件的自动创建
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<button>Button</button>
<input type="submit" value="Input (Submit)" />
<input type="reset" value="Input (Reset)" />
<input type="button" value="Input (Button)" />
</div>
</div>
</body>
</html>
你可以在图 30-1 中看到如何为每种类型的元素创建一个按钮小部件。
图 30-1 。jQuery Mobile 自动创建的按钮部件
从其他元素创建按钮
jQuery Mobile 还可以从其他元素创建按钮小部件。在前面的章节中，您看到了我通过应用值为button的data-role属性，从a元素创建一个按钮小部件。您也可以对其他类型的元素这样做，比如div。清单 30-2 包含了一个例子。
清单 30-2 。从其他元素创建按钮
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<a href="document2.html" data-role="button">A Element</a>
<div data-role="button">DIV Element</div>
</div>
</div>
</body>
</html>
你可以在图 30-2 中看到 jQuery Mobile 如何处理这个例子中的元素。
图 30-2 。使用其他元素创建按钮部件
创建分组按钮
您可以通过创建一个控件组来创建一组没有间距的按钮。您可以通过将值为controlgroup的data-role属性应用于两个或更多按钮小部件的父元素来实现这一点。清单 30-3 提供了一个演示。
清单 30-3 。创建一组分组按钮
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<div data-role="controlgroup">
<button>Back</button>
<button>Home</button>
<button>Next</button>
</div>
</div>
</div>
</body>
</html>
在这个例子中，有三个按钮，它们都是一个div元素的子元素，这个元素的data-role是控制组。你可以在图 30-3 中看到效果。注意只有顶部和底部的按钮有圆角。
图 30-3 。显示在组中的一组按钮
您可以通过将data-type属性设置为horizontal来改变按钮组的方向，如清单 30-4 所示。
清单 30-4 。创建水平按钮组
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<button>Back</button>
<button>Home</button>
<button>Next</button>
</div>
</div>
</div>
</body>
</html>
你可以在图 30-4 中看到浏览器是如何显示水平按钮组的。请再次注意圆角是如何仅应用于外部元素的。
图 30-4 。创建水平按钮组
配置 jQuery Mobile 按钮
jQuery Mobile 定义了许多数据属性和配置设置，您可以使用它们来配置按钮和从不同的元素类型创建按钮。这些属性在表 30-2 中有所描述，我将在接下来的章节中演示这些按钮特有的属性。
表 30-2 。数据属性和按钮配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-corners | corners | 当true时，按钮用圆角绘制。值false意味着将使用方形拐角。默认是true。 |
data-icon | icon | 指定要在按钮中使用的图标。 |
data-iconpos | iconpos | 如果使用了图标，则指定图标的位置。 |
data-iconshadow | iconshadow | 设置为true时，对图标应用阴影。 |
data-inline | inline | 创建一个按其内容调整大小的按钮(而不是填满屏幕)。 |
data-mini | mini | 当设置为true时，显示一个紧凑按钮。 |
data-shadow | shadow | 当true时，按钮用阴影绘制。值false意味着不使用阴影。默认是true。 |
向按钮添加图标
jQuery Mobile 包括一组可以在按钮中使用的图标。这些都包含在你在第二十七章中安装的images目录下的一个镜像文件中。表 30-3 显示了图标名称列表和每个图标的简要描述。
表 30-3 。jQuery Mobile 中包含的图标
| 图标名称 | 描述 |
|---|---|
arrow-l``arrow-r``arrow-u | 面向左、右、上、下的箭头。 |
bars | 一组三条水平线。 |
edit | 铅笔，用于表示用户可以编辑内容。 |
check delete | 一张支票和一个十字。 |
plus minus | 加号和减号。 |
gear | 一个齿轮。 |
refresh``forward``back``home | 用于刷新、前进到下一页、返回到上一页、返回到主页或搜索的浏览器样式图标。 |
grid | 一个由小方块组成的网格。 |
star | 一颗星星。 |
alert | 小心警告。 |
info | 程式化的字母 I。 |
使用data-icon属性将图标应用于按钮，其中的值指定了要使用的图标的名称。使用data-iconpos属性来指定图标在按钮中的位置。默认为left，但也可以指定top、right和bottom。如果将data-iconpos设置为notext，则仅显示图标。清单 30-5 提供了一个使用这两种属性的例子。
清单 30-5 。向按钮添加图标
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<button data-icon="home">Home</button>
</div>
<div class="ui-block-b">
<button data-icon="home" data-iconpos="top">Home</button>
</div>
<div class="ui-block-c">
<button data-icon="home" data-iconpos="notext"></button>
</div>
</div>
</div>
</div>
</body>
</html>
在这个例子中，我创建了三个按钮，它们都显示了home图标。第一个按钮使用默认的图标位置，第二个按钮使用top位置，最后一个按钮使用notext值，这将创建一个只有图标的按钮。你可以在图 30-5 中看到这些按钮是如何出现的。
图 30-5 。创建图标按钮
你可以看到每个按钮都有独特的风格。最引人注目的是最后一个按钮，它不显示任何文本。这看起来很吸引人，但是我对这种按钮的体验是，它们很难用手指点击，并且不是所有的用户都能立即识别出它们是在应用中导航的一种方式。
创建内嵌和迷你按钮
默认情况下，jQuery Mobile 按钮跨越整个屏幕宽度。你可以在图 30-1 中看到默认按钮宽度的例子。在后面的例子中，我使用了布局网格来创建更小的按钮，但是我可以使用内嵌按钮来实现类似的效果，这些按钮的大小刚好能够容纳它们的内容，并且是通过将data-inline属性设置为true来创建的。
我还可以通过将data-mini属性设置为true来创建迷你按钮。迷你按钮有标准的宽度，但是占据更少的垂直空间。最后，你可以结合这两种数据属性来创建内嵌的迷你按钮，它们的宽度刚好能容纳它们的内容和比普通按钮占据更少的垂直空间。清单 30-6 显示了所有三种类型的按钮。
清单 30-6 。使用内嵌和迷你按钮
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<button data-icon="home" data-inline="true">Home</button>
<button data-icon="home" data-mini="true">Home</button>
<button data-icon="home" data-inline="true" data-mini="true">Home</button>
</div>
</div>
</body>
</html>
你可以在图 30-6 中看到效果。
图 30-6 。使用内嵌和迷你按钮
使用按钮方法
按钮部件定义了三种方法，我已经在表 30-4 中描述过了。
表 30-4 。按钮方法
| 方法 | 描述 |
|---|---|
button("disable") | 禁用按钮，使其不能被点击。 |
button("enable") | 启用按钮，以便可以单击它。 |
button("refresh") | 刷新小部件以反映基础 HTML 元素中的更改。 |
enable和disable方法不言而喻。当底层button或input元素的内容改变时，需要refresh方法，如清单 30-7 中的所示。
清单 30-7 。更新按钮部件的内容
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).bind("pageinit", function () {
var counter = 0;
setInterval(function () {
var msg = "Counter " + counter++;
$("#buttonElem").text(msg).button("refresh");
$("#inputElem").val(msg).button("refresh");
$("#divElem span.ui-btn-text").text(msg);
}, 1000);
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<button id="buttonElem">Button</button>
<input id="inputElem" type="button" value="Input" />
<div id="divElem" data-role="button">Div</div>
</div>
</div>
</body>
</html>
本例中有三个按钮小部件，分别由一个button元素、一个input元素和一个div元素创建。script元素通过调用setInterval函数每秒更新支撑按钮部件的元素内容来处理pageinit事件(我在第二十九章中描述过)。
我必须为button和input元素调用refresh方法；否则，我对元素所做的更改将不会反映在按钮小部件中:
...
$("#buttonElem").text(msg).button("refresh");
$("#inputElem").val(msg).button("refresh");
...
当您从其他元素(如div元素)创建按钮小部件时，需要一种不同的方法。在这种情况下，jQuery Mobile 添加内容元素，这样它就可以应用 CSS 样式来调整小部件的形状，更改元素的内容会影响小部件的形状。相反，您需要查看 jQuery Mobile 在元素内部生成的 HTML，并定位文本内容。我的示例中的div元素由span元素填充，我可以通过定位属于ui-btn-text类的元素来更改文本内容，如下所示:
...
$("#divElem span.ui-btn-text").text(msg);
...
提示我通过使用浏览器 F12 工具来浏览 jQuery Mobile 在增强过程中生成的内容，从而找到了这个元素。
使用按钮事件
按钮小部件定义了标准的create事件，该事件在小部件被创建时被触发，但是支撑小部件的小部件仍然会触发它们自己的事件，这将由我在第二十九章中描述的 jQuery Mobile 事件来补充。这意味着您可以为tap事件创建处理程序，例如，当按钮被点击时接收通知，如清单 30-8 所示。
提示不要忘记事件可以对某些元素有一个默认动作——例如，这意味着从
input元素创建的按钮部件将提交它们所属的表单。jQuery 事件处理详见第二十八章。
清单 30-8 。处理按钮事件
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).bind("pageinit", function () {
$("button").tap(function (e) {
$(this).text("Tapped!").button("refresh");
});
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<button>Button</button>
</div>
</div>
</body>
</html>
在这个清单中，我使用tap方法为按钮上的tap事件注册一个处理函数。当单击button时，我通过更改按钮文本并调用refresh方法来更新小部件内容来处理事件。
使用 jQuery Mobile 导航栏
导航栏是在页眉或页脚中提供导航支持的一组按钮，允许用户浏览一组内容页面。导航条非常简单，但是当你有一组相关的页面要显示，并且你需要给用户一个清晰的信号，告诉他们当前显示的是哪个页面的时候，导航条是一个非常有用的工具。导航条是使用特定的元素结构创建的，你可以在清单 30-9 中看到。
清单 30-9 。创建一个导航条
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>Jacqui's Shop</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1"
class="ui-btn-active ui-state-persist">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
</div>
</div>
<div data-role="content">This is page 1</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
<h1>Jacqui's Shop</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2"
class="ui-btn-active ui-state-persist">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
</div>
</div>
<div data-role="content">This is page 2</div>
</div>
<div id="page3" data-role="page">
<div data-role="header">
<h1>Jacqui's Shop</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3"
class="ui-btn-active ui-state-persist">Page 3</a></li>
</ul>
</div>
</div>
<div data-role="content">This is page 3</div>
</div>
</body>
</html>
导航条由一个div元素定义，该元素的data-role属性被设置为navbar。导航栏中的各个按钮被定义为包含在li元素中的a元素，而ul元素又包含在a元素中。在清单中，我使用了 Navbar 最常见的形式，它在多个 jQuery Mobile 页面中重复出现，为用户提供一致的引用，如图 30-7 所示。
图 30-7 。导航栏小部件
NavBar 小部件在导航按钮之间平均分配可用的屏幕空间，单击其中一个按钮会显示由底层a元素的href属性标识的页面。
有两个 CSS 类必须应用于a元素，以向用户指示页面正在显示。ui-btn-active类将按钮标记为活动状态，而ui-state-persist类确保在用户导航回之前显示的页面时显示活动状态。
配置 jQuery Mobile 导航栏
导航条只支持一个数据属性/配置选项，我已经在表 30-5 中描述过了。
表 30-5 。导航栏的数据属性和配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-iconpos | iconpos | 指定图标在导航栏按钮中的位置。支持的位置有left、right、top(默认)和bottom。你也可以使用notext值来显示一个没有任何文本的图标。 |
我在本章前面列出了 jQuery Mobile 图标。使用data-icon属性将单个图标应用于a元素，您可以看到我是如何在清单 30-10 中定位带有data-iconpos属性的图标的。
清单 30-10 。在导航条中定位图标
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>Jacqui's Shop</h1>
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#page1" data-icon="alert"
class="ui-btn-active ui-state-persist">Page 1</a></li>
<li><a href="#page2" data-icon="info">Page 2</a></li>
<li><a href="#page3" data-icon="gear">Page 3</a></li>
</ul>
</div>
</div>
<div data-role="content">This is page 1</div>
</div>
</body>
</html>
你可以在图 30-8 中看到图标的效果。
图 30-8 。在导航栏中添加和定位图标
使用导航栏方法&事件
NavBar 小部件没有定义任何方法，仅支持create事件，该事件在小部件被实例化时触发。
提示处理来自
a元素的事件以响应用户导航。
使用可折叠的内容块
jQuery Mobile 支持创建可折叠的内容块，这些内容块是带有标题的内容部分，可以被关闭，这样只有标题是可用的。这类似于 jQuery UI 手风琴的单个面板，我在第十九章中描述过。
创建可折叠块
为了给 jQuery Mobile 提供它需要的元素，可折叠块有一个特定的结构。清单 30-11 包含了一个例子。
清单 30-11 。创建单个可折叠块
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<div data-role="collapsible">
<h1>New Delivery Service</h1>
<p>We are pleased to announce that we are starting a home delivery
service for your flower needs. We will deliver within a 20 mile radius
of the store for free and $1/mile thereafter.</p>
</div>
</div>
</div>
</body>
</html>
您要做的第一件事是创建一个div元素，并应用值为collapsible的data-role属性。这告诉 jQuery Mobile 您想要一个可折叠的块，它应该寻找一个 header 元素作为div的第一个子元素。您可以使用任何标题元素，h1到h6。我使用了一个h1元素，但是 jQuery Mobile 对这种小部件的所有标题一视同仁。div的其余子元素用作可折叠元素的内容，产生如图 30-9 所示的效果。
图 30-9 。展开可折叠块
第一次显示时，该块是折叠的，这意味着内容是隐藏的，只能看到标题。作为对用户的提示，在标题区域的左边缘绘制了一个加号图标(其样式与非内联按钮相同)。单击标题会显示内容并将图标替换为减号，表示该块可以再次折叠。
配置 jQuery Mobile 可折叠内容块
jQuery Mobile 定义了表 30-6 中所示的数据属性和配置设置。
表 30-6 。可折叠块的数据属性和配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-collapsed | collapsed | 当true为默认值时，块显示为折叠状态(即，用户只能看到标题)。值false意味着块被展开显示。 |
data-collapsed-icon | collapsedIcon | 指定块折叠时显示的图标。 |
data-content-theme | contentTheme | 指定可折叠块内容区域的主题。 |
data-corners | corners | 当true时，可折叠块用圆角绘制。值false产生方形角。 |
data-expanded-icon | expandedIcon | 指定块展开时显示的图标。 |
data-iconpos | iconPos | 指定图标在标题中的位置，使用与导航条和按钮部件相同的值。 |
data-inset | inset | 当设置为false时，标题将填充窗口，没有任何填充。默认为true。 |
data-mini | mini | 设置为true时，标题以紧凑形式绘制。 |
在清单 30-12 中，你可以看到我是如何将一些数据属性应用到这个例子中的。
清单 30-12 。配置可折叠块小部件
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<div data-role="collapsible" data-content-theme="e" data-collapsed="false"
data-inset="false" data-iconpos="top">
<h1>New Delivery Service</h1>
<p>We are pleased to announce that we are starting a home delivery
service for your flower needs. We will deliver within a 20 mile radius
of the store for free and $1/mile thereafter.</p>
</div>
</div>
</div>
</body>
</html>
我已经更改了data-content-theme、data-inset、data-iconpos和data-collapsed属性的值。你可以在图 30-10 中看到效果。
图 30-10 。配置可折叠块小部件
使用可折叠块方法
可折叠块小部件没有定义任何方法。
使用可折叠块事件
可折叠块微件定义了表 30-7 中所示的事件。
表 30-7 。可折叠块事件
| 事件 | 描述 |
|---|---|
create | 创建小部件时会触发此事件。 |
collapse | 当可折叠块折叠时触发。 |
expand | 当可折叠块展开时触发。 |
在清单 30-13 中，您可以看到我是如何处理collapse和expand事件来报告可折叠块的状态的。如果这看起来像是一个人为的例子，那是因为这些事件很少有用。
清单 30-13 。使用折叠和展开事件
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).bind("pageinit", function() {
$('#colBlock').bind("collapse expand", function(event) {
$('#status').text(event.type == "expand" ? "Expanded" : "Collapsed");
})
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
The block is <b><span id="status">Expanded</span></b>
<div id="colBlock" data-role="collapsible" data-content-theme="e"
data-collapsed=false>
<h1>New Delivery Service</h1>
<p>We are pleased to announce that we are starting a home
delivery service for your flower needs. We will deliver within a
20 mile radius of the store for free and $1/mile thereafter.</p>
</div>
</div>
</div>
</body>
</html>
在这个例子中，我使用了bind方法来监听expand和collapse事件。我在对bind方法的一次调用中通过列出我感兴趣的事件来做到这一点，用空格分隔。当其中一个事件被触发时，我更新一个span元素的内容来反映可折叠块的状态。在图 30-11 中可以看到状态的变化。
图 30-11 。响应展开和折叠事件
使用 jQuery Mobile 可折叠集(折叠)
可折叠的 set widget 组合多个可折叠的块来创建一个手风琴。可折叠集合是通过使用将两个或更多可折叠块包装在单个父元素中的div元素，并将data-role属性应用于值为collapsible-set的div元素来定义的。你可以在清单 30-14 中看到这是如何做到的。
清单 30-14 。创建 jQuery Mobile 手风琴
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set" data-content-theme="e">
<div data-role="collapsible">
<h1>New Delivery Service</h1>
<p>We are pleased to announce that we are starting a home
delivery service for your flower needs. We will deliver within a
20 mile radius of the store for free and $1/mile thereafter.</p>
</div>
<div data-role="collapsible" data-collapsed=false>
<h1>Summer Specials</h1>
<p>We have a wide range of special summer offers.
Ask instore for details</p>
</div>
<div data-role="collapsible">
<h1>Bulk Orders</h1>
<p>We offer discounts for large orders. Ask us for prices</p>
</div>
</div>
</div>
</div>
</body>
</html>
在这个例子中，我用data-role属性的collapsible-set值定义了一个div元素，它包含三个可折叠块。
提示注意，我将
data-content-theme属性应用于外部容器。这与在每个单独的可折叠块上使用属性具有相同的效果。
默认情况下，所有可折叠的块最初都是折叠的，所以我将data-collapsed属性应用于其中一个值为false的块，以便它在页面第一次显示时展开。当用户点击标题时，当前展开的元素被折叠。你可以在图 30-12 中看到效果。
图 30-12 。在 jQuery Mobile 手风琴中展开块
配置可折叠集合
可折叠集支持与可折叠块小部件相同的一组数据属性和设置。
使用可折叠设置方法
可折叠设置小部件支持一种方法，如表 30-8 所述。
表 30-8 。可折叠集合方法
| 方法 | 描述 |
|---|---|
collapsibleset("refresh") | 刷新小部件以反映基础 HTML 元素中的更改。 |
使用可折叠设置事件
可折叠的 set 小部件只定义了create事件，该事件在小部件应用于 HTML 元素时被触发。
摘要
在这一章中，我描述了更多的 jQuery Mobile 小部件:按钮、可折叠块和小部件，它们提供了相同主题的变体——导航条和可折叠集合。在第三十一章中，我向您展示了 jQuery Mobile 表单小部件。
三十一、使用 jQuery Mobile 表单
当在移动设备上呈现表单时，存在特别的困难。开始时屏幕空间很小，您需要为用户提供易于触摸操作的表单元素，而不需要创建需要无休止滚动才能完成的页面。在这一章中，我将向您展示 jQuery Mobile 如何增强表单元素，使它们与其他小部件保持一致，并且可以很容易地在触摸屏上使用。
jQuery Mobile 在页面加载时会自动完成大量工作。表单元素在没有您干预的情况下得到增强，并且在提交表单时自动使用 Ajax，以便 jQuery Mobile 可以平稳地转换到服务器返回的结果。
我建议在为移动设备创建表单时仔细考虑。就其本质而言，表单旨在收集用户的输入，但这在移动设备上可能是一个乏味的过程，尤其是在输入时。此外，当用户不主动滚动页面时，一些移动设备不会显示滚动条。这意味着用户并不总是意识到有表单元素就在即时显示之外。要为用户创造最佳体验，您需要遵循一些基本准则:
- 需要尽可能少的打字。在可能的情况下，使用允许用户进行简单触摸选择的替代部件，比如复选框或单选按钮。这可能会缩小用户可以输入的范围，但可能会增加愿意完成表单的用户数量。
- 使用页面间导航来显示表单的各个部分。这给用户一个清晰的进度指示，不需要他们推测性地滚动来查看是否遗漏了什么。
- 删除任何不需要的表单元素。移动表单应该尽可能精简，这意味着从移动用户那里接受的数据要比从桌面用户那里接受的少。
表 31-1 对本章进行了总结。
表 31-1 。章节总结
| 问题 | 解决办法 | 列表 |
|---|---|---|
| 为表单元素创建小部件。 | 不需要特定的操作——jQuery Mobile 会自动应用小部件。 | one |
| 添加一个按钮来清除 input 元素的内容，或者更改 input 元素的小部件的显示方式。 | 使用data-clear-btn和data-mini属性。 | Two |
| 启用或禁用输入元素。 | 使用enable和disable方法。 | three |
| 创建一个滑块小部件。 | 定义一个类型属性为range的input元素。 | four |
| 创建一个范围滑块小部件。 | 在一个div元素中定义一对input元素，该元素的data-role属性被设置为rangeslider。 | five |
| 配置滑块的外观。 | 使用data-highlight、data-mini和data-track-theme属性。 | 6, 7 |
更新范围滑块以反映底层input元素的变化。 | 使用refresh方法。 | eight |
| 使用滑块小工具时接收通知。 | 处理start、stop和normalize事件。 | 9, 10 |
为一个select元素创建一个小部件。 | 不需要特定的操作。 | Eleven |
配置为select元素显示的按钮。 | 使用数据角、data-icon、data-iconpos和data-mini属性。 | Twelve |
配置允许用户为select元素选择值的弹出窗口。 | 使用data-native-menu、data-overlay-theme和data-divider-theme属性。 | Thirteen |
向select菜单添加占位符。 | 将select元素包含的option元素之一的data-placeholder属性设置为true。 | Fourteen |
| 以编程方式控制 selectmenu 小工具。 | 使用open、close、disable、enable和refresh方法。 | Fifteen |
| 创建翻转开关小部件。 | 定义一个包含两个option元素并且将data-role属性设置为slider的select元素。 | Sixteen |
| 创建复选框和单选按钮小部件。 | 不需要特定的操作。 | 17–20 |
创建表单元素小部件
jQuery Mobile 使用自动增强功能在加载 HTML 页面时为表单元素创建小部件，就像我在前面章节中描述的小部件一样。清单 31-1 展示了一个 jQuery Mobile 页面，其中包含一个form元素和一些与表单相关的子元素。
清单 31-1 。jQuery Mobile 页面中的简单表单
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
#buttonContainer {text-align: center}
div[data-role=fieldcontain] { padding: 0 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="name">Name: </label>
<input id="name">
</div>
<div data-role="fieldcontain">
<label for="address">Address: </label>
<textarea id="address"></textarea>
</div>
<div id="buttonContainer">
<input type="submit" data-inline="true" value="Submit"/>
</div>
</form>
</div>
</body>
</html>
这是一个简单的表单，但是它为 jQuery Mobile 如何处理整个表单奠定了基础。有两个表单元素:一个文本input 和一个textarea ，每个元素都与一个label元素成对出现。您可以在图 31-1 中看到结果，这是我使用 BrowserStack 服务创建的，因为 Opera Mobile 模拟器没有正确实现 jQuery Mobile 依赖于表单元素的一个特性，我将在下一节解释这个特性。
图 31-1 。jQuery Mobile 显示的简单表单
提示注意，我已经使用 CSS 为包含表单元素的
div元素设置了padding属性。如果没有这个设置，jQuery Mobile 将会沿着窗口的左右边缘绘制标签和表单元素。
当表单元素中包含类型为submit的input元素时，jQuery Mobile 将自动提交表单。默认情况下，表单将使用 Ajax 提交，但是可以通过将值为false的data-ajax属性应用到form元素来禁用这种行为。
在最后一个例子中，每个表单元素及其label都被包装在一个div元素中。我将div元素的data-role设置为fieldcontain，这告诉 jQuery Mobile 我希望label和表单元素显示在一行中，你可以在图 31-1 中看到效果。
jQuery Mobile 应用于对齐标签和表单元素的样式仅在屏幕宽度至少为 450 像素时使用。在该宽度值之下，label和input / textarea元素显示在不同的行上，如图 31-2 中的所示。Opera Mobile Emulator 总是报告其屏幕宽度小于 450 像素，这就是为什么我不得不使用不同的浏览器来生成这些示例的图形。(这只是模拟器的问题——真正的 Opera 移动浏览器正确实现了该功能。)
图 31-2 。纵向显示表单
使用 Textinput 小工具
jQuery Mobile 对它支持的每个表单元素使用不同的小部件，我描述的第一个小部件是用于textarea元素和input元素的文本输入小部件。这是上一个示例中使用的小部件。
配置 文本输入小部件
textinput 小部件定义了表 31-2 中描述的属性和设置特性。通过textinput方法应用设置。
表 31-2 。TextInput 小工具的属性 和配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-clear-btn | clearBtn | 当设置为true时，微件显示有一个清除内容的按钮。默认为false。 |
data-clearn-btn-text | clearBtnText | 为辅助功能软件设置清除按钮的文本。 |
data-mini | mini | 当设置为true时，创建小版本的微件。默认为false。 |
data-prevent-focus-zoom | preventFocusZoom | 当设置为true时，当小工具具有焦点时，浏览器被阻止缩放。 |
在清单 31-2 中，您可以看到我是如何应用data-clear-btn和data-mini属性来配置input元素上的 textinput 小部件的。
清单 31-2 。配置 Textinput 部件
...
<form method="get">
<div data-role="fieldcontain">
<label for="name">Name: </label>
<input id="name" data-clear-btn="true" data-mini="true">
</div>
<div data-role="fieldcontain">
<label for="address">Address: </label>
<textarea id="address"></textarea>
</div>
<div id="buttonContainer">
<input type="submit" data-inline="true" value="Submit"/>
</div>
</form>
...
你可以在图 31-3 中看到结果。直到用户开始在input元素中输入文本，清除按钮才会显示，点击该按钮会删除任何已经输入的内容。如果您使用 clear 按钮特性，那么一定要对所有的input元素保持一致。
图 31-3 。配置 textinput 部件
使用 Textinput 小部件方法
textinput 小部件定义了表 31-3 中所示的两种方法。
表 31-3 。文本输入方法
| 方法 | 描述 |
|---|---|
textinput("disable") | 禁用小部件，防止用户输入或编辑内容。 |
textinput("enable") | 启用小部件，允许输入或编辑内容。 |
在清单 31-3 中，我使用了两种方法来改变一个input元素的状态。
清单 31-3 。使用 Textwidget 方法
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).bind("pageinit", function () {
$("button").tap(function (e) {
$("#name").textinput(e.target.id);
e.preventDefault();
});
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
#buttonContainer {text-align: center}
div[data-role=fieldcontain] { padding: 0 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="name">Name: </label>
<input id="name" data-clear-btn="true" data-mini="true">
</div>
<div id="buttonContainer">
<button id="enable">Enable</button>
<button id="disable">Disable</button>
</div>
</form>
</div>
</body>
</html>
我添加了按钮来改变input元素的状态，你可以看到一个被禁用的元素是如何出现在图 31-4 中的。
图 31-4 。禁用 textinput widget
使用 Textinput 小部件事件
textinput小部件只定义了create事件，当小部件应用于一个元素时会触发该事件。
使用滑块和范围滑块部件
滑块小部件应用于input元素，其type属性设置为range。input元素的值用于设置标尺上滑块的初始位置，该位置由min和max属性的值定义。清单 31-4 显示了一个range input元素的简单例子。
清单 31-4 。使用滑块小部件
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
div[data-role=fieldcontain] { padding: 0 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="quantity">Quantity: </label>
<input id="quantity" type="range" value="10" min="1" max="20">
</div>
</form>
</div>
</body>
</html>
提示
type属性的range值是在 HTML5 中添加的，作为对input元素的更广泛增强的一部分。欲知详情，请参阅我的书《HTML5 权威指南》，这本书也是由 Apress 出版的。
我定义了一个类型属性设置为range的input元素，指定初始值为 10，取值范围为 1 到 20。在图 31-5 的中，你可以看到 jQuery Mobile 是如何用 slider 小部件增强这个元素的。
图 31-5 。使用滑块小部件
您还可以通过将两个input元素配对来创建一个范围滑块 ，允许用户在单个小部件中选择一个上限值和下限值。在清单 31-5 中，你可以看到我是如何创建一个范围滑块的。
清单 31-5 。使用范围滑块小部件
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
div[data-role=fieldcontain] { padding: 0 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<div data-role="rangeslider">
<label for="quantityLow">Quantity: </label>
<input id="quantityLow" type="range" value="10" min="1" max="20">
<input id="quantityHigh" type="range" value="15" min="1" max="20">
</div>
</div>
</form>
</div>
</body>
</html>
input元素包含在一个div元素中，该元素的data-role属性被设置为rangeslider。input元素的min和max值必须相同，并且value属性值用于设置用于选择范围的手柄的初始位置，如图图 31-6 所示。
图 31-6 。使用范围滑块小部件
提示范围滑块部件不会改变表单数据发送到服务器的方式。将为两个
input元素发送单独的值。
配置 滑块和范围滑块小部件
滑块和范围滑块部件支持相同的数据属性和配置设置，如表 31-4 所述。
表 31-4 。滑块和范围滑块部件的属性和配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-highlight | highlight | 当设置为true时，代表所选值的滑块轨道部分高亮显示。默认值为false。 |
data-mini | mini | 当设置为true时，微件以更紧凑的形式绘制。默认为false。 |
data-track-theme | trackTheme | 指定滑块轨道部分的主题。 |
提示设置选项时，使用
slider方法配置滑块控件，使用rangeslider方法配置范围滑块控件。
您已经在前面的小部件中看到了data-mini属性的效果，所以我在这里不再重复描述。我通常将data-highlight属性设置为true,因为我认为这使得滑块的目的——尤其是范围滑块——更加明显。在清单 31-6 中，您可以看到我是如何在范围滑块的div元素上设置属性的。
清单 31-6 。在范围滑块小部件上使用数据高亮属性
...
<form method="get">
<div data-role="fieldcontain">
<div data-role="rangeslider" data-highlight="false">
<label for="quantityLow">Quantity: </label>
<input id="quantityLow" type="range" value="10" min="1" max="20">
<input id="quantityHigh" type="range" value="15" min="1" max="20">
</div>
</div>
</form>
...
在图 31-7 中，您可以看到高亮显示启用和未启用的范围滑块。
图 31-7 。数据突出显示属性的效果
您可以通过将data-track-theme属性与全局可用的data-theme属性相结合来进一步强调滑块。data-theme属性影响滑块手柄，而data-track-theme影响滑块轨迹。在清单 31-7 中，我将前一个例子中的两个属性都应用到了范围滑块上。
清单 31-7 。为滑块手柄和轨道使用主题
...
<form method="get">
<div data-role="fieldcontain">
<div data-role="rangeslider" data-highlight="true"
data-theme="b" data-track-theme="a">
<label for="quantityLow">Quantity: </label>
<input id="quantityLow" type="range" value="10" min="1" max="20">
<input id="quantityHigh" type="range" value="15" min="1" max="20">
</div>
</div>
</form>
...
你可以在图 31-8 中看到主题的效果。
图 31-8 。将主题应用到范围滑块及其轨道
使用滑块和范围滑块方法
滑块和范围滑块部件定义了表 31-5 中所示的方法。
表 31-5 。滑块和范围滑块方法
| 滑块方法 | 范围滑块方法 | 描述 |
|---|---|---|
slider("disable") | rangeslider("disable") | 禁用小部件，防止用户更改滑块值。 |
slider("enable") | rangeslider("enable") | 启用小部件，允许用户更改滑块值。 |
slider("refresh") | rangeslider("refresh") | 更新小部件以反映底层 HTML 元素的变化。 |
refresh方法允许您更改底层input元素的属性值，并让这些更改反映在小部件中，如清单 31-8 所示。
清单 31-8 。使用刷新方法
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).bind("pageinit", function () {
$("button").tap(function (e) {
var currentMax = Number($("#quantityLow").attr("max"));
$("#quantityLow, #quantityHigh").attr("max", currentMax - 1);
$("#slider").rangeslider("refresh");
e.preventDefault();
});
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
div[data-role=fieldcontain] { padding: 0 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<div id="slider" data-role="rangeslider" data-highlight="true"
data-theme="b" data-track-theme="a">
<label for="quantityLow">Quantity: </label>
<input id="quantityLow" type="range" value="10" min="1" max="20">
<input id="quantityHigh" type="range" value="15" min="1" max="20">
</div>
<div id="buttonContainer">
<button>Change Range</button>
</div>
</div>
</form>
</div>
</body>
</html>
在这个例子中，我使用一个按钮来减少支撑滑块的input元素的max属性的值，并调用refresh方法，以便更新小部件来反映变化。
使用滑块事件
滑块和范围滑块小部件定义不同的事件集。在表 31-6 中，我已经描述了滑块控件可用的事件。
表 31-6 。滑块事件
| 事件 | 描述 |
|---|---|
create | 创建 slider 小工具时触发。 |
start | 在开始与滑块进行任何交互时触发，包括轻按小部件(以设定特定值)或拖动手柄时。 |
stop | 在与滑块的任何交互结束时触发。 |
在清单 31-9 的中，我使用了start和stop事件来更新span元素的内容。
清单 31-9 。使用滑块小部件事件
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).bind("pageinit", function () {
$("#quantity").slider({
start: function () {
$("#message").text("Sliding");
},
stop: function () {
$("#message").text(quantity.value);
}
});
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
div[data-role=fieldcontain] { padding: 0 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="quantity">Quantity: </label>
<input id="quantity" type="range" value="10" min="1" max="20">
</div>
Value: <span id="message">Ready</span>
</form>
</div>
</body>
</html>
当我接收到start事件时，我改变了span元素的内容，以指示滑块值正在改变。当我接收到stop事件时，我更新了span元素来显示已经被选中的值——注意，我是直接从input元素获取值的，而不是通过 slider 小部件。
使用范围滑块事件
在表 31-7 中，我已经描述了由范围滑块小部件定义的事件。
表 31-7 。范围滑块事件
| 事件 | 描述 |
|---|---|
create | 创建范围滑块小工具时触发。 |
normalize | 当小部件必须规范化input元素中的值时触发，这发生在用户拖动一个句柄经过另一个句柄时。 |
在我写这篇文章时，当使用rangeslider方法时，范围滑块小部件的事件处理工作不一致。相反，必须使用bind方法创建事件处理程序，您可以在清单 31-10 中看到它的使用。
清单 31-10 。使用范围滑块小部件事件
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).bind("pageinit", function () {
$("#slider").bind("rangeslidernormalize", function () {
alert("Normalized!");
});
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
div[data-role=fieldcontain] { padding: 0 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div id="slider" data-role="rangeslider" data-highlight="true"
data-theme="b" data-track-theme="a">
<label for="quantityLow">Quantity: </label>
<input id="quantityLow" type="range" value="10" min="1" max="20">
<input id="quantityHigh" type="range" value="15" min="1" max="20">
</div>
</form>
</div>
</body>
</html>
我必须使用名称rangeslidernormalize来接收事件，这是必须使用bind方法的产物。在这个例子中，当我得到normalize事件时，我调用了alert函数——尤其是因为我还没有发现这个事件在真实世界中有用的情况。
使用选择菜单小部件
jQuery Mobile 为您提供了两种处理select元素的方法。第一种是使用 selectmenu 小部件，它为用户提供了一个带有下拉按钮的 select 元素的风格化版本。selectmenu 小部件是应用于选择元素 的默认小部件，如清单 31-11 中的所示。
清单 31-11 。包含选择元素的页面
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
#buttonContainer {text-align: center}
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="name">Name: </label>
<input id="name" placeholder="Your Name">
</div>
<div data-role="fieldcontain">
<label for="speed"><span>Speed: </span></label>
<select id="speed" name="speed">
<option value="vfast">Very Fast</option>
<option value="fast">Fast</option>
<option value="normal" selected>Normal</option>
<option value="slow">Slow</option>
</select>
</div>
<div id="buttonContainer">
<input type="submit" data-inline="true" value="Submit"/>
</div>
</form>
</div>
</body>
</html>
你可以在图 31-9 中看到 jQuery Mobile 是如何增强select元素的。Opera Mobile Emulator 不能正确显示 selectmenu 小部件，所以我使用 BrowserStack 获得了截图。
图 31-9 。jQuery Mobile 增强的 select 元素
配置 选择菜单小工具
selectmenu 小部件定义数据属性和配置设置，如表 31-8 所示。通过selectmenu方法应用配置选项。selectmenu 小部件的配置可以分为两个部分:配置大多数时间显示的按钮，以及配置允许用户进行选择的弹出窗口。我将在接下来的小节中描述这两个配置领域。
表 31-8 。Selectmenu 小工具的属性和配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-corners | corners | 指定显示选项列表的按钮是否用圆角绘制。默认值为true。 |
data-divider-theme | dividerTheme | 指定当nativeMenu选项为false时用于optgroup元素的主题。 |
data-icon | icon | 指定将在小工具按钮上显示的图标。 |
data-iconpos | iconPos | 指定图标在小工具按钮上的位置。 |
data-inline | inline | 指定小工具将以紧凑样式绘制。 |
data-mini | mini | 指定小工具将以较小的样式绘制。 |
data-native-menu | nativeMenu | 指定是否将使用本机 selectmenu。默认为true。 |
data-overlay-theme | overlayTheme | 指定当nativeMenu选项设置为false时用于select菜单弹出的主题。 |
配置选择菜单按钮
selectmenu 小部件用一个按钮替换了标准的 select 元素，该按钮与 jQuery Mobile 主题的其余部分相匹配。您可以使用data-corners、data-icon、data-iconpos、data-inline和data-mini属性或其对应的配置属性来配置按钮的显示方式。我已经在前面的章节中描述了所有这些配置选项，所以我不打算深入讨论它们，但是在清单 31-12 中你可以看到我是如何应用一些属性来改变按钮的显示方式的。
清单 31-12 。配置选择菜单按钮
...
<div data-role="fieldcontain">
<label for="speed"><span>Speed: </span></label>
<select id="speed" name="speed"
data-iconpos="left" data-icon="gear" data-mini="true">
<option value="vfast">Very Fast</option>
<option value="fast">Fast</option>
<option value="normal" selected>Normal</option>
<option value="slow">Slow</option>
</select>
</div>
...
我已经改变了显示的图标，把它移到了按钮的左边，属性为data-icon和data-iconpos，属性为data-mini指定了一个较小的按钮大小。你可以在图 31-10 中看到这些变化的效果。
图 31-10 。配置选择菜单小部件按钮
配置弹出的选择菜单
默认情况下，当用户单击按钮进行选择时，selectmenu 小部件将显示本机浏览器菜单。这是一个明智的想法，因为它让用户能够访问浏览器提供的任何优化，以利用设备的功能。在图 31-11 中，你可以看到 iOS、Android 和 Opera 浏览器的本地菜单，当用户点击 selectmenu 小部件按钮时，这些菜单默认显示。
图 31-11 。本地选择菜单
通过将data-native-menu属性设置为false，可以禁用原生菜单，并让 selectmenu 小部件显示一个与 jQuery Mobile 主题的其余部分相匹配的菜单。这使得用户无法从本机增强中获益，但却具有提供一致性的优势。在的清单 31-13 中，你可以看到我是如何使用data-native-menu来禁用本地菜单和data-overlay-theme属性来设置弹出窗口的主题的。
清单 31-13 。配置选择菜单弹出菜单
...
<div data-role="fieldcontain">
<label for="speed"><span>Speed: </span></label>
<select id="speed" name="speed" data-native-menu="false" data-overlay-theme="e">
<option value="vfast">Very Fast</option>
<option value="fast">Fast</option>
<option value="normal" selected>Normal</option>
<option value="slow">Slow</option>
</select>
</div>
...
你可以在图 31-12 中看到这些变化的效果。
图 31-12 。禁用本地选择菜单
指定占位符
通过将data-placeholder属性的值设置为true，可以将option元素用作select元素的占位符。当select元素最初显示但不在用户选择的选项列表中时，会显示占位符。清单 31-14 展示了data-placeholder属性的使用。
清单 31-14 。使用数据占位符属性
...
<div data-role="fieldcontain">
<label for="speed"><span>Speed: </span></label>
<select id="speed" name="speed" data-native-menu="false" data-overlay-theme="e">
<option value="placeholder" data-placeholder="true">Select a Speed</option>
<option value="vfast">Very Fast</option>
<option value="fast">Fast</option>
<option value="normal">Normal</option>
<option value="slow">Slow</option>
</select>
</div>
...
你可以在图 31-13 中看到效果。我通常喜欢在select菜单中使用占位符，但这是一种特别有用的技术，可以在纵向布局中隐藏label元素时为用户提供上下文。
图 31-13 。指定占位符元素
使用 Selectmenu 方法
selectmenu 小部件定义了表 31-9 中所示的方法。
表 31-9 。selectmenu 小工具的方法
| 方法 | 描述 |
|---|---|
selectmenu("open") | 打开 selectmenu 小部件以显示弹出窗口。 |
selectmenu("close") | 关闭弹出窗口。 |
selectmenu("disable") | 禁用小部件，以便无法选择值。 |
selectmenu("enable") | 启用小部件，以便可以选择值。 |
selectmenu("refresh") | 刷新小部件以合并底层select元素中的更改。 |
清单 31-15 显示了如何使用按钮来控制选择菜单。
清单 31-15 。以编程方式控制 Selectmenu
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).bind("pageinit", function () {
$("button").bind("tap", function (e) {
e.preventDefault();
if (this.id == "open") {
$("#speed").selectmenu("open");
setTimeout(function () {
$("#speed").selectmenu("close")
}, 3000);
} else {
$("#speed").selectmenu(this.id)
}
});
})
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
[data-role=fieldcontain], .ui-grid-b { margin: 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div class="ui-grid-b">
<div class="ui-block-a">
<button id="open">Open</button>
</div>
<div class="ui-block-b">
<button id="enable">Enable</button>
</div>
<div class="ui-block-c">
<button id="disable">Disable</button>
</div>
</div>
<div data-role="fieldcontain">
<label for="speed"><span>Speed: </span></label>
<select id="speed" name="speed"
data-native-menu="false" data-overlay-theme="e">
<option value="placeholder"
data-placeholder="true">Select a Speed</option>
<option value="vfast">Very Fast</option>
<option value="fast">Fast</option>
<option value="normal">Normal</option>
<option value="slow">Slow</option>
</select>
</div>
</form>
</div>
</body>
</html>
我定义了三个按钮来调用open、enable和disable方法。当我调用open方法时，我也使用setTimeout函数在三秒后调用close方法。
使用选择菜单事件
selectmenu 小部件只定义了create事件，当小部件应用于底层元素时会触发该事件。
使用翻转开关
如果一个select元素只包含两个option元素，您可以选择创建一个翻转开关来代替常规的 selectmenu 小部件。您可以通过将data-role属性应用到值为slider的select元素来创建一个翻转开关，如清单 31-16 所示。
清单 31-16 。创建翻转开关
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
#buttonContainer {text-align: center}
[data-role=fieldcontain] { margin: 10px; text-align: center }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="speed"><span>Speed: </span></label>
<select id="speed" name="speed" data-role="slider">
<option value="fast">Fast</option>
<option value="slow">Slow</option>
</select>
</div> **<div data-role="fieldcontain">**
**<label for="size"><span>Size: </span></label>**
**<select id="size" name="size" data-role="slider">**
**<option value="large">Large</option>**
**<option value="small" selected>Small</option>**
**</select>**
**</div>**
`<div id="buttonContainer">`
`<input type="submit" data-inline="true" value="Submit"/>`
`</div>`
`</form>`
`</div>`
`</body>`
`</html>`
`本例中有两个翻转开关。你可以在图 31-14 中看到它们是如何在浏览器中显示的。用户可以通过点击或点击暴露的值，或者通过将滑块拖动到位来更改设置。
图 31-14 。使用翻转开关
使用复选框单选小部件
checkboxradio 小部件自动应用于type属性被设置为checkbox或radio的input元素。
创建复选框
创建复选框最简单的方法是定义一个类型为checkbox的input元素，后跟一个label元素，如清单 31-17 所示。
清单 31-17 。创建简单的复选框
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
#buttonContainer {text-align: center}
form { margin: 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="name">Name: </label>
<input id="name" placeholder="Your Name">
</div>
<input type="checkbox" name="check" id="check"/>
<label for="check">I agree</label>
<div id="buttonContainer">
<input type="submit" data-inline="true" value="Submit"/>
</div>
</form>
</div>
</body>
</html>
你可以在图 31-15 的中看到这个复选框。我在图中显示了复选框的选中和未选中状态。
图 31-15 。jQuery Mobile 复选框
将标签应用到复选框中
默认情况下，复选框跨越其父元素的整个宽度，这意味着在这种情况下，复选框是屏幕的整个宽度。如果你想让复选框适合布局，使它匹配它上面的 textinput 小部件，你需要使用一个特殊的元素结构，如清单 31-18 所示。
清单 31-18 。更改复选框的布局
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
#buttonContainer {text-align: center}
form { margin: 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="name">Name: </label>
<input id="name" placeholder="Your Name">
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Terms&Conditions:</legend>
<input type="checkbox" name="check" id="check"/>
<label for="check">I agree</label>
</fieldset>
</div>
<div id="buttonContainer">
<input type="submit" data-inline="true" value="Submit"/>
</div>
</form>
</div>
</body>
</html>
现在应该对外层元素很熟悉了——一个属性设置为fieldcontain的div元素。jQuery Mobile 面临的问题是，已经有一个label元素与input元素相关联，因此您必须采用一个替代路径来为 jQuery Mobile 提供它需要的信息。您可以通过添加一个fieldset元素(其data-role被设置为controlgroup)并在input之前添加一个legend元素(包含您想要显示的文本)来实现这一点。你可以在图 31-16 中看到效果。
图 31-16 。更改复选框的布局
分组 复选框
您可以使用一个带有controlgroup的data-role的fieldset元素将多个复选框组合在一起。清单 31-19 包含了一个演示。
清单 31-19 。将复选框分组在一起
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
#buttonContainer {text-align: center}
form { margin: 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="name">Name: </label>
<input id="name" placeholder="Your Name">
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose Your Flowers:</legend>
<input type="checkbox" name="roses" id="roses"/>
<label for="roses">Roses</label>
<input type="checkbox" name="orchids" id="orchids"/>
<label for="orchids">Orchids</label>
<input type="checkbox" name="asters" id="asters"/>
<label for="asters">Asters</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font:</legend>
<input type="checkbox" name="bold" id="bold"/>
<label for="bold"><b>b</b></label>
<input type="checkbox" name="italic" id="italic"/>
<label for="italic"><em>i</em></label>
<input type="checkbox" name="underline" id="underline"/>
<label for="underline"><u>u</u></label>
</fieldset>
</div>
<div id="buttonContainer">
<input type="submit" data-inline="true" value="Submit"/>
</div>
</form>
</div>
</body>
</html>
本例中有两组复选框。第一组是垂直布局，这是默认方向。jQuery Mobile 改变了小部件的样式，使得各个input元素之间没有空格，只有块的外部拐角是圆形的。对于第二组，我将data-type属性设置为horizontal，这将改变布局的方向并使 jQuery Mobile 隐藏复选框，从而创建一组可以开关的按钮。你可以在图 31-17 中看到结果。
图 31-17 。分组复选框
创建和格式化单选按钮
创建单选按钮并对其进行格式化的方式与格式化复选框的方式非常相似。清单 31-20 包含了一个例子。
清单 31-20 。创建一组单选按钮
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
#buttonContainer {text-align: center}
form { margin: 10px; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<form method="get">
<div data-role="fieldcontain">
<label for="name">Name: </label>
<input id="name" placeholder="Your Name">
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose Your Flowers:</legend>
<input type="radio" name="flowers" id="roses"/>
<label for="roses">Roses</label>
<input type="radio" name="flowers" id="orchids"/>
<label for="orchids">Orchids</label>
<input type="radio" name="flowers" id="asters"/>
<label for="asters">Asters</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose Your Flowers:</legend>
<input type="radio" name="flowers" id="roses"/>
<label for="roses">Roses</label>
<input type="radio" name="flowers" id="orchids"/>
<label for="orchids">Orchids</label>
<input type="radio" name="flowers" id="asters"/>
<label for="asters">Asters</label>
</fieldset>
</div>
<div id="buttonContainer">
<input type="submit" data-inline="true" value="Submit"/>
</div>
</form>
</div>
</body>
</html>
我再次创建了水平和垂直组，你可以在图 31-18 中看到它们是如何在浏览器中显示的。
图 31-18 。创建单选按钮组
配置 复选框单选小部件
checkboxradio 小部件只支持一个配置选项，我已经在表 31-10 中描述过了。
表 31-10 。checkboxradio 小部件的属性和配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-mini | mini | 当设置为true时，微件以紧凑形式创建。 |
使用复选框单选方法
checkboxradio 小部件定义了表 31-11 中所示的方法。
表 31-11 。checkboxradio 小部件的方法
| 方法 | 描述 |
|---|---|
checkboxradio("disable") | 禁用小部件，以便无法选择值。 |
checkboxradio("enable") | 启用小部件，以便可以选择值。 |
checkboxradio("refresh") | 刷新小部件以合并基础元素中的更改。 |
使用复选框单选事件
checkboxradio 小部件只定义了create事件，该事件在小部件应用于底层元素时被触发。
摘要
在这一章中，我展示了 jQuery Mobile 如何增强表单元素,使它们与更广泛的触控样式保持一致。您不需要采取任何特殊的操作来提交表单，这是使用 Ajax 自动完成的，因此 jQuery Mobile 可以平稳地管理到服务器返回的页面的转换。您可以依靠 jQuery Mobile 来自动增强表单元素，但是有一些很好的理由来应用一些额外的元素和data-role属性，尤其是在处理select元素的时候。在第三十二章中，我继续描述 jQuery Mobile 小部件，转向 listview 和 panel 小部件。`
三十二、使用列表和面板
在这一章中，我描述了 jQuery Mobile 列表和面板小部件。列表是构建移动 web 应用的一个重要工具，它们通常为 web 应用的不同功能区域提供简单而明显的导航。列表的美妙之处在于它们很紧凑，即使单个列表项大到可以通过触摸来选择。它们也非常容易被用户理解。只需在列表项的右边缘放置一个箭头图标(jQuery Mobile 默认这样做),就可以让大多数用户明白选择该项将导致某种选择或导航的发生。
面板是一个通用的小部件，它将内容带入窗口左侧或右侧的上下文中。面板可用于显示任何内容，但最常用于整个应用中持久的设置或导航功能。表 32-1 对本章进行了总结。
表 32-1 。章节总结
| 问题 | 解决办法 | 列表 |
|---|---|---|
| 创建一个列表。 | 定义一个包含一个或多个li元素并且将data-role属性设置为listview的ul或ol元素。li元素的内容应该是链接。 | one |
| 创建插入列表。 | 将data-inset属性设置为true。 | Two |
| 创建一个列表，其项目由两个不同的部分组成。 | 向每个li元素添加第二个链接。 | three |
| 允许用户过滤列表内容。 | 将data-filter属性设置为true。 | 4, 5 |
| 在列表中添加分隔线。 | 在单个li元素上将data-role属性设置为list-divider。 | six |
| 向列表项添加计数气泡。 | 使用ui-li-count类。 | seven |
| 使用不同的文本强调。 | 使用h1 - h6和p元素。 | eight |
| 向列表项添加旁白。 | 使用ui-li-aside类。 | nine |
| 创建一个面板。 | 将面板相关页面中包含的div元素的data-role属性设置为panel。 | Ten |
| 设置面板的位置和显示样式。 | 使用data-display和data-position属性。 | Eleven |
| 指定如何解散面板。 | 使用data-swipe-close和data-dismissable属性。 | Twelve |
使用 ListView 部件
jQuery Mobile 通过 listview 小部件为处理列表提供了灵活的支持。清单 32-1 显示了一个链接到同一文档中的 jQuery Mobile 页面的基本列表。每个页面描述一种不同的花，列表为用户提供了导航到这些页面的机制。
清单 32-1 。基本列表
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
.lcontainer {float: left; text-align: center; padding-top: 10px}
.productData {float: right; padding: 10px; width: 60%}
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<ul data-role="listview">
<li><a href="#roses">Roses</a></li>
<li><a href="#orchids">Orchids</a></li>
<li><a href="#asters">Asters</a></li>
</ul>
</div>
<div id="roses" data-role="page" data-theme="b">
<div data-role="header">
<h1>Roses</h1>
</div>
<div>
<div class="lcontainer">
<img src="rose.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
A rose is a woody perennial within the family Rosaceae.
They form a group of erect shrubs, and climbing or trailing plants.
<div><b>Price: $4.99</b></div>
</div>
</div>
</div>
<div id="orchids" data-role="page" data-theme="b">
<div data-role="header">
<h1>Orchids</h1>
</div>
<div>
<div class="lcontainer">
<img src="orchid.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
The orchid family is a diverse and widespread family in the order
Asparagales. It is one of the largest families of flowering plants.
<div><b>Price: $10.99</b></div>
</div>
</div>
</div>
<div id="asters" data-role="page" data-theme="b">
<div data-role="header">
<h1>Asters</h1>
</div>
<div>
<div class="lcontainer">
<img src="aster.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
The name Aster comes from the Ancient Greek word meaning "star",
referring to the shape of the flower head.
<div><b>Price: $2.99</b></div>
</div>
</div>
</div>
</body>
</html>
本文档的大部分内容都用于描述花卉。实际的列表只有几个元素，如下所示:
...
<ul data-role="listview">
<li><a href="#roses">Roses</a></li>
<li><a href="#orchids">Orchids</a></li>
<li><a href="#asters">Asters</a></li>
</ul>
...
提示我在这个例子中使用了
ul元素，但是 jQuery Mobile 以同样的方式处理编号列表(用ol元素创建)。
这是一个标准的 HTML 无编号列表，使用ul元素表示，其中包含三个li元素。为了应用 listview 小部件，我将ul元素上的data-role属性设置为listview。
列表小部件的基本用途是提供导航，为此，每个li元素的内容是一个a元素，它链接到文档中的其他页面。单击或轻触单个列表项会将用户带到相应的页面。您可以在图 32-1 中看到 listview 小部件和其中一个内容页面。我在每个内容页面上添加了一个基于链接的按钮，使用标准转换(但方向相反)将用户带回列表。
图 32-1 。一个简单的 jQuery Mobile listview 窗口小部件
配置列表视图小部件
listview 小部件支持许多数据属性和配置设置，可用于更改列表的外观和行为。这些在表 32-2 中描述，并在以下章节中演示。
表 32-2 。Listview 小部件的属性和配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-count-theme | countTheme | 指定计数气泡的主题。 |
data-divider-theme | dividerTheme | 指定分隔线的主题。 |
data-filter | filter | 当设置为true时，listview 显示一个过滤器。 |
| 不适用的 | filterCallback | 指定由筛选器调用的函数。 |
data-filter-placeholder | filterPlaceholder | 指定用于过滤的占位符。 |
data-filter-theme | filterTheme | 指定筛选器搜索栏的主题。 |
data-header-theme | headerTheme | 指定嵌套标题的主题。 |
data-icon | icon | 指定标题上使用的图标。 |
data-inset | inset | 当设置为true时，listview 以适合嵌套列表的样式绘制。 |
data-split-icon | splitIcon | 指定拆分列表的图标。 |
data-split-theme | splitTheme | 指定拆分列表的主题。 |
创建插入列表
列表的默认布局是填充容器元素的宽度并具有方形的角，这与其他 jQuery Mobile 小部件的风格不匹配。为了使样式一致，您可以创建一个嵌入列表，该列表具有圆角，可用于不接触屏幕边缘的元素。您可以通过将值为true的data-inset属性应用到ul或ol元素来创建一个插入列表，如清单 32-2 所示。
清单 32-2 。创建插入列表
...
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div id="container" style="padding: 20px">
<ul data-role="listview"data-inset=true>
<li><a href="#roses">Roses</a></li>
<li><a href="#orchids">Orchids</a></li>
<li><a href="#asters">Asters</a></li>
</ul>
</div>
</div>
...
在这个例子中，我将ul元素放在了div元素中。我使用 CSS padding设置从父元素的边缘插入列表，并使用data-inset属性改变列表的样式。你可以在图 32-2 中看到结果。
图 32-2 。创建插入列表
创建拆分列表
当列表中的每个项目可以执行两个操作时，拆分列表非常有用。列表项被分成两个部分，点击或轻敲列表项的每个部分会导致不同的操作。清单 32-3 显示了一个分割列表，允许用户获得关于一朵花的信息，或者简单地将它添加到他们的购物篮中。
清单 32-3 。使用拆分列表
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
.lcontainer {float: left; text-align: center; padding-top: 10px}
.productData {float: right; padding: 10px; width: 60%}
.cWrapper {text-align: center; margin: 20px}
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<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="aster">Asters</a>
<a href="#asters">Asters</a> </li>
</ul>
</div>
</div>
<div id="basket" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div class="cWrapper">
Basket will go here
</div>
<div class="cWrapper">
<a href="#" data-rel="back" data-role="button" data-inline=true
data-direction="reverse">Back</a>
</div>
</div>
<div id="roses" data-role="page" data-theme="b">
<div data-role="header">
<h1>Roses</h1>
</div>
<div>
<div class="lcontainer">
<img src="rose.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
A rose is a woody perennial within the family Rosaceae.
They form a group of erect shrubs, and climbing or trailing plants.
<div><b>Price: $4.99</b></div>
</div>
</div>
</div>
<div id="orchids" data-role="page" data-theme="b">
<div data-role="header">
<h1>Orchids</h1>
</div>
<div>
<div class="lcontainer">
<img src="orchid.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
The orchid family is a diverse and widespread family in the order
Asparagales. It is one of the largest families of flowering plants.
<div><b>Price: $10.99</b></div>
</div>
</div>
</div>
<div id="asters" data-role="page" data-theme="b">
<div data-role="header">
<h1>Asters</h1>
</div>
<div>
<div class="lcontainer">
<img src="aster.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
The name Aster comes from the Ancient Greek word meaning "star",
referring to the shape of the flower head.
<div><b>Price: $2.99</b></div>
</div>
</div>
</div>
</body>
</html>
要创建一个分割列表，向li元素添加第二个a元素。jQuery Mobile 将每个列表项一分为二，并在各部分之间插入一个垂直分隔线。单击或轻击项目的左边部分导航到第一个a元素的目标，单击或轻击右边部分导航到第二个a元素。你可以在图 32-3 中看到列表项是如何呈现的。
图 32-3 。创建拆分列表
在这个例子中，我将列表项的所有左边部分设置为指向我添加到名为basket的文档中的新页面。我将在第三十三章的中回到这个例子，并扩展它来放置一个简单的购物篮。对于这个例子，basket页面只是一个占位符。
提示 jQuery Mobile 默认使用箭头图标作为拆分按钮。您可以通过将
data-split-icon属性应用到ul或ol元素来改变这一点，指定您想要的图标的名称。第三十章包含了可用图标的列表。
过滤列表
listview 小部件提供了一种过滤列表内容的机制，这是通过将值为true的data-filter属性应用到ul或ol元素来实现的，如清单 32-4 所示。
清单 32-4 。使用列表过滤
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
.lcontainer {float: left; text-align: center; padding-top: 10px}
.productData {float: right; padding: 10px; width: 60%}
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset=truedata-filter=true>
<li><a href="#roses">Roses</a></li>
<li><a href="#orchids">Orchids</a></li>
<li><a href="#asters">Asters</a></li>
</ul>
</div>
</div>
<div id="roses" data-role="page" data-theme="b">
<div data-role="header">
<h1>Roses</h1>
</div>
<div>
<div class="lcontainer">
<img src="rose.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
A rose is a woody perennial within the family Rosaceae.
They form a group of erect shrubs, and climbing or trailing plants.
<div><b>Price: $4.99</b></div>
</div>
</div>
</div>
<div id="orchids" data-role="page" data-theme="b">
<div data-role="header">
<h1>Orchids</h1>
</div>
<div>
<div class="lcontainer">
<img src="orchid.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
The orchid family is a diverse and widespread family in the order
Asparagales. It is one of the largest families of flowering plants.
<div><b>Price: $10.99</b></div>
</div>
</div>
</div>
<div id="asters" data-role="page" data-theme="b">
<div data-role="header">
<h1>Asters</h1>
</div>
<div>
<div class="lcontainer">
<img src="aster.png">
<div><a href="#" data-rel="back" data-role="button"
data-inline=true data-direction="reverse">Back</a>
</div>
</div>
<div class="productData">
The name Aster comes from the Ancient Greek word meaning "star",
referring to the shape of the flower head.
<div><b>Price: $2.99</b></div>
</div>
</div>
</div>
</body>
</html>
在图 32-4 中可以看到，jQuery Mobile 在列表上方添加了一个搜索栏。当用户在搜索栏中输入字符时，jQuery Mobile 会从列表中删除不包含该字符序列的所有项目。(默认情况下，只有在筛选器中输入了至少两个字符后，才会执行筛选。)
图 32-4 。启用列表过滤
注意过滤列表的能力是一个很棒的功能，但在小触摸屏上并不总是有用。为了支持字符输入，当用户激活诸如搜索栏的文本输入元素时，大多数移动设备显示弹出触摸键盘。在小型设备上，键盘会占据屏幕很大一部分，以至于用户不容易看到过滤器的结果。这并不意味着您不应该支持列表过滤，但是如果您针对的是小屏幕设备，提供其他导航机制是很重要的。
使用自定义过滤功能
默认筛选器匹配任何包含用户输入的字符集的列表项。这些匹配列表项文本中的任何位置，并且不区分大小写。您可以通过使用 jQuery UI 风格的方法提供一个定制的过滤函数，如清单 32-5 所示。
清单 32-5 。使用自定义列表过滤功能
...
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).bind("pageinit", function () {
$("ul").listview("option", "filterCallback", function (listItem, filter) {
var pattern = new RegExp("^" + filter, "i");
return !pattern.test(listItem)
})
})
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style type="text/css">
.lcontainer {float: left; text-align: center; padding-top: 10px}
.productData {float: right; padding: 10px; width: 60%}
</style>
</head>
...
您可以通过调用option方法来设置自定义函数，并将该函数用作filterCallback设置的值。该函数的参数是列表项中的文本和用户输入的筛选器。列表中的每一项都会调用一次该函数，如果返回true，调用该函数的项将被隐藏。在本例中，我使用正则表达式将匹配限制在以过滤器文本开头的列表项。你可以在图 32-5 的中看到结果，在过滤框中键入字母R只匹配Roses项。
图 32-5 。使用自定义过滤器
添加分隔符
listview 小部件可以在列表项之间添加分隔线。这些分隔符由元素指定，这些元素的data-role属性被设置为list-divider,，它们可以通过应用于定义列表的ul或ol元素的data-divider-theme属性来设置样式。
列表分隔线有助于为长列表或复杂列表提供结构，而不会改变用户在列表中导航的方式。在清单 32-6 中，你可以看到我是如何添加一些分隔线元素并将data-divider-theme属性应用到例子中的。
清单 32-6 。使用列表分隔符
...
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset=truedata-theme="c"
data-divider-theme="b">
<li data-role="list-divider">A</li>
<li><a href="#asters">Asters</a></li>
<li data-role="list-divider">C</li>
<li><a href="document2.html">Carnations</a></li>
<li data-role="list-divider">D</li>
<li><a href="document2.html">Daffodils</a></li>
<li data-role="list-divider">L</li>
<li><a href="document2.html">Lilies</a></li>
<li data-role="list-divider">O</li>
<li><a href="#orchids">Orchids</a></li>
<li data-role="list-divider">P</li>
<li><a href="document2.html">Peonies</a></li>
<li><a href="document2.html">Primulas</a></li>
<li data-role="list-divider">R</li>
<li><a href="#roses">Roses</a></li>
<li data-role="list-divider">S</li>
<li><a href="document2.html">Snowdrops</a></li>
</ul>
</div>
</div>
...
你可以在图 32-6 中看到分隔器产生的效果。
图 32-6 。向列表中添加分隔符
提示如果你想让一个元素有不同的外观，你可以将
data-theme属性直接应用于单个列表项。
使用基于约定的配置
一些配置选项是通过约定而不是配置来处理的。当你看分割列表时，你已经看到了这样的例子。如果将第二个a元素添加到一个li元素的内容中，jQuery Mobile 会自动创建一个拆分列表项。您不必应用数据属性来创建这种效果——它就这样发生了。在这一节中，我将向您展示三种可以用来格式化列表项的不同约定:计数气泡、文本强调和旁白。
添加计数气泡
您可以向列表项添加一个小的数字指示器。这些被称为计数气泡，当列表项代表某种类别，并且您想要提供关于有多少可用的信息时，它们会很有用。例如，如果您的列表项代表电子邮件文件夹，您可以使用计数气泡来指示每个文件夹中有多少封邮件。您还可以使用计数气泡来显示电子商务应用中的库存商品数量。
虽然这种效果通常用于表示数值，但是您可以显示任何您喜欢的信息。价值的意义需要是不言自明的，因为你没有空间向用户提供解释——只有价值。
通过向一个li元素的内容添加一个额外的子元素来创建一个计数气泡。这个子元素必须包含值并被分配给ui-li-count类。你可以看到在清单 32-7 中定义的计数气泡的例子，包括一个使用非数值的例子。
清单 32-7 。将计数气泡添加到列表项目
...
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset=true data-filter=true>
<li><a href="#roses">Roses<div class="ui-li-count">23</div></a></li>
<li><div class="ui-li-count">7</div><a href="#orchids">Orchids</a></li>
<li><a href="#asters">Asters</a><div class="ui-li-count">Pink</div></li>
</ul>
</div>
</div>
...
注意，您可以将子元素放在li元素中的任何位置。它不一定是最后一个元素(尽管这是一个常见的约定)。你可以在图 32-7 中看到计数气泡是如何显示的。
图 32-7 。使用反气泡
添加文本强调
当您使用包装在标题元素(h1到h6元素)而不是p元素(表示段落)中的内容时，listview 小部件将应用不同的强调级别。这允许你创建一个包含标题和一些支持细节文本的列表项，如清单 32-8 所示。
清单 32-8 。添加文本强调
...
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset=true data-filter=true>
<li>
<a href="#roses"><h1>Roses</h1>
<p>A rose is a woody perennial within the family Rosaceae.</p>
<div class="ui-li-count">$4.99</div></a>
</li>
<li><div class="ui-li-count">7</div><a href="#orchids">Orchids</a></li>
<li><a href="#asters">Asters</a><div class="ui-li-count">Pink</div></li>
</ul>
</div>
</div>
...
在这个例子中，我使用了h1元素来表示产品的名称，使用了p元素来表示详细信息。我包括了一个计数气泡，表明项目的价格。(价格非常适合用来计算泡沫，因为货币符号为数值提供了直接的含义。)你可以在图 32-8 中看到效果。
图 32-8 。在列表项中使用文本强调
添加旁白
撇开不谈是使用计数气泡的替代方法。要创建旁白，您需要向包含您想要显示的信息的li元素添加一个子元素，并将其分配给ui-li-aside类。你可以在清单 32-9 中看到旁白的使用。
清单 32-9 。在列表项中创建旁白
...
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset=true data-filter=true>
<li>
<a href="#roses">
<h1>Roses</h1>
<p>A rose is a woody perennial within the family Rosaceae.</p>
<p class="ui-li-aside">(Pink) <strong>$4.99</strong></p>
</a></li>
<li><div class="ui-li-count">7</div><a href="#orchids">Orchids</a></li>
<li><a href="#asters">Asters</a><div class="ui-li-count">Pink</div></li>
</ul>
</div>
</div>
...
在图 32-9 中，您可以看到玫瑰项目的旁白显示样式。
图 32-9 。使用旁白
使用 Listview 方法
listview 小部件定义了表 32-3 中所示的两种方法。
表 32-3 。Listview 方法
| 方法 | 描述 |
|---|---|
listview("refresh") | 更新 listview 小部件以反映基础元素的变化。 |
使用 Listview 事件
listview小部件只定义了create事件，当小部件应用于一个元素时会触发该事件。
使用面板小部件
面板小部件出现在当前页面的左侧或右侧——您可以使用面板来显示任何内容，但最常见的用途是提供访问导航选项和应用设置。通过将div元素的data-role属性设置为panel来创建面板，如清单 32-10 中的所示。
清单 32-10 。创建面板小部件
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<style>
.buttonContainer { text-align: center; }
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content" class="buttonContainer">
<a data-role="button" data-inline="true" href="#panel">Open Panel</a>
</div>
<div id="panel" data-role="panel" data-theme="a">
<div data-role="panel-content">
<h3>Simple Panel</h3>
<p>This is the the panel</p>
<button data-rel="close" data-inline="true">Close</button>
</div>
</div>
</div>
</body>
</html>
面板小部件的元素是在显示面板的页面中定义的。在本例中，我定义了一个包含一些简单 HTML 元素的面板，这些元素被包装在一个div元素中，我将该元素的data-role属性设置为panel-content，这确保了内容在面板中的正确定位。
本例中的主页包含一个a元素，其href元素指定了面板元素的id。单击链接——或者按钮，因为我已经将a元素上的data-role属性设置为 button——打开面板。在图 32-10 中可以看到效果。
图 32-10 。使用弹出窗口部件
这是一个你需要亲身体验才能正确理解的例子，但是点击打开面板按钮会将主页滑动到右边来显示面板。我可以通过点击面板中的Close按钮(我通过将data-rel属性设置为close来配置)或者点击主页上仍然可见的部分来关闭面板。
配置面板小部件
面板微件定义了表 32-4 中所示的数据属性和配置设置。
表 32-4 。面板部件的属性和配置设置
| 数据属性 | 环境 | 描述 |
|---|---|---|
data-animate | animate | 指定面板在打开或关闭时是否会显示动画。默认为true。 |
data-dismissable | dismissable | 指定是否可以通过点击打开面板的页面来关闭面板。默认为true。 |
data-display | display | 指定面板和页面之间的关系。这些值是reveal、push,和overlay，如下所述 |
data-position | position | 指定面板的显示位置。值为left和right。默认是left。 |
data-position-fixed | positionFixed | 指定即使用户向下滚动页面，面板的内容是否仍然可见。默认为false。 |
data-swipe-close | swipeClose | 指定面板是否可以通过滑动来关闭。默认为true。 |
定位和显示面板
data-display和data-position属性决定了面板的显示位置(窗口的left或right侧)以及它相对于打开它的页面的显示方式。data-display属性有三个值，我已经在表 32-5 中描述过了。
表 32-5 。数据显示属性的值
| 价值 | 描述 |
|---|---|
reveal | 默认值:面板将页面推开。 |
push | 调整页面大小以与面板共享空间。 |
overlay | 面板在页面上滑动。 |
在清单 32-11 中，你可以看到这两种设置的效果，演示了所有显示和位置选项的排列。
清单 32-11 。定位面板
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<script>
$(document).bind("pageinit", function () {
$("#pageContent button").tap(function (e) {
$("#" + this.id + "Panel").panel({
display: $("input[type=radio]:checked").attr("id")
}).panel("open");
});
});
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div id="pageContent" data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a"><button id="left">Left</button></div>
<div class="ui-block-b"><button id="right">Right</button></div>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="display" id="reveal" checked="checked"/>
<label for="reveal">Reveal</label>
<input type="radio" name="display" id="push"/>
<label for="push">Push</label>
<input type="radio" name="display" id="overlay"/>
<label for="overlay">Overlay</label>
</fieldset>
</div>
</div>
<div id="leftPanel" data-role="panel" data-theme="a" data-position="left">
<div data-role="panel-content">
<h3>Left Panel</h3>
<p>This is the the left panel</p>
<button data-rel="close" data-inline="true">Close</button>
</div>
</div>
<div id="rightPanel" data-role="panel" data-theme="a" data-position="right">
<div data-role="panel-content">
<h3>Right Panel</h3>
<p>This is the the right panel</p>
<button data-rel="close" data-inline="true">Close</button>
</div>
</div>
</div>
</body>
</html>
我使用一对按钮来打开左右面板(使用open方法，我将在本章后面介绍)和一组单选按钮(如第三十章中的所述)来选择显示模式。你可以在图 32-11 中看到一些排列。
图 32-11 。更改显示和位置选项
panel 小部件不能在窗口的左侧和右侧显示相同的元素:准备内容的过程会以某种方式调整它。正是因为这个原因，我在这个例子中使用了两个独立的面板。
解散陪审团
data-swipe-close和data-dismissable属性允许你控制用户关闭面板的方式，通过滑动手势或点击打开面板的页面。将这些属性设置为false会创建一个面板，该面板只能在用户与面板内容交互时关闭(或者通过编程使用open或toggle方法，我将在本章稍后描述)。
我对从用户手中夺走控件的控制权持谨慎态度，如果你决定使用这些属性，那么你应该确保在你的 web 应用中保持一致——让面板以不同的方式消失只会导致挫败感。在清单 32-12 中，我创建了一个面板，它会显示一段固定的时间，然后自行消失——这不是我在实际应用中推荐的，但对演示小部件功能很有用。用户不能通过点击打开面板的页面或滑动来关闭面板，但该按钮仍可用于关闭面板。
清单 32-12 。创建不能通过点击页面或滑动来消除的面板
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).bind("pageinit", function () {
$("a").tap(function (e) {
var timeRemaining = 15;
var intervalId = setInterval(function () {
$("#remaining").text(timeRemaining--);
if (timeRemaining == 0) {
$("#panel").panel("close");
clearInterval(intervalId);
}
}, 1000);
$("#panel").panel("open");
});
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jacqui's Shop</h1>
</div>
<div data-role="content" class="buttonContainer">
<a data-role="button" data-inline="true">Open Panel</a>
</div>
<div id="panel" data-role="panel" data-theme="a"
data-dismissable="false" data-swipe-close="false">
<div data-role="panel-content">
<h3>Simple Panel</h3>
<p>This panel will close in
<span id="remaining">15</span> seconds.</p>
<button data-rel="close" data-inline="true">Close</button>
</div>
</div>
</div>
</body>
</html>
我使用open和close方法来控制面板的可见性——我将在下一节适当描述这些方法——并使用 JavaScript setInterval函数来管理倒计时，在面板打开 15 秒后关闭面板。用户可以通过使用面板中显示的button元素提前关闭面板——如果您想阻止用户关闭面板，那么您必须确保面板不包含此类元素。当底层元素发生变化时，面板小部件会反映这些变化，如图图 32-12 所示。
图 32-12 。自动关闭面板
使用面板方法
面板微件定义了表 32-6 中所示的方法。在前面的例子中演示了open和close方法。
表 32-6 。面板方法
| 方法 | 描述 |
|---|---|
panel("open") | 显示面板。 |
panel("close") | 隐藏面板。 |
panel("toggle") | 切换面板的可见性:显示隐藏的面板，隐藏可见的面板。 |
使用面板事件
面板微件定义了表 32-7 中所示的事件。我并不认为这些事件在我自己的项目中有用，因为我更喜欢处理导致面板显示或隐藏的元素中的事件。
表 32-7 。小组活动
| 事件 | 描述 |
|---|---|
create | 创建小部件时触发。 |
beforeopen | 在面板显示之前触发。 |
beforeclose | 面板隐藏前触发。 |
open | 面板显示后触发。 |
close | 面板隐藏后触发。 |
摘要
在这一章中，我描述了 jQuery Mobile list 小部件，它是移动 web 应用的基本导航工具。我向您展示了可以创建的不同类型的列表，可以呈现给用户的不同样式的列表，以及可以用来管理单个列表项内容的配置和约定。
