Email:

Submit

`

我们可以向表单元素添加以下属性来管理转换或禁用 Ajax:

data-transition=”pop”

data-direction=”reverse”

data-ajax=”false

注意:确保每个表单的id属性在整个站点中是唯一的，这一点很重要。如前所述，在转换时，jQuery Mobile 会将“from”和“to”页面同时加载到 DOM 中，以完成平稳的转换。为了避免任何冲突，表单 id 必须是唯一的。

提示:在构建表单时，建议将每个表单字段与其对应的标签进行语义关联。标签的 for 属性和输入的 id 属性建立了这样的关系:

`Name:

`

该协会创建了辅助技术可访问的符合 508 的应用。政府或国家机构经常要求可访问性。您可以使用 WAVE 3 工具测试您的移动应用的兼容性。

文本输入

文本输入是移动设备上最麻烦的表单域。除非你是世界短信冠军，否则在物理或虚拟的 QWERTY 键盘上输入文本是低效的。这就是为什么自动收集尽可能多的用户信息是有价值的。如前所述，设备 API 可以帮助简化这种用户体验。尽管最小化这些繁琐的任务是一个好的目标，但有时我们必须通过文本输入收集用户反馈。最常见的文本表单字段如图 4–10 所示。

3 见[wave.webaim.org/](http://wave.webaim.org/)。

图 4–10。 文字输入

从开发人员的角度来看，我们可以创建 jQuery Mobile 表单和文本输入，而不需要额外的标记(参见清单 4–14)。可选地，我们可以为我们的文本输入选择一个合适的主题，方法是将data-theme属性添加到 input 元素中，以增强表单字段的对比度。

清单 4–14。 文本输入(ch4/text-inputs.html)

**

提示:要以一种可访问的方式隐藏标签，将 ui-hidden-accessible 样式附加到元素上。例如，我们将这种技术应用于图 4-10 中的搜索字段。这将优雅地隐藏标签，同时保持 508 合规性:

Search

构建表单时，将输入字段与其语义类型相关联是很重要的。这种联系有两个好处。首先，当输入字段获得焦点时，它会用适当的键盘提示用户。例如，指定为type=”number”的字段将自动提示数字键盘(参见图 4–11)。同样，映射有type=”tel”的字段将提示电话专用键盘(参见图 4–12)。

图 4–11。 数字键盘

图 4–12。 电话键盘

此外，该规范允许浏览器应用适用于字段类型的验证规则。提交表单时，浏览器对自动验证的支持仍然很少，但会随着时间的推移而改进。有关移动输入类型和属性的完整列表，请参考 Peter-Paul Koch 的“移动输入测试” 4 。它显示了所有可用的移动输入类型和属性及其相关的浏览器支持。

大多数移动浏览器都支持的另一个特性是placeholder属性。该属性为文本输入添加一个提示或标签，当字段获得焦点时自动消失(参见清单 4–14)。

注意:搜索字段(type=”search”)的样式和行为与其他输入类型略有不同。它包含一个左对齐的“搜索”图标，它的角是药丸形状，当用户输入文本时，一个“删除”图标将出现在右对齐的位置，以帮助清除字段。

动态文本输入

textinput插件是自动增强文本输入和文本区域的小部件。我们可以利用这个插件来动态地创建、启用和禁用文本输入(参见清单 4–15)。

清单 4–15。 textinput 插件示例(ch4/dynmic-text-input.html)

`// Create text input with markup-driven options

$( '' )

.insertAfter( “#firstName” )

.textinput();

// Create text input with plugin-driven options

$( '' )

.insertAfter( “#text1” )

.textinput({

theme: 'c'

});

// Disable text input

$( “#text1” ).textinput( “disable” );

// Enable text input

$( “#text1” ).textinput( “enable” );`

4 见[www.quirksmode.org/html5/inputs_mobile.html](http://www.quirksmode.org/html5/inputs_mobile.html)。

文本输入选项

textinput插件有以下选项:

**initSelector** *CSS selector string*

**default:** "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea"

initSelector 用于定义选择器(元素类型、数据角色等。)用于触发widge t 插件的自动初始化。例如，默认选择器匹配的所有元素都将被textinput插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.textinput.prototype.options.initSelector = "..."; });

**theme** *string*

**default:** null. Inherited from parent.

为文本元素设置主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，如果没有显式设置，所有元素都将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-theme=”a”.

$( “#text1” ).textinput({ theme: "a" });

文字输入方法

textinput插件有以下方法:

**enable:** 启用一个禁用的文本输入或文本区。

$( “textarea” ).textinput( “enable” );

disable: 禁用一个 textinput 或 textarea。

$( “textarea” ).textinput( “disable” );

文本输入事件

textinput插件支持以下事件:

**create** *triggered when a text input is created*

创建自定义文本输入时触发此事件。它不用于创建自定义输入。

$( '' ) .textinput({ theme: 'c', create: function(event) { console.log( "Creating text input..." ); } }) .insertAfter( “#text1” );

选择菜单

jQuery Mobile framework 将自动增强所有本地 select 元素，不需要额外的标记(参见清单 4–16)。

清单 4–16。 原生选择菜单(CH4/select-menu-Native . html)

Genre: Action Comedy Drama

这个转换将用一个 jQuery Mobile 样式的按钮替换原来的 select，该按钮包含一个右对齐的向下箭头图标。默认情况下，点击此选择按钮将启动操作系统的本机选择选择器(参见图 4–13)。或者，正如我们将在下一节中看到的，我们可以配置 jQuery Mobile 来显示定制的选择菜单。

图 4–13。 选择菜单

用户做出选择后，选择按钮将显示所选选项的值。如果文本值对于按钮来说太大，文本将被截断，并显示一个尾随省略号。此外，在选择多个选项后，多选按钮将显示一个计数气泡或标记(参见图 4–13)。这是一种突出显示所选选项数量的视觉效果。

注意:在创建带有multiple="multiple"属性的选择菜单时，一些移动平台不支持多选功能。因此，建议在必要时使用自定义菜单。

自定义选择菜单

作为本地呈现选项列表的替代，我们可以选择在自定义 HTML/CSS 视图中呈现我们的选择菜单(参见图 4–14)。

图 4–14。 自定义选择菜单

对于这个视图，向 select 元素添加一个data-native-menu="false"属性(参见清单 4–17)。

清单 4–17。 自定义选择菜单(ch4/select-menu-cstom.html)

Genre: Select one... Action Comedy Drama

下面列出了客户优势与本地优势的对比。

定制优势:

为所有设备提供统一的用户体验。

自定义菜单为多选选项列表提供了通用支持。

添加了一种处理占位符选项的优雅方式。我们将在下一节回顾占位符选项。

自定义菜单是可主题化的(参见清单 4–17)。

定制缺点:

不如本地呈现的选择菜单性能好。当比较包含许多选项的菜单时，这一点会更加明显。

注意:你也可以利用Mobiscroll 5 插件作为定制选择菜单的另一种选择。在本章的最后，我们包括了这个插件的几个例子，因为我们演示了它的日期选择器和搜索过滤器的用法。

占位符选项

占位符是自定义选择菜单独有的功能。占位符有三个好处:

占位符要求用户做出选择。默认情况下，如果没有配置占位符，将选择列表中的第一个选项。

占位符可用于显示未选中选择按钮的提示文本(参见图 4–14)。例如，未选中的票据交付字段显示为占位符文本“选择一个...”。

显示选项列表时，一个占位符也作为标题出现(参见图 4–14)。

5 见[code.google.com/p/mobiscroll/](http://code.google.com/p/mobiscroll/)。

我们可以通过三种方式配置占位符:

我们可以向没有值的选项添加文本。

Select one...

当选项包含文本和值时，我们可以将data-placeholder=”true”属性添加到选项中:

Select one...

当您想使该字段成为没有提示文本或标题的必填字段时，请使用空选项:

动态选择菜单

selectmenu插件是自动增强选择菜单的小部件。有了这个插件，我们可以动态地创建、启用、禁用、打开和关闭选择菜单(参见清单 4–18)。

清单 4–18。 动态选择菜单(CH4/Dynamic-select-menu . html)

`// Create select menu with markup-driven options

$( '...' )

.insertAfter( “#foo” )

.selectmenu();

// Create select menu with plugin-driven options

$( '...' )

.insertAfter( “#select1” )

.selectmenu({

theme: "e",

overlayTheme: "c",

disabled: false,

nativeMenu: false

});`

选择菜单选项

selectmenu插件有以下选项:

**corners** *boolean*

**default:** true

与其他按钮类型一样，默认情况下，选择菜单按钮具有圆角。将此选项设置为 false 将删除圆角。该选项也作为数据属性公开:data-corners=”false”.

$( “#select1” ).selectmenu({ corners: false });

**disabled** *boolean*

**default:** false

禁用元素。selectmenu插件也有enable和disable方法来动态启用和禁用控件。

$( “#select1” ).selectmenu({ disabled: true });

**hidePlaceholderMenuItems** *boolean*

**default:** true

默认情况下，当选择菜单打开时，占位符菜单项将从视图中隐藏。要使占位符项可选，请将该值设置为 false。

$( “#select1” ).selectmenu({ hidePlaceholderMenuItems: false });

**icon** *string*

**default:** “arrow-d”

设置选择按钮的图标。该选项也作为数据属性公开:data-icon=”plus”.

$( “#select1” ).selectmenu({ icon: “plus” });

**iconpos** *string*

**default:** “right”

设置图标位置。可能的值有:“left”, “right”, “none”,和“notext”.``“notext”值将选择显示为一个只有图标的按钮，没有占位符文本。“none”值将完全移除图标。这个选项也作为一个数据属性公开:data-iconpos=”none”.

$( “#select1” ).selectmenu({ iconpos: “notext” });

**iconshadow** *boolean*

**default:** true

如果为真，框架将为图标添加阴影。该选项也作为数据属性公开:data-iconshadow=”false”.

$( “#select1” ).selectmenu({ iconshadow: false });

**initSelector** *CSS selector string*

**default:** "select:not(:jqmData(role='slider'))"

initSelector 用于定义选择器(元素类型、数据角色等。)来触发widget插件的自动初始化。例如，默认选择器匹配的所有元素都将被selectmenu插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.selectmenu.prototype.options.initSelector = "..";

});

**inline** *boolean*

**default:** false

如果设置为 true，这将使选择按钮显示为内嵌按钮。默认情况下，选择按钮将占用其容器的整个宽度。相比之下，内嵌按钮只占用占位符文本的宽度。这个选项也公开为一个数据属性:data-inline=”true”。

$( “#select1” ).selectmenu({ inline: true });

**nativeMenu** *boolean*

**default:** true

默认情况下，选择按钮将启动操作系统的本机选择选择器。要在自定义 HTML/CSS 视图中呈现选择菜单，请将该值设置为 false。该选项也作为数据属性公开:data-native-menu=”false”.

$( “#select1” ).selectmenu({ nativeMenu: false });

**shadow** *boolean*

**default:** true

默认情况下，选择按钮将应用投影。将此选项设置为 false 将会移除投影。该选项也作为数据属性公开:data-shadow=”false”.

$( “#select1” ).selectmenu({ shadow: false });

**theme** *string*

**default:** null. Inherited from parent.

设置元素的主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，这将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-theme=”a”.

$( “#select1” ).selectmenu({ theme: "a" });

选择菜单方式

selectmenu插件有以下方法:

**enable:** 启用一个禁用的选择菜单

$( “#select1” ).selectmenu( “enable”);

**disable** : 禁用选择菜单。

$( “#select1” ).selectmenu( “disable” );

**open** : 打开一个关闭的选择菜单。此方法仅适用于自定义选择。

$( “#select1” ).selectmenu( “open” );

**close:** 关闭一个打开的选择菜单。此方法仅适用于自定义选择。

$( “#select1” ).selectmenu( “close” );

**refresh** : 更新自定义选择菜单。

这将更新自定义选择菜单，以反映本地选择元素的值。例如，如果本地选择的 selectedIndex 被更新，我们可以调用“刷新”来重建自定义选择。如果传递一个 true 参数，可以强制进行刷新和重建。

`// Select the third menu option and refresh the menu

var myselect = $( "#select1" );

myselect[0].selectedIndex = 2;

myselect.selectmenu( "refresh" );

// refresh and rebuild the list

myselect.selectmenu( “refresh”, true );`

选择菜单事件

selectmenu插件支持以下事件:

**create:**创建选择菜单时触发

创建自定义选择菜单时会触发此事件。它不用于创建自定义元素。

$( '...' ) ** .**insertAfter**(** “#select1”**)** .selectmenu**({** create**:** function**(**event**) {** console.log**(** "Creating select menu..." **);** **}** ** });**

单选按钮

单选按钮将用户的选择限制为单一项目(参见图 4–15)。例如，从几个选项中选择一个应用设置通常是通过单选按钮来完成的，单选按钮因其简单易用而受到青睐。用户可以点击单选按钮的任意位置进行选择，jQuery Mobile 将自动更新底层的表单控件。

图 4–15。 单选按钮

在清单 4-19 中，我们添加了三个额外的属性来帮助样式和定位我们的单选按钮。第一个属性，data-role=”controlgroup”,用圆角优雅地将按钮组合在一起。第二个属性, data-type=”horizontal”,覆盖默认的定位——垂直——并水平显示按钮。最后，我们为我们的按钮设置了主题。默认情况下，单选按钮将继承其父控件的主题。然而，如果你想为你的单选按钮应用一个替换主题，你可以将data-theme属性添加到相应单选按钮的标签中。

清单 4–19。 水平单选按钮(ch4/radio-buttons.html)

`

Map view:

Map

Satellite

Hybrid

`

注意:如果水平单选按钮的容器不够宽，无法在一行中显示，它们将会换行。如果换行有问题，您可以减小字体大小:.ui-controlgroup-horizontal .ui-radio label **{**font-size: 13px !important;**}**

动态单选按钮

checkboxradio插件是一个可重用的小部件，可以自动增强单选按钮和复选框。有了这个插件，我们可以动态地创建、启用、禁用和刷新我们的单选按钮(参见清单 4–20)。

清单 4–20。 动态单选按钮(CH4/Dynamic-radio-buttons . html)

`// Create radio buttons with markup-driven options

\(**(** '

Map view:

Map...

'**)**

** .**insertAfter**(** "#radio1" **);**

\).mobile.pageContainer.trigger( "create" );

// Create radio buttons with plugin-driven options

\(**(** '

Map view:

Map...

' **)**

**.**insertAfter**(** "#radio1" **);**

\)( “#map1” ).checkboxradio({ theme: "e" });

\(**(** “#map2” **).**checkboxradio**({** theme**:** "e" **});**

\).mobile.pageContainer.trigger( "create" );`

复选框和单选按钮选项

checkboxradio插件有以下选项:

**initSelector** CSS 选择器字符串

**default:** "input[type='checkbox'],input[type='radio']"

initSelector 用于定义选择器(元素类型、数据角色等。)用于触发小部件插件的自动初始化。例如，默认选择器匹配的所有元素都将被checkboxradio插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.checkboxradio.prototype.options.initSelector = "..."; });

**theme** *string*

**default:** null. Inherited from parent.

为复选框或单选按钮设置主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，这将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-theme=”a”.

$( “#element1” ).checkboxradio({ theme: "a" });

复选框和单选按钮方法

checkboxradio插件有以下方法:

**enable:** 启用已禁用的复选框或单选按钮。

$(“#element1” ).checkboxradio( “enable” );

disable: disable a checkbox or radio button.

$( “#element1” ).checkboxradio( “disable” );

**refresh:** 更新自定义复选框或单选按钮

这将更新自定义复选框或单选按钮，以反映本地元素的值。例如，我们可以动态检查一个单选按钮并调用“refresh”来重新构建增强的控件。

// Dynamically set a checkbox or radio element and refresh it. $( "#elem1" ).attr( "checked", true ).checkboxradio( "refresh" );

复选框和单选按钮事件

checkboxradio插件支持以下事件:

**create:**创建复选框或单选按钮时触发

创建自定义复选框或单选按钮时会触发此事件。它不用于创建自定义元素。

$( '#element1' ) .checkboxradio({ theme: "e", create: function(event) { console.log( "Creating new element..." ); } });

复选框

复选框是一种常见的表单控件，允许用户从许多选项的列表中选择多个值(参见 Figure 4–16)。用户可以点击复选框按钮的任意位置进行选择，jQuery Mobile 将自动更新底层的表单控件。

图 4–16复选框

样式和定位复选框的标记与我们之前用于单选按钮的标记相同(参见清单 4–21)。同样，我们添加了三个附加属性来帮助设置复选框的样式和位置。第一个属性data-role=”controlgroup”,用圆角优雅地将复选框元素组合在一起。第二个属性data-type=”horizontal”,覆盖按钮的默认垂直位置，并水平显示它们。最后，我们为我们的按钮设置了主题。默认情况下，复选框将继承其父控件的主题。然而，如果你想应用一个替换主题，你可以在相应复选框的标签上添加data-theme属性。

清单 4–21。 横向复选框(ch4/checkboxes.html)

`

Genre:

Action

Comedy

Drama

`

注意:如果水平复选框的容器不够宽，无法在一行中显示，它们将会换行。如果换行有问题，您可以减小字体大小:

.ui-controlgroup-horizontal .ui-checkbox label { font-size: 11px !important; }

动态复选框

同样，checkboxradio插件是自动增强复选框和单选按钮的小部件。有了这个插件，我们可以动态地创建、启用、禁用和刷新我们的复选框(参见清单 4–22)。checkboxradio插件的完整列表在“动态单选按钮”一节中已有记载。单选按钮和复选框可以重用相同的 API。

清单 4–22。 动态复选框(CH4/Dynamic-checkboxes . html)

`// Create checkboxes with markup-driven options

\(( '

Genre:

Action...

' )

.insertAfter( "#element1" );

\).mobile.pageContainer.trigger( "create" );

// Create checkboxes with plugin-driven options

\(( '

Genre:

Action...

' )

.insertAfter( "#create-cb2" );

\)( '#c3' ).checkboxradio({ theme: "e" });

\(( '#c4' ).checkboxradio({ theme: "e" });

\).mobile.pageContainer.trigger( "create" );`

滑块

滑块是一种常见的表单控件，允许用户在最小和最大范围之间选择一个值(见图 4–17)。

图 4–17。 滑块

例如，在我们的例子中，我们用一个滑块来调整音量或亮度，以调整高低设置之间的范围。我们可以调整滑块的最小和最大边界，还可以设置它的默认值。用户可以通过滑动控件或在滑块的相应文本字段中输入值来调整滑块。如清单 4–23 所示，jQuery Mobile 不需要额外的标记来增强我们的滑块。任何带有type=”range”的输入元素都会被自动优化。

清单 4–23。 滑块(ch4/slider.html)

Volume:

滑块由两个可主题化的组件组成。有被称为滑块的前景组件和被称为轨道的背景组件。这些组件中的每一个都可以单独设置主题。要主题化滑块，将data-theme=”a”属性添加到input元素中。此外，为了给音轨添加主题，将data-track-theme=”a”属性添加到input元素中:

动态滑块

slider插件是一个多用途的小工具，可以自动增强滑块和开关控制。有了这个插件，我们可以动态地创建、启用、禁用和打开开关控制(参见清单 4–24)。

清单 4–24。 动态滑块(ch4/dynamic-slider.html)

`// Create slider with markup-driven options

\(**(** 'Brightness:

\)( "#s1" ).slider();

// Create slider with plugin-driven options

\(( 'Brightness:

' )

.insertAfter( "#create-s2" );

\)( "#s1" ).slider({

theme: "d",

trackTheme: "a",

disabled: false

});`

滑块选项

slider插件有以下选项:

**disabled** *boolean*

**default:** false

禁用控件。slider插件也有enable和disable方法来动态启用和禁用控件。

$( “#element1” ).slider({ disabled: true });

**initSelector** CSS 选择器字符串

**default:** "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"

initSelector 用于定义选择器(元素类型、数据角色等。)来触发widget插件的自动初始化。例如，默认选择器匹配的所有元素都将被 slider插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.slider.prototype.options.initSelector = "...";

});

**theme** *string*

**default:** null. Inherited from parent.

设置滑块的主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，这将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-theme=”a”.

$( “#element1” ).slider({ theme: "a" });

**trackTheme** *string*

**default:** null. Inherited from parent.

为滑块滑动的轨道设置主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，如果没有显式设置，它将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-track-theme=”a”.

$( “#element1” ).slider({ trackTheme: "a" });

滑块方法

slider插件有以下几种方法:

enable: 启用禁用的滑块或开关控制。

$(“#element1” ).slider( “enable” );

disable: 禁用滑块或开关控制。

$( “#element1” ).slider( “disable” );

refresh: 更新自定义滑块或开关控件。

这将更新自定义滑块或开关，以反映本机元素的值。例如，我们可以动态更新我们的开关或滑块，并调用“refresh”来重建控件。

// Set the switch to “on” and refresh it var switch **=** $**(** "#switch1" **);** switch**[**0**].**selectedIndex **=** 1**;**

switch**.**slider**(** "refresh" **);**

// Maximize the slider's volume control and refresh it $**(** "#volume" **).**val**(** 10 **).**slider**(** "refresh" **);**

滑块事件

slider插件支持以下事件:

create: 当滑块或开关控件被创建时触发

创建自定义滑块或开关控件时会触发此事件。它不用于创建自定义元素。

$( '...' ) .insertAfter( “#element1” ) .slider({ create: function(event) { console.log( "Creating new element..." ); });

开关控制

开关控制(见图 4–18)通常用于管理布尔开/关标志。

图 4–18。 开关控制

例如，开关控件通常是允许用户操作应用设置的首选方式，因为它们简单易用。要翻转开关，用户可以轻触控件或滑动开关。要创建一个开关控件，添加一个带有data-role=”slider”和两个选项的选择元素来管理开/关状态(参见清单 4–25)。

清单 4–25。 开关控制(ch4/switch-control.html)

Alerts: **Off** **On**

开关控件也由两个主题化组件组成。有被称为滑块的前景组件和被称为轨道的背景组件。这些组件中的每一个都可以单独设置主题。要主题化滑块，将data-theme=”a”属性添加到select元素中。此外，为了给音轨添加主题，将data-track-theme=”a”属性添加到select元素中:

Off On

动态开关控制

如前所述，slider插件是自动增强开关控制的小部件。有了这个插件，我们可以动态地创建、启用、禁用和打开开关(参见清单 4–26)。slider插件的完整列表在之前的“动态滑块”一节中有记载。相同的 API 可重复用于滑块和开关。

清单 4–26。 动态开关控件(CH4/Dynamic-switch-control . html)

`// Create switch with markup-driven options

$( '' )

.insertAfter( “#foo” )

.slider();

// Create switch with plugin-driven options

$( '...' )

.insertAfter( “#switch1” )

.slider({

theme: "b",

trackTheme: "c",

disabled: false

});`

原生形态元素

jQuery Mobile 自动增强页面中定义的所有表单元素。然而，如果你想回到本地控制(见图 4–18)这可以在全局或现场级配置(见清单 4–27)。

图 4–19。 原生形态元素

清单 4-27。 原生表单元素(ch4/native.html)

`// Selectively choose which elements are native with data-role=”none”

Text Input

Switch:

Off

On

// Globally configure native elements by selector

\((document).bind('mobileinit',function(){

**\).mobile.page.prototype.options.keepNative = "input, select";**

});`

要单独设置一个表单字段以显示其本地控件，请将data-role=”none”属性添加到其元素中。或者，当mobileinit事件初始化时，您可以通过设置keepNative选择器来全局配置哪些表单元素应该本地呈现。例如，在清单 4–27 中，我们配置了我们的选择器来自动显示所有的input和select元素的原始外观。我们将在第八章“配置 jQuery Mobile”中更深入地讨论如何配置 jQuery Mobile。

HTML5 提供了几个新的输入类型来帮助收集日期和时间输入。我们现在有了时间、日期、月、周、日期时间和日期时间本地输入类型(参见清单 4–28)。

清单 4–28。 HTML5 日期(ch4/dates.html)

对这些新的 HTML5 输入类型的支持依赖于浏览器(见[www.quirksmode.org/html5/inputs.html](http://www.quirksmode.org/html5/inputs.html))。支持这些功能的新浏览器将显示有用的日期选择器(见图 4–20),不支持的浏览器将退回到文本输入。

图 4–20。 HTML5 日期

Mobiscroll Date Picker

Mobiscroll 6 是一款针对触摸屏设备优化的日期选择器。Mobiscroll API 是可配置的， 7 允许显示多个日期和时间组合(参见图 4–21)。此外，Mobiscroll 是可主题化的，也可以定制以显示任何必要的数据(参见图 4–22)。

图 4–21。 移动滚动日期选择器

图 4–22。 用自定义列表移动鼠标

例如，我们可以更新 MobiScroll 选项来创建一个定制的电影搜索(参见清单 4–29)。Mobiscroll 插件是一个灵活的控件，可以用于许多不同的用例。

6 见[code.google.com/p/mobiscroll/](http://code.google.com/p/mobiscroll/)。

7 见 http://code.google.com/p/mobiscroll/wiki/Documentation 。

清单 4-29。【mobis roll(CH4/mobis roll . html)

`// Import the Mobiscroll resources

// Display the default date picker (see Figure 4–21).

$( “#element1” ).scroller();

// Display a custom filter for a movie search (see Figure 4–22).

$( "#element2" ).scroller({

setText: 'Search',

theme: 'sense-ui',

wheels: [{

'Rating': { '5-star': '*****', '4–star': '****' ... },

'Genre': { 'action': 'Action', 'comedy': 'Comedy', ...},

'Screen': { '3d': '3D', 'imax': 'IMAX', 'wide': 'Wide' }

}]

});`

总结

在本章中，我们回顾了每个标准 HTML 表单组件，并了解了 jQuery Mobile 如何自动增强每个组件，以便在所有设备上提供统一的用户体验。

当我们回顾每个组件时，我们讨论了它的用法，并确定了它能很好解决的常见用例。我们还回顾了每个表单元素特有的 jQuery Mobile 数据属性，并查看了如何修改这些属性来配置和样式化表单的代码示例。此外，我们回顾了与每个表单组件相关联的插件，并了解了当用户需要更动态的体验时，我们如何利用插件 API 来动态地创建、增强和更新我们自己的组件。

最后，我们探索了 Mobiscroll 插件的特性，并了解了它如何为日期选择器、搜索过滤器或自定义列表提供优雅而灵活的界面。

在第五章中，我们的重点将从收集用户信息转移到呈现用户信息。特别是，我们将看到我们可以样式化和配置信息列表的许多方法。

五、列表视图

列表是一种流行的用户界面组件，因为它们使浏览体验变得非常简单和高效。列表也是一个非常灵活的组件，可以以多种方式进行样式化，并且可以很好地适应不同的屏幕尺寸。无论我们是在浏览邮件、联系人、音乐还是设置，这些应用都以略微不同的风格显示信息列表。从只包含文本的基本列表到包含图形和详细元数据的复杂列表，列表必须足够灵活以支持多种配置。幸运的是，jQuery Mobile 支持所有这些列表配置，甚至更多。在本章中，我们将探索在 jQuery Mobile 中设计和配置列表的细节。我们还将了解如何在列表中添加搜索过滤器。最后，我们将回顾列表视图插件 API，看看我们如何动态创建和更新列表的例子。

列出基础知识

当我们将data-role=”list”属性添加到列表元素中时，jQuery Mobile 会自动将任何本地 HTML 列表(

或
)增强到移动优化视图中。默认情况下，增强列表将显示边对边，如果我们的列表项包含链接，它们将显示为带有右对齐箭头图标的触摸友好按钮(参见图 5–1 和在清单 5–1 中产生它的代码片段)。默认情况下，列表将使用“c”色样(灰色)来设置样式。要应用替换主题，请将data-theme属性添加到列表元素或列表项中(
1. )。

   图 5–1。 基本列表

   清单 5–1。 基本列表(ch5/list-basic.html)

   `

   Action

   Adventure

   Comedy

   `

   插图列表

   插入列表不会边对边显示。相反，插入列表会自动包裹在圆角块中，并设置边距以增加间距。要创建一个插入列表，将data-inset="true"属性添加到列表元素中(参见图 5–2 和 5–3，以及清单 5–2 中的相关代码)。

   图 5–2。 插入列表(iOS)

   图 5–3。 插入列表(Windows Phone 7)

   清单 5–2。 插入列表(ch5/list-inset.html)

   `

   Contact Options

   Call

   ...

   `

   列出分隔符

   列表分隔线可以用作一组列表项的标题。例如，如果我们的应用有日历列表，我们可以选择按天对日历事件进行分组(参见 Figure 5–4)。列表分隔线也可以用作插入列表的标题。在前面的例子中，我们也用列表分隔线设置了插入列表的标题(参见图 5–2 和清单 5–2)。

   要创建列表分隔线，请向任何列表项添加data-role="list-divider"属性。列表分隔线的默认文本将左对齐。

   提示:在图 5–4 中，列表项同时包含左对齐和右对齐的文本。要右对齐文本，用包含 ui-li-aside 类的元素将它包装起来(参见清单 5–3)。

   默认情况下，列表分隔线将使用"b"样本(浅蓝色)的颜色。要应用另一个主题，请向 list 元素添加data-divider-theme="a"属性。

   图 5–4。 列表分隔符

   清单 5–3。 列表分隔符(ch5/list-dividers.html)

   `

   • Mon

     Feb 6 2012

     6 PM Birthday Party

     `

     带有缩略图和图标的列表

     我们可以在列表项的左侧添加缩略图，方法是在列表项中添加一个图像作为第一个子元素(参见图 5–5 和清单 5–4 中的相关代码)。该框架将图像缩放到 80 像素见方。

     图 5–5。 带缩略图的列表

     清单 5–4。 带缩略图列表(ch5/list-thumbnails.html)

     `

     Kung Fu Panda

     Rated: PG

     Runtime: 95 min.

     ...

     `

     我们也可以使用更小的图标来代替缩略图。要在列表项中使用标准的 16x16 像素图标，请将类别ui-li-icon添加到图像元素中(参见图 5–6 和清单 5–5 中的相关代码)。

     图 5–6。 带图标的列表

     清单 5–5。 带图标列表(ch5/list-icons.html)

     `

     User Reviews

     

     Go See It!

     This movie had a strong script and ...

     ...

     `

     拆分按钮列表

     在您需要支持每个列表项的多个操作的情况下，我们可以创建一个拆分按钮列表，其中有一个主要和次要按钮可供选择。例如，我们可以修改原来的电影列表示例来支持多个动作。我们的主按钮将继续显示电影细节，我们新的辅助按钮可用于购买门票(参见图 5–7)。

     图 5–7。 带拆分按钮的列表

     要创建一个拆分按钮，在列表项中添加一个二级链接，框架会添加一条垂直线来划分主要和二级动作(见清单 5–6)。

     清单 5–6。 带拆分按钮的列表(ch5/List-split-buttons . html)

     `

     Kung Fu Panda

     Rated: PG

     Runtime: 95 min.

     Buy Tickets

     ...

     `

     要设置所有次级按钮的图标，请将data-split-icon属性添加到列表元素，并将其值设置为标准图标(参见 Table 4–1)或自定义图标。默认情况下，辅助按钮将使用“b”样本(浅蓝色)的颜色。要应用替代主题，请向 list 元素添加 data-split-theme 属性。

     编号列表

     使用有序列表

     时将创建编号列表(参见图 5–8 和清单 5–7 中的相关代码)。

     图 5–8。 列表与数字

     清单 5–7。 带编号的列表(ch5/list-numbered.html)

     `

     The Amazing Spider-Man

     The Dark Knight Rises

     ...

     `

     默认情况下，框架会在每个列表项的左边添加数字索引。当显示可以按顺序排列的项目列表时，这些列表非常有用。例如，我们的“收视率最高的”电影视图是一个编号列表的理想候选，因为该序列可以快速关联哪些电影是收视率最高的。

     只读列表

     列表视图也可以显示数据的只读视图。用户界面看起来非常类似于我们之前展示的交互视图，除了右箭头图标-唯一的图像已经被移除，字体大小和填充稍微变小。要创建一个只读列表，只需删除我们在前面的例子中使用的锚标签(参见图 5–9 和清单 5–8 中的相关代码)。

     图 5–9。 带有只读项目的列表

     清单 5–8。 带只读项的列表(ch5/list-readonly.html)

     `

     Kung Fu Panda

     Rated: PG

     Runtime: 95 min.

     ...

     `

     列出徽章(数气泡)

     列表标记或计数气泡是突出显示的椭圆形，通常表示可供查看的新项目的数量。例如，徽章通常用在邮件应用中，用来指示您有多少未读邮件。在我们的示例中，徽章用于指示何时添加了关于电影评论的评论(参见 Figure 5–10)。徽章可以用来表达任何类型的元数据。

     图 5–10。 用徽章或数数气泡列表

     要创建一个徽章，用包含类ui-li-count的元素包装徽章的文本。默认情况下，徽章将使用“c”色样(灰色)进行设计。要应用一个替换主题，将data-count-theme属性添加到列表元素中(参见清单 5–9)。

     清单 5–9。 带徽章或计数气泡的列表(ch5/list-badges.html)

     • Comments

     • 

       `

       Thanks for the review. I'll check it out this weekend.

       1 day ago

       `

       用搜索栏过滤列表

       jQuery Mobile 有一个非常方便的过滤列表的客户端搜索特性。要创建搜索栏，将data-filter=”true”属性添加到列表中。然后，框架将在列表上方追加一个搜索过滤器，默认的占位符文本将显示单词“Filter items ...”(参见图 5–11 和清单 5–10 中的相关代码)。

       图 5–11。 列表过滤(未过滤)

       清单 5–10。 列表过滤(ch5/list-filter.html)

       `

       Mon Feb 6 2012

       6 PM Birthday Party

       `

       有两个选项可用于配置占位符文本:

       您可以通过在列表元素上添加data-filter-placeholder属性来配置占位符文本(参见清单 5–10)。

       或者，您可以通过绑定到mobileinit事件并将filterPlaceholder选项设置为任意自定义占位符值: $(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterPlaceholder="Search.."; });，将占位符文本全局设置为 jQuery Mobile 配置选项

       我们将在第八章“配置 jQuery Mobile”中更详细地讨论配置 jQuery Mobile。

       当您开始在搜索过滤器中输入文本时，客户端过滤器将只显示与通配符搜索匹配的项目(参见 Figure 5–12)。

       图 5–12。 【列表过滤(已过滤)】

       如果您需要更改默认搜索功能，有两个选项可以覆盖用于过滤的回调:

       首先，您可以通过绑定到mobileinit事件并将filterCallback选项设置为任何自定义搜索功能，将搜索功能作为 jQuery Mobile 配置选项进行全局更新。例如，这里我们将回调设置为使用“开始于”搜索:

       $(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){ // Use a "starts with" search return !(text.toLowerCase().indexOf( searchValue ) === 0); }; });

       回调函数有两个参数，text和searchValue。text参数包含列表项的文本，searchValue参数包含搜索过滤器的值。通配符搜索的默认行为编码为:

       return text.toLowerCase().indexOf( searchValue ) === -1;

       如果回调返回列表项的真值，它将从搜索结果中隐藏。

       或者，我们也可以在列表创建后动态配置我们的搜索功能。例如，在我们的页面加载之后，我们可以为特定的列表应用新的搜索行为:

       $("#calendar-list").listview('option', 'filterCallback', function( text, searchValue ) { // Use a "starts with" search return !(text.toLowerCase().indexOf( searchValue ) === 0); } );

       默认情况下，搜索框将从其父容器继承其主题。要配置一个替代主题，请将data-filter-theme属性添加到列表元素中。

       动态列表

       listview插件是自动增强列表的小部件。我们可以利用这个插件来动态地创建和更新我们的列表。有两个选项可用于创建动态列表。您可以使用标记驱动的方法动态创建列表，或者通过在listview插件上显式设置options(参见清单 5–11)。

       清单 5–11。 listview 插件示例(ch5/dynmic-lists.html)

       `// Create list with markup-driven options

       $( '

       Genres

       Action

       Comedy' )

       .insertAfter( "#list0" )

       .listview();

       // Create list with plugin-driven options

       $( '

       Genres

       Action

       Comedy' )

       .insertAfter( "#list1" )

       .listview({

       theme: "d",

       dividerTheme: "a",

       inset: true,

       });

       // Add a new item to an existing list

       $( "#list1" )

       .append('

       Drama')

       .listview(“refresh”);`

       列表选项

       listview插件有以下选项:

       **countTheme** *string*

       默认:“c”

       为徽章或计数气泡设置主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。该选项也作为数据属性公开:data-count-theme=”a”.

       $( “#list1” ).listview({ countTheme: "a" });

       **dividerTheme** *string*

       **default:** "b"

       为列表分隔线设置主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。该选项也作为数据属性公开:data-divider-theme=”a”.

       $( “#list1” ).listview({ dividerTheme: "a" });

       **initSelector** CSS selector string

       **default:** ":jqmData(role='listview')"

       initSelector 用于定义选择器(元素类型、数据角色等。)用于触发小部件插件的自动初始化。例如，默认选择器匹配的所有元素都将被listview插件增强。要覆盖这个选择器，绑定到mobileinit事件并根据需要更新选择器:

       $( document ).bind( "mobileinit", function(){

       $.mobile.listview.prototype.options.initSelector = "...";

       });

       **inset** *boolean*

       **default:** false

       当此选项设置为 true 时，将创建一个插入列表。默认情况下，将创建一个基本列表。该选项也作为数据属性公开:data-inset=”true”.

       $( “#list1” ).listview({ inset: true });

       **splitIcon** *string*

       **default:** "arrow-r"

       建立拆分按钮列表时设置次级按钮的图标。该选项也作为数据属性公开:data-split-icon=”star”.

       $( “#list1” ).listview({ splitIcon: "star" });

       **splitTheme** *string*

       **default:** "b"

       创建拆分按钮列表时，设置辅助按钮的主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。该选项也作为数据属性公开:data-split-theme=”a”.

       $( “#list1” ).listview({ splitTheme: "a" });

       **theme** *string*

       **default:** "c"

       设置列表的主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。该选项也作为数据属性公开:data-theme=”a”.

       $( “#list1” ).listview({ theme: "a" });

       列举方法

       listview插件有以下方法:

       refresh : 更新自定义列表。

       这将更新自定义列表以反映本地列表元素的值。例如，如果我们向现有列表中添加一个新项目，我们必须调用“refresh”来重建列表项目:

       ` // Add an item to an existing list and refresh the list item

       $( "#list1" )

       .append('

       Drama')

       **.listview(“refresh”); **

       // Add list items to a new list and refresh the entire list

       var markup = '

       item 1item 2';

       $( "#list2" )

       .append(markup)

       ** .listview( "refresh", true );**`

       列出事件

       listview插件支持以下事件:

       create: 创建列表时触发

       创建自定义列表时会触发此事件。它不用于创建自定义列表。

       $( '

       • Genres
       • Comedy
       ' ) .insertAfter( "#list1" ) .listview({ inset: true, create: function(event) { console.log( "Creating list..." ); } });

       总结

       在本章中，我们回顾了非常流行的列表视图组件。列表视图是常用的，因为它们使浏览体验非常简单和高效。jQuery Mobile 列表可以用许多独特的方式进行样式化和配置。从基本列表到带有图像、分割按钮、分隔线或徽章的列表，我们有许多配置选项可供选择。

       我们还看到了向列表中添加搜索过滤器是多么容易，并看到了如何在必要时覆盖默认搜索的例子。

       最后，我们回顾了listview插件 API，并看到了如何动态创建和更新列表的例子，以便为我们的用户提供更具交互性的体验。

       在下一章中，我们将探索另一个流行的用户界面组件，jQuery Mobile 灵活的网格布局。我们将看到如何使用网格来创建响应式设计，我们也将看看如何用 CSS 渐变来增强我们的用户界面。

       六、使用网格和 CSS 渐变格式化内容

       移动应用通常将网格用于需要灵活的内容，并将其分组。对于需要这种行为的设计，jQuery Mobile 的响应式网格是一个有用的解决方案。在本章中，我们将回顾 jQuery Mobile grid 组件的基础知识，并展示几个如何在网格中设计图标、图形和文本样式的例子。我们还将创建可折叠的内容块，并讨论它们与内联页面结构相比的优势。最后，我们将使用 CSS 渐变对我们的设计进行一些修饰，并讨论 CSS 渐变在性能和渐进增强方面的优势。

       网格布局

       jQuery Mobile 的网格可配置为支持两到五列的布局。从 HTML 的角度来看，网格是用 CSS 属性配置的div元素。网格是灵活的，会占用显示器的整个宽度。网格不包含边框、填充或边距，因此它们不会干扰其中包含的元素的样式。在我们看一个例子之前，让我们回顾一下标准的网格模板。

       网格模板

       当创建多列网格时，网格模板可能是一个有用的参考(参见清单 6–1)。

       清单 6–1。 网格模板

       `

       **

       `

       `

       Block A

       Block B

       `

       创建网格时，您需要创建具有两个或更多内部块的外部网格容器:

       Grid container: The grid container requires the CSS attribute ui-grid-* to configure the number of columns in the grid (see Table 6–1). For instance, to create a two-column grid we would set our grid CSS attribute to ui-grid-a.

       Blocks: The blocks are contained within the grid. The blocks require the CSS attribute ui-block-* to identify its column position (see Table 6–2). For instance, if we had a two-column grid, our first block would be styled with CSS attribute ui-block-a and the second block would be styled with CSS attribute ui-block-b.

       两列网格

       两列(50%，50%)网格显示在图 6–1 中，其相关代码显示在清单 6–2 中。

       图 6–1。 两列网格

       清单 6–2。 【两列网格】ch6/grid-2col.html

       `

       Block A

       Block B

       `

       外部网格配置了 CSS 网格属性ui-grid-a。接下来，我们添加两个内部块。第一块被分配了一个 CSS 值ui-block-a，第二列被分配了一个 CSS 值ui-block-b。如图 Figure 6–1 所示，各列等距，无边界，每个块中的文本将在必要时换行。作为一个额外的好处，jQuery Mobile 中的网格是灵活的，可以在不同的显示尺寸上进行相应的渲染(参见图 6–2)。

       图 6–2。 两列网格(风景)

       带有 CSS 增强功能的三列网格

       三列(33%，33%，33%)网格显示在图 6–3 中，其相关代码显示在清单 6–3 中。

       图 6–3。 带有 CSS 增强功能的三列网格

       清单 6–3。 【三列网格】ch6/grid-3col.html

       `

       Block A

       Block B

       Block C

       `

       除了网格的 CSS 属性被配置为支持三列(ui-grid-b)以及我们为第三列(ui-block-c)添加了一个额外的块之外，它与我们之前看到的两列示例非常相似。我们还用可主题化的类来设计块的样式，这些类可以添加到任何元素中，包括网格。在这个例子中，我们添加了ui-bar来应用 css 填充，添加了ui-bar-e来应用“e工具栏主题样本的背景渐变和字体样式。您可以使用a到e范围内的任何工具栏主题(ui-bar-*)来设计您的模块。最后，为了创建一致的块高度，我们还设计了内嵌高度(style="height:100px")。从视觉上看，这些改进用线性背景渐变设计了我们的网格，我们的块现在用边界分隔开了。

       带应用图标的四列网格

       四列(25%、25%、25%、25%)网格显示在图 6–4 中，其相关代码显示在清单 6–4 中。

       清单 6–4。 【四柱格】ch6/grid-4col.html

       `

       

       `

       除了网格的 CSS 属性被配置为支持四列(ui-grid-c，并且我们为第四列(ui-block-d添加了一个额外的块之外，它与三列示例类似。此外，为了平衡和一致性，我们将应用图标置于网格中央(style="text-align:center;)。视觉上，网格有均匀分布的应用图标，很像一个应用跳板。

       图 6–4。 带应用图标的四列网格

       带有表情图标的五列网格

       五列(20%，20%，20%，20%，20%)网格显示在图 6–5 中，其相关代码显示在清单 6–5 中。

       清单 6–5。 【五列网格】ch6/grid-5col.html

       `

       

       

       

       

       

       `

       这个例子非常类似于我们之前看到的四列网格，除了网格的 CSS 属性被配置为支持五列(ui-grid-d)并且我们已经用为第五列(ui-block-e)添加了一个额外的块。每个区块包含一个独特的表情图标。 1

       图 6–5。 五列网格

       注意:表情图标是图像的一个很好的替代品，因为它们消耗零 HTTP 请求，并且它们的有效载荷只是几个字符的文本。不幸的是，表情符号图标目前仅在 iOS 中受支持。

       1 见[pukupi.com/post/1964](http://pukupi.com/post/1964).

       多行网格

       到目前为止，我们只看到了单行网格。要添加额外的行，只需为每个连续的行重复第一行的块模式(参见清单 6–6 中的图 6–6 及其相关代码)。生成的网格包含五列和三行。列的间距相等，可以在块组件上手动调整行高。

       图 6–6。 多行网格

       清单 6–6。 【多行网格】ch6/grid-multi-row.html

       `

       

       

       

       

       `

       `

       

       

       

       

       

       `

       不均匀网格

       到目前为止，所示的每个网格示例都有均匀间隔的列，因为默认情况下 jQuery Mobile 会均匀间隔所有的列。但是，如果您需要定制列宽，我们可以在 CSS 中调整宽度。例如，我们可以通过设置每个块的自定义宽度，将两列网格的默认宽度修改为 25/75%(参见图 6–7 及其在清单 6–7 中的相关代码)。因此，我们的网格可以修改，以支持广泛的替代维度。

       图 6–7。 不均匀网格

       清单 6–7。 【网格不均匀】ch6/grid-uneven.html

       ``

       跳板

       跳板是应用网格布局的理想选择。在下面的例子中，我们将看到两种类型的跳板。首先，我们会看到一个带有应用图标的跳板(见图 6–8)，其次我们会看到一个带有雕刻图标的跳板(见图 6–9)。

       图 6–8。 带 app 图标的跳板

       图 6–9。 带有浮雕图标的跳板

       你准备好接受跳板挑战了吗？如果你是，我鼓励你创造一个和这两个人物非常相似的跳板。从网格的角度来看，这两个例子的配置是相同的。然而，带有 Glyphish 图标的跳板(见清单 6–9)的风格与带有应用图标的跳板(见清单 6–8)略有不同，以调整其不均匀的图标高度。

       清单 6–8。 带 app 图标的跳板(ch6/springboard1.html )

       `

       App A

       …

       `

       清单 6–9。 带有雕刻图标的跳板(ch6/springboard2.html )

       `

       Now Playing

       …

       `

       可折叠的内容块

       你有没有发现自己反复滚动来浏览整个手机页面的内容？虽然这对于你的手指来说可能是一个很好的锻炼，但当用户必须重复滚动时，这可能是一个麻烦的用户体验。如果您正在寻找一个更有用的替代方案，您可能需要考虑将您的内容分组到可折叠的内容块中。

       提示:与内嵌页面结构相比，可折叠内容块有几个优点。首先，我们可以将内容折叠成分段的组，使它们在单个视图中可见(参见图 6–10)。其次，我们的用户会更有效率，因为我们已经从用户体验中消除了滚动。

       图 6–10。 内容块(所有块折叠)

       创建可折叠内容块所需的标记如清单 6–10 所示。

       清单 6–10。ch6/collapsible-block.html可折叠内容块

       `

       Wireless

        Notifications

        Location Services

       data-theme="a" data-content-theme="b">

       Applications

        Faceoff

        LinkedOut

        Netflicks

       `

       创建可折叠块需要两个元素:

       Create a container and add the data-role="collapsible" attribute. Optionally, you may configure the container to be collapsed or expanded by adding the data-collapsed attribute. By default, a collapsible section will be shown expanded (data-collapsed="false"). To initially show the section as a collapsed block, add data-collapsed="true" to the container. For instance, if we launch the code in Listing 6–10, the initial view will appear as Figure 6–11. In the code listing, we have explicitly collapsed all content blocks except for the “Applications” section which will expand by default.

       图 6–11。 内容块(一个块展开)

       在容器中，添加任何 header 元素(H1-H6).框架会将 header 设计成看起来像一个可点击的按钮，带有一个左对齐的加号或减号图标，表示它是可扩展的。

       在标题之后，您可以向可折叠块添加任何 HTML 标记。框架将把这个标记包装在容器中，当点击标题时，容器将展开或折叠。你可以通过在可折叠容器中添加data-theme和data-content-theme属性来分别设置可折叠块及其相关按钮的主题(参见清单 6–10)。

       注意:一个可折叠块允许你一次展开或折叠多个块(见图 6–12)。在下一节中，我们将看到在处理可折叠集合时这是不允许的。

       图 6–12。 内容块(所有块展开)

       可折叠套

       可折叠组件(参见图 6–13)与可折叠积木相似，只是它们的可折叠部分在视觉上组合在一起，并且一次只能展开一个部分，这使得可折叠组件看起来像手风琴(参见图 6–14)。

       图 6–13。 内容设置(折叠)

       图 6–14。 内容设置(扩展)

       当打开集合中的新节时，以前打开的任何节都将自动折叠。

       可折叠集合的标记与我们之前在构建可折叠块时看到的标记相同。然而，为了创建手风琴式的行为和分组，我们需要添加一个带有data-role="collapsible-set"的父包装器，如清单 6–11 所示。

       清单 6–11。 可折叠设置(ch6/collapsible-set.html)

       `

       data-theme="a" data-content-theme="b">

       Wireless

        Notifications

        Location Services

       Applications

        Faceoff

        LinkedOut

        Netflicks

       ...

       `

       使用 CSS 渐变的样式

       想给你的移动用户界面添加一点润色吗？尝试在通常使用背景图像的地方使用 CSS 渐变。CSS 渐变为图像提供了一个高性能的替代品，它们在灵活的布局中工作得非常好，并且在不受支持的浏览器中优雅地退化。例如，我们可以将一个原始的跳板(见图 6–15)改造成一个更加优雅的展示(见图 6–16 和图 6–17)并添加渐变。

       图 6–15。 没有 CSS 渐变的跳板

       图 6–16。 带有 CSS 渐变的跳板(iOS)

       图 6–17。 带有 CSS 渐变的跳板(安卓)

       任何使用背景图像的地方都可以使用渐变。例如，它们最常用于设计标题、内容和按钮的背景。此外，有两种类型的 CSS 渐变:线性和径向。线性渐变是两者中比较简单的，如果你不太熟悉它们的语法，CSS 渐变生成器 2 可以帮助你开始。产生背景线性渐变的 CSS 如清单 6–12 所示。

       清单 6–12。 背景渐变

       **.background-gradient** { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.22, rgb(92,92,92)), color-stop(0.57, rgb(158,153,158)),

       ` color-stop(0.84, rgb(92,92,92))

       );

       }

       `

       2 见[www.westciv.com/tools/gradients/](http://www.westciv.com/tools/gradients/)或[gradients.glrzad.com/](http://gradients.glrzad.com/).

       虽然这个 CSS 渐变是针对最流行的 WebKit 布局引擎(参见图 6–18)的，但是您可以通过包含特定于供应商的前缀来添加对其他浏览器的支持。

       图 6–18。 Webkit 用法

       例如，为了在 Mozilla 浏览器上渲染我们的渐变，我们将添加带有-moz-厂商前缀的版本(参见清单 6–13)。

       清单 6–13。 支持 Mozilla 的背景渐变

       .background-gradient { background-image: **-webkit-gradient**( linear, left bottom, left top, color-stop(0.22, rgb(92,92,92)), color-stop(0.57, rgb(158,153,158)), color-stop(0.84, rgb(92,92,92)) ); background-image: **-moz-linear-gradient**( 90deg, rgb(92,92,92), rgb(158,153,158), rgb(92,92,92)); }

       页眉的渐变实际上是三个独立渐变的叠加。包括一个线性梯度和两个径向梯度。径向渐变创建圆形渐变效果。创建标题渐变的代码如清单 6–14 所示。

       清单 6–14。 跳板坡度

       `.header-gradient {

       background-image:

       -webkit-gradient(

       linear, left top, left bottom,

       from( rgba( 068,213,254,0 )),

       color-stop(.43, rgba( 068,213,254,0 )),

       to( rgba( 068,213,254,1 ))),

       -webkit-gradient( radial,

       50% 700, 690,

       50% 700, 689,

       from( rgba( 049,123,220,0 )),

       to( rgba( 049,123,220,1 ))),

       -webkit-gradient(

       radial,

       20 -43, 60,

       20 -43, 40,

       from( rgba( 125,170,231,1 )),

       to( rgba( 230,238,250,1 )));

       }

       `

       总结

       在这一章中，我们回顾了 jQuery Mobile 基于网格的设计的有用性，并看到了我们如何快速地在网格模板中设计内容(参见清单 6–1)。jQuery Mobile grid 是需要响应和分组的内容的理想解决方案。我们的网格可以包含任何内容，我们看到了几个使用文本、图标和图形的网格示例。

       我们还回顾了可折叠的内容块，并讨论了它们与内联页面结构相比的优势。可折叠块可以是一种有效的可用性模式，因为它们有助于在单一视图中显示所有内容，并且有助于消除用户体验中的滚动。因此，用户对应用的体验将更加高效。

       最后，我们看到了如何用 CSS 渐变来润色我们的设计。CSS 渐变是图像的一种高性能替代品，它们在灵活的布局中工作得非常好，在不受支持的浏览器中会逐渐退化。

       在第七章中，我们将继续我们的布局设计之路，仔细看看 jQuery Mobile 的主题框架。

       七、创造主题化的设计

       jQuery Mobile 有一个内置的主题框架，允许设计人员快速定制或重新设计他们的用户界面。主题框架利用了 CSS3 的许多特性，这有助于构建更优雅、更具响应性的设计。例如，通过利用 CSS3，主题框架能够应用圆角、阴影和渐变，而不必依赖于图像。这是一个性能优势，因为该框架可以提供更有吸引力的接口，而没有额外的 HTTP 请求开销。本质上，我们有一个轻量级的主题框架，可以在所有浏览器上呈现统一的设计。

       在这一章中，我们将讨论主题框架的基础，并回顾 jQuery Mobile 中包含的默认主题。我们还将探索将主题分配给组件的三种方式。虽然所有的组件都可以使用data-theme属性显式地设置它们的主题，但是大多数组件也有默认的主题，并且也可以从父容器继承它们的主题。我们将讨论它们的优点，看看每一个的例子，并讨论主题应用于组件的优先级。

       最后，我们将看看如何创建我们自己的自定义主题。如果您需要创建更丰富的设计，或者如果您需要创建与您的公司品牌紧密匹配的设计，那么创建自定义主题将是必要的。创建自定义主题有两个选项，我们将一步步地看每一个的例子。第一种选择是手动方法，它让设计者完全控制他们的布局；第二种是使用主题滚轮 1 ，这是一种基于网络的工具，可以自动完成创建新主题的过程。

       1 见[jquerymobile.com/themeroller](http://jquerymobile.com/themeroller)

       主题基础知识

       在很多例子中，我们已经看到了如何使用data-theme属性将替换主题应用到页面容器(页面、页眉、内容、页脚)和表单元素中。例如，我们可以使用一个没有主题的页面(见图 7–1)并用一个不同的标题和列表主题(见图 7–2)重新设计它的样式，并简单地添加data-theme属性(见清单 7–1)。

       图 7–1。 带有默认主题的列表

       图 7–2。 列表与备选主题

       清单 7–1。 数据-主题属性(ch7/theme-list2.html)

       `

       jMovies

       Now Playing

       `

       主题和样本

       jQuery Mobile CSS 文件总是我们在 head 元素中导入的第一个资产(参见清单 7–2)。该文件包含 jQuery Mobile 应用的默认结构和主题。花一点时间，用您最喜欢的编辑器探索这个文件的内容。

       清单 7–2。 jQuery Mobile CSS 导入

       `

       ** **

       `

       jQuery Mobile CSS 文档分为两个部分:主题部分和结构部分。

       Theme – The top half of the document contains the default theme settings. The theme settings manage the visual styling (backgrounds, borders, color, font, shadows) for all components. When setting the data-theme attribute, we are able to choose from five different options (a, b, c, d, e). These letters (a-e) are technically referred to as swatches. As you were reviewing the jQuery Mobile CSS file you may have noticed that the first swatch to appear within the CSS file was swatch “a” (see Listing 7–3).

       清单 7–3。 jQuery Mobile CSS 样本“a”(部分列表)

       /* **A** ---------------------------------------------------------------------*/ .ui-bar-**a** { border: 1px solid #2A2A2A; background: #111111; color: #ffffff; font-weight: bold; text-shadow: 0 -1px 1px #000000; ... background-image: linear-gradient(top, #3c3c3c, #111); } .ui-body-**a** { border: 1px solid #2A2A2A; background: #222222; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal; background-image**:** linear-gradient(top, #666**,** #222**);** } ...

       主题部分分为以下几个小节:

       样本——默认情况下，jQuery Mobile 有五个样本可供选择(a、b、c、d、e ),您可以根据需要添加任意数量的独特样本。样本允许我们为组件配置独特的背景、边框、颜色、字体和阴影。为简单起见，新样本的命名约定是基于字母的(a-z)。但是，样本名称的长度没有限制。我们将在本章的后面看到创建我们自己的自定义色板的例子。

       Global theme settings – Global theme settings are configured after the swatches. These settings add visual styling enhancements to buttons, such as rounded corners, icons, overlays, and shadows. Since these settings are global, they will be inherited by all swatch configurations (see Listing 7–4).

       清单 7–4。【jQuery 手机全球主题造型(部分上市)

       /* Active class used as the "on" state across all themes -----------------------------------------------------------------------*/ .ui-btn-active { border: 1px solid #155678; background: #4596ce; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #145072; text-decoration: none; ... }

       Structure – The latter half of the jQuery Mobile CSS file contains structure styling that primarily includes positioning, padding, margin, height, and width settings (see Listing 7–5).

       清单 7–5。 jQuery Mobile 结构造型(部分清单)

       `/* some unsets - more probably needed */

       .ui-mobile, .ui-mobile body { height: 100%; }

       .ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }

       .ui-mobile a img, .ui-mobile fieldset { border: 0; }

       ...

       .ui-checkbox, .ui-radio {

       position:relative; margin: .2em 0 .5em; z-index: 1;

       }

       .ui-checkbox .ui-btn, .ui-radio .ui-btn {

       margin: 0; text-align: left; z-index: 2;

       }`

       现在我们已经了解了 jQuery Mobile 的主 CSS 文件，让我们更仔细地看看 jQuery Mobile 包含的五个样本，看看它们是如何出现在几个不同的组件中的(参见 Figure 7–3–7–6)。

       图 7–3。 格子色板

       图 7–4。 列出色板

       图 7–5。 纽扣布样

       图 7–6。 表单字段样本

       为了在所有组件中保持样例的样式一致，以下视觉优先级约定用于每个样例:

       “a”(黑色)视觉优先级最高。

       “b”(蓝色)是二级水平。

       " c" -(灰色)基线。

       “d”-(白/灰)一个交替的二级水平。

       “e”-(黄色)强调色。

       主题默认值

       如果您没有向页面添加data-theme属性，jQuery Mobile 将为所有页面容器和表单元素应用默认主题(参见 Table 7–1)。

       例如，如果我们创建一个基本的 jQuery Mobile 页面，而没有显式地设置它的主题，那么我们的元素将回到它们的默认主题或者继承它们的父容器的主题。在 Figure 7–7 中，默认主题应用于页面、页眉、页脚、内容和列表元素，而表单元素继承了它们的主题。

       图 7–7。 带有默认和继承主题的页面

       通过参考我们的“组件默认主题”表(参见表 7–1，我们可以确定每个组件将应用什么默认主题。让我们仔细看看内容和按钮组件。默认情况下，内容组件将应用data-theme=”c”。但是，按钮组件没有默认主题，因此它将从其父容器继承默认主题。在清单 7–6 中，按钮的父节点是内容容器；因此，按钮将继承主题“c”。此外，如果按钮在头部容器中，它将继承头部容器的主题。

       清单 7–6。 带有默认主题的页面(ch7/theme-defaults.html)

       `

       default = "a"

       default = "c"

       default = "b"

       default = "c"

       default = "c"

       inherits "c":

       inherits "c":

       Off

       On

       Button (inherits "c")

       default = "a"

       `

       主题传承

       组件也可以继承其父容器的主题。主题继承在两个方面是有益的。首先，它使设计者的设计过程更加有效，因为我们可以快速地在一个高层次(页面容器)设置一个主题，这个主题将级联到所有子组件，节省了宝贵的时间。其次，它使组件在整个应用中保持一致的风格。例如，在清单 7–7 中，我们用data-theme=”e”设计了页面容器。因此，内容主题从其父容器继承了“e”主题(参见图 7–8)。

       清单 7–7。 主题继承(ch7/theme-inheritance.html)

       `

       No inheritance

       Inherits "e"

       No inheritance

       No inheritance

       No inheritance

       Inherits "e"

       Inherits "e"

       Off

       On

       Button (Inherits "e")

       No inheritance

       ` 

       图 7–8。 主题传承

       注意:不是所有的组件都会继承其父容器的主题。参考表 7–1 中的“继承父主题”一栏，了解不会继承父主题的组件列表。

       我们还可以显式地设置单个组件的主题。这给了设计者在设计网站时的灵活性，可以帮助构建更丰富的设计(见图 7–9 和清单 7–8 中的相关代码)。

       图 7–9。 显性主题

       清单 7–8。 显性主题(ch7/theme-explicit.html)

       `

       Theme = "b"

       Theme = "d"

       Theme = "e"

       Inherits "e" from list

       • Theme = "b"

         Theme "d"

         Theme "b"

         Off

         On

         Button

         Theme = "b"

         `

         主题优先顺序

         主题按以下优先顺序应用于组件:

         显式主题——如果在任何组件上显式设置了data-theme属性，该主题将覆盖任何继承的或默认的主题。

         继承的主题—继承的主题将覆盖所有默认主题。例如，在清单 7–7 中，内容容器从它的页面容器继承了主题“e ”,而页面容器覆盖了它的默认主题“c”。关于可能继承其主题的组件列表，请参考表 7–1 中的“继承父主题”栏。

         Default themes—Default themes are applied when no themes are explicitly set or inherited. For a listing of default themes by component, refer to the “Default Theme” column in Table 7–1.

         提示:默认情况下，内容容器的最小高度只会拉伸里面组件的高度。当内容的主题与其页面容器的主题不同时，这就是一个问题(参见图 7–10)。我们可以用 CSS 来解决这个问题。例如，我们可以将内容容器的最小高度设置为屏幕的高度(参见图 7–11):

         ui-content { min-height:inherit; }

         图 7–10。 内容高度不到 100%

         图 7–11。 内容高度 100% (ch7/min-height.html)

         自定义主题

         jQuery Mobile 主题框架允许设计者快速定制或重新设计他们的用户界面。在本节中，我们将了解如何手动创建我们自己的自定义色板。如前所述，默认的 jQuery Mobile CSS 文档分为两个部分:主题部分和结构部分。在本练习中，我们将创建一个自定义样本，用于潜在危险动作的参考。例如，一个通用的用户体验指南鼓励开发者用红色突出显示控制潜在有害行为的按钮。在 jQuery Mobile 中，我们可以创建一个定制的样本来管理图标和/或按钮的视觉样式(背景、边框、颜色、字体、阴影),从而驱动我们的冒险行为。

         要手动创建自定义样本，必须执行以下步骤:

         First, create a separate CSS file for the custom theme (css/theme/custom-theme.css). This keeps the custom additions separate from the main jQuery Mobile CSS and will simplify future upgrades.

         提示:如果您计划使用自定义主题来设计整个 jQuery Mobile 应用，建议使用 jQuery Mobile 下载网站上的纯结构 CSS 文件。对于不需要默认主题的应用来说，这是一个轻量级的选择，它简化了定制主题的管理(参见清单 7–9)。

         清单 7–9。 jQuery Mobile 的无默认主题的结构文件

         `

         Custom Theme

         ** **

         ** **

         `

         查找要作为基线参考的现有样本。在研究了现有的样本后，复制一个与你的新样本风格非常相似的样本。这将有助于最大限度地减少创建新样本所需的修改次数。对于我的新样本，我复制了“e”样本作为我的基线，因为“e”是一个重音样本，我们的潜在危险动作的新样本也可以划分到重音类别中。

         Next, copy the baseline swatch and paste it into the custom-theme.css file. Then, rename the swatch so it is associated to a unique letter (f-z). For example, replace all CSS suffixes with “-e” to “-v” (see Listing 7–10). The new swatch can now be referenced with data-theme=”v” for any components that perform dangerous actions.

         清单 7–10。 仿照样本“e”定制“v”样本(ch7/CSS/theme/Custom-theme 9781430239666 . CSS)

         /* **V** ----------------------------------------------------------------------*/ .ui-bar**-v** { font-weight**:** bold**;** border**:** 1px solid #999**;** background**:** #dedede**;** color**:** #000**;** text-shadow**:** 0 1px 0px #fff**;** ** …** } .ui-btn-up**-v** { border: 1px solid #999; background: #e79696; color: #fff; text-shadow: 0 1px 0px #fff; ... }

         Now the exciting task of updating the visual CSS settings (backgrounds, borders, color, font, and shadows) for our new swatch. For the new “v” swatch, I updated all buttons to have a red gradient background with white text (see Listing 7–11).

         清单 7–11。 用红色背景渐变和白色文字更新“v”色板按钮(ch7/CSS/theme/custom-theme 9781430239666 . CSS)

         /* V ----------------------------------------------------------------------*/ .ui-btn-up-v { border: 1px solid #999; background: **#e79696;** color: **#fff;** text-shadow: 0 1px 0px #fff; **background-image: -webkit-gradient(** ** linear, 0% 0%, 0% 100%, from(#E79696), to(#ce2021),** ** color-stop(.4,#E79696)** ** );** ** background-image: -webkit-linear-gradient(** ** 0% 56% 90deg,#CE2021, #E79696, #E79696 100%** ** );** ** background-image: -moz-linear-gradient(** ** 0% 56% 90deg,#CE2021, #E79696, #E79696 100%** ** );** ... }

         接下来，我们需要将新的“v”样本与一个实际页面集成起来进行测试。我创建了两个页面来帮助测试新的“v”样本。在第一页，我想看看新的样本如何出现在一个只有图标的按钮上。在这个测试中，我创建了一个分割按钮列表，用二级按钮作为我们的删除图标，并用我们新的“v”样本设计二级按钮的样式(见图 7–12 和清单 7–12 中的相关代码)。

         2 见[jquerymobile.com/download](http://jquerymobile.com/download).

         图 7–12。 红色图标背景为潜在危险动作

         清单 7–12。 带“v”形样本的拆分按钮(ch7/custom1.html)

         `

         ** **

         ** **

         ** ...**

         Kung Fu Panda

         Rated: PG

         Runtime: 95 min.

         Delete**

         ...`

         我还在主 jQuery Mobile CSS 文件之前导入了新的 custom-theme.css 文件。对于我们的第二个测试，我想在一个删除按钮上应用我们新的“v”样本。对于这个测试，我创建了一个对话框来确认潜在的危险动作，并用我们新的红色渐变风格主题设计了删除按钮(参见图 7–13 和清单 7–13 中的相关代码)。

         图 7–13。 红色删除按钮用于删除动作

         清单 7–13。 带“v”的删除按钮样本(ch7/custom1.html)

         `

         Are you sure?

         Delete

         Cancel

         `

         最后，当您创建新的样本时，在颜色编码的样式指南中记录您的自定义样式会很有帮助，这样组织中的所有设计人员和开发人员都会熟悉它们的用法和样式。

         提示: CSS 渐变生成器 3 是可以自动生成你的渐变语法并帮助简化步骤 4 的工具。

         泰晤士报

         ThemeRoller 4 是一个基于 web 的工具，它帮助自动为 jQuery Mobile 生成新的基于 CSS 的主题。这是一个非常有用的工具，因为它允许您在左窗格中更新配色方案，并在右窗格中预览实际 jQuery Mobile 布局的结果(参见图 7–14)。

         图 7–14。 主题人物

         3 见[www.westciv.com/tools/gradients/](http://www.westciv.com/tools/gradients/)或[gradients.glrzad.com/](http://gradients.glrzad.com/).

         4 见[jquerymobile.com/themeroller](http://jquerymobile.com/themeroller).

         样本和全局设置

         在左侧窗格中出现的“全局”选项卡下，您可以快速调整全局应用于所有色板的 CSS 属性。在这里，您可以调整字体系列、活动状态颜色、拐角半径、图标和阴影(参见图 7–15)。

         图 7–15。 全局主题设置

         “全局”选项卡旁边是样本特定选项卡(a-z)。您可以在此添加、编辑或删除主题中的样本(参见图 7–15)。

         预览检查器和快速观看栏

         为了更容易地构建自定义主题，预览面板顶部有两个独特的工具:预览检查器和快速观看栏。

         预览检查器是一个可以“开”或“关”的开关(见图 7–16)。打开开关后，单击预览窗格中的元素将自动在左窗格中显示其可编辑属性。当您需要快速编辑样式时，这将是一个宝贵的时间节省。

         图 7–16。 预览检查器和快速观看栏

         快速观察条是出现在检查器右侧的一系列颜色(参见 Figure 7–16)。这是一个强大的工具，允许您将任何颜色拖放到预览页面中的元素或左窗格中的颜色属性上。快速观察栏下面是两个滑块，用于调整调色板的亮度和饱和度。此外，最近选择的颜色将显示在色谱的右侧，以便快速重复使用。

         Adobe Kuler 集成

         当你需要从头开始创建一个调色板时，这可能是一个挑战。为了帮助简化这个过程，ThemeRoller 内置了 Adobe 的 Kuler 1 集成(参见图 7–17)。

         图 7–17。 Adobe 的 Kuler App

         Kuler 是一个允许人们创建、分享和评价调色板的网站。要查看 Kuler 中可用的调色板，请单击出现在快速观察栏上方的“Adobe Kuler”链接。当 Kuler 应用打开时，搜索过滤器会出现在左侧窗格中，允许您按最新、热门、评级或自定义搜索进行过滤。当您找到感兴趣的颜色时，只需将该颜色拖放到预览窗格中的元素上。

         开始使用

         为了便于比较，我将在 ThemeRoller 中创建一个红色的强调色板，看看这种体验与我们在上一节中创建的手动色板相比如何。在本练习中，我将使用新的红色强调色板覆盖 jQuery Mobile 的默认“e”色板。在 ThemeRoller 中，要更新现有主题，需要执行以下步骤:

         In ThemeRoller, import an existing theme by clicking the “Import” link in the upper left corner (see Figure 7–18). For this exercise I am going to import and modify jQuery Mobile's default theme.

         图 7–18。 导入已有的主题

         导入主题后，确定要修改的样本。对于这一步，我将修改默认的“e”样本。

         接下来，为我们的红色强调样本找到一个合适的基色。我们可以在快速观察栏或 Kuler 集成工具中找到合适的红色。

         找到合适的基色后，我们现在可以用选择的颜色更新预览窗格中的元素。例如，我将用深红色强调色来设计标题和所有元素的样式。

         在预览窗格中，进行任何必要的调整。例如，您可能想要稍微调整颜色或添加带有背景渐变的微妙效果。正如所料，ThemeRoller 使编辑和预览过程比手动方式更有效！

         After you are comfortable with the layout of the new theme, you can download the CSS of the theme by clicking on the “Download Theme” link in the upper left corner of ThemeRoller (see Figure 7–19).

         图 7–19。 下载主题

         We can now begin referencing the new theme in our application (see Listing 7–14 and its related screenshot in Figure 7–20). Again, to help simplify the management of the custom themes it is recommended to load the structure file and your custom themes separately.

         清单 7–14。 ThemeRoller 自定义主题导入(ch7/custom2.html)

         `

         Custom Theme

         ** **

         ** **

         Are you sure?

         Delete

         Cancel

         `

         5 见[kuler.adobe.com](http://kuler.adobe.com).

         图 7–20。滚轮的红色删除按钮

         总结

         jQuery Mobile 主题框架是一个面向对象的 CSS3 框架，它是轻量级的、可定制的，可以跨所有浏览器呈现统一的设计。在这一章中，我们讨论了主题框架的基础，并回顾了 jQuery Mobile 中包含的五个样例。

         我们还回顾了将主题分配给组件的三种方式。虽然所有组件都可以使用data-theme属性显式设置它们的主题，但是大多数组件也有默认主题，并且可以从父容器继承它们的主题。我们看到了每个主题的例子，并回顾了主题应用于组件的优先顺序。

         最后，我们看到了如何创建我们自己的定制样本。无论你是需要创建一个更丰富的设计，还是需要创建一个与你的公司品牌紧密匹配的设计，主题框架对于所有的需求都足够灵活。我们回顾了可用于创建自定义样本的两个选项，并查看了每个选项的分步示例。我们看到手动方式让我们完全控制了我们的布局，jQuery Mobile 的新 ThemeRoller 提供了一个更有效、更直观的工作环境。

         在下一章中，我们将深入了解 jQuery Mobile API。我们将学习如何配置 jQuery Mobile，还将回顾 API 的核心方法、事件、属性和数据属性。

         八、jQuery Mobile API

         所有编写良好的框架都允许开发人员扩展和覆盖默认的配置设置。此外，它们提供了方便的方法来帮助简化您的代码。jQuery Mobile 包括一个相当广泛的 API，它公开了这些便利的特性。首先，我们将看看如何配置 jQuery Mobile。我们将回顾 jQuery Mobile 中的每个可配置特性，突出显示其默认设置，并展示 API 如何允许您配置每个选项。然后，我们将探索 jQuery Mobile 公开的最流行的方法、页面事件和属性。当您需要以编程方式更新移动 Web 应用时，这些 API 特性非常有用。最后，我们将查看一个列出所有 jQuery Mobile 数据属性的排序表。对于每个属性，我们将包括其增强组件的简短描述、示例和图表。

         配置 jQuery Mobile

         当 jQuery Mobile 初始化时，它会在document对象上触发一个mobileinit事件。您可以绑定到mobileinit事件，并将覆盖应用到 jQuery Mobile 的($.mobile)默认配置设置。此外，您可以用附加的行为和属性来扩展 jQuery Mobile。例如，有两种配置 jQuery Mobile 的方法，如下例所示。您可以通过 jQuery 的extend方法或者单独覆盖这些属性。

         例子:

         `// Configure properties via jQuery's extend method

         \(( document ).bind( "mobileinit", function(){

         \).extend( $.mobile, {

         // Override loading message

         loadingMessage: "Loading...",

         // Override default transition from “slide” to “pop”

         defaultTransition: "pop"

         });

         }); // Configure properties individually

         \(( document ).bind( "mobileinit", function(){

         \).mobile.loadingMessage = "Initializing";

         $.mobile.defaultTransition = "slideup";

         });`

         自定义脚本放置

         由于执行 jQuery Mobile 时会立即触发mobileinit,所以您需要将您的定制脚本放在 jQuery Mobile JavaScript 文件之前。

         举例:

         `

         **

         然后，我们导入 Google Maps API: **** `

         `

         最后一步是运行和测试应用。在 Eclipse 中，单击运行菜单，选择运行方式，然后选择 Android 应用。这将编译应用，并在 Android 模拟器中启动它。如果您从第十章源代码中导入了 jQuery Mobile 项目，那么最初出现的屏幕将是跳板(参见图 10–14)。

         图 10–14。 从 Eclipse 运行 PhoneGap 时的初始屏幕

         如果你还记得我们的 iOS 示例，我们在所有屏幕上都全局启用了后退按钮，因为后退按钮通常固定在 iOS 应用的标题中。由于 Android 有一个基于硬件的后退按钮，所以没有必要启用我们的后退按钮(参见图 10–15)。

         图 10–15。 安卓系统不需要后退按钮

         提示:在单独的文件中提取特定于平台的依赖关系。这种分离将有助于简化跨平台的不同配置的管理。例如，为每个支持的平台创建一个单独的配置文件:custom-ios.js，custom-android.js。

         既然我们已经能够将我们的 jQuery Mobile 应用部署到原生 Android 平台，我们还需要定制默认的应用图标(参见图 10–16)。

         图 10–16。Android 中 PhoneGap 的默认应用图标

         Android 应用图标存储在项目的/res/drawable-*目录中，图像可用于高、中、低密度(参见图 10–17)。

         图 10–17。 安卓的应用图标图片

         这就完成了从安装 PhoneGap 到在原生 Android 平台上运行我们的 jQuery Mobile 应用的整个过程。当你的应用准备生产时，最后一步是将你的 Android 应用发布到 Android Market。将你的应用发布到 Android Market 的完整说明可以在 Android 的开发指南中找到。 8

         开放应用市场

         开放应用市场 9 是一个 HTML5 移动应用的应用商店，允许我们像本地应用商店一样搜索、购买、安装或评价 HTML5 移动应用(参见图 10–18)。

         8 见[developer.android.com/guide/publishing/publishing.html](http://developer.android.com/guide/publishing/publishing.html).

         9 见[openappmkt.com/](http://openappmkt.com).

         图 10–18。 开放 App 市场

         要开始使用 Open App Market，我们必须首先将它安装到我们的设备上。目前，开放的应用市场对 iOS 和 Android 用户开放。要安装 Open App Market，请使用您的 iOS 或 Android 设备扫描图 10–19 中的二维码。

         图 10–19:二维码安装打开 App 市场。或者，你可以去 openappmkt.com，点击他们网站顶部的安装链接。

         安装应用后，您可以按类别或受欢迎程度搜索移动网络应用。当你发现一个你感兴趣的免费或付费应用时，下载它，该应用将被保存在你的主屏幕上，就像来自原生应用商店的应用一样。例如，图 10–20 显示了开放应用市场应用以及从开放应用市场下载的 Twitter 和 YouTube 应用。

         图 10–20。 开放应用市场下载应用的方式与本地商店相同

         客户端设备 API

         如果你需要建立一个移动应用，它必须集成设备特定的功能，如相机、联系人或网络，你会选择什么移动技术？今天，我们的选择有限。我们必须要么使用本地平台，要么使用 PhoneGap 这样的混合技术。如果所有的网络浏览器都支持这些特定于设备的特性，那就太理想了。虽然目前没有浏览器支持这些特性，但是 W3C 目前正在为大多数主要的客户端设备 API10实现工作草案。最值得注意的客户端设备 API 包括对相机、网络、日历、联系人、消息和电池信息的访问。虽然现在预测浏览器何时支持这些功能还为时过早，但至少进展已经很顺利了。

         10 见[www.w3.org/2009/dap/.](http://www.w3.org/2009/dap)

         总结

         在本章中，我们看到了如何使用现有的 jQuery Mobile 应用，并将其与 PhoneGap 框架集成。PhoneGap 为 jQuery Mobile web 应用添加了两个独特的功能。首先，我们可以将现有的 jQuery Mobile web 应用封装在 PhoneGap 框架中，并将其分发到原生的 iOS、Android、BlackBerry、WebOS 和 Symbian 平台。其次，PhoneGap 还公开了一个 API，允许我们的移动 Web 应用与特定于设备的 API 进行交互，包括文件系统、通知、摄像头等等。PhoneGap API 允许我们扩展我们的 jQuery Mobile 应用，这在以前只能通过本地 SDK 来实现。

         我们还推出了 Open App Market，这是一个面向 HTML5 移动应用的应用商店，允许我们像本地应用商店一样搜索、购买、安装或评价 HTML5 移动应用。对于那些发现本地应用商店分发过程繁琐而缓慢的人来说，开放的应用市场可以是一个替代选择。

         最后，我们介绍了 W3C 目前正在开发的客户端设备 API。这些 API 对于移动网络开发者来说非常重要，因为它将允许我们的网络应用访问设备 API(日历、联系人、照相机等)。)对外部框架的依赖性为零。

         ← Excel中合并单元格并保留全部内容的两种方法详解 如何做个团队领袖 →

         相关推荐

         

         英国beat365官方APP

         泰拉瑞亚铁矿采集指南 泰拉瑞亚铁矿刷新在哪里推荐

         📅 09-11 👁️ 2871

         

         365bet下载手机版

         App Store预览

         📅 07-31 👁️ 5593

         

         365购物商城

         消委會安全套17款滿分推介！5款含致癌物/2款漏水/危險Condom完整清單＋注意事項

         📅 10-15 👁️ 292

         

         365购物商城

         剑网3职业选择指南：哪个职业最适合你？

         📅 01-27 👁️ 6936

         

         365bet下载手机版

         印尼华人数量有多少（分享6个华人最多的国家）

         📅 08-20 👁️ 4235

         

         365购物商城

         癞子的解释

         📅 10-01 👁️ 9317

         

         365bet下载手机版

         抖音唱歌指南：如何让你的音乐梦想绽放短视频平台？

         📅 01-18 👁️ 5377

         

         365bet下载手机版

         足球比赛会换门将吗(世界杯可以换门将吗？)

         📅 08-15 👁️ 3655

         

         英国beat365官方APP

         广信推全网通新机F7 5寸屏还有土豪金配色

         📅 10-15 👁️ 6525

         合作伙伴