在本章中，我们将介绍：
- 为动态添加的按钮编写脚本
- 在按钮中使用自定义图标
- 添加自定义图标精灵
- 替换默认图标精灵
- 在可折叠视图中使用备用图标
- 创建嵌套手风琴
- 创建自定义布置格线
- 使用 XML 内容
- 使用 JSON 内容
在 jQueryMobile 应用中，您可以添加按钮、表单控件和列表作为应用的页面内容。页面内容是一个属性为data-role="content"的div容器。您可以使用框架提供的现成样式和布局来显示数据和格式化数据。您可以在折叠块和折叠套或手风琴中分组显示数据。您可以使用布局网格显示多列数据。您还可以在应用中使用表单和其他 HTML 元素。
按钮是标准 HTML 表单元素，通过 jQueryMobile 框架中的按钮插件进行了增强，使其对手指友好，并且在各种移动设备中都很好看。您可以使用<button>标签或<input>标签向应用添加按钮。您还可以通过向锚元素添加data-role="button"属性，将其样式设置为按钮。这个食谱向您展示了如何使用 JavaScript 向页面动态添加按钮，并将操作绑定到这个新添加的按钮。
从code/04/dynamic-button源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/dynamic-button/main.html启动此代码。
在main.html中，创建#main页面并添加按钮。单击此按钮时，请使用 JavaScript 创建第二个按钮，并为其指定操作：
-
在
main.html中创建#main页面，并添加以下代码内容：<div data-role="content"> <input type="submit" id="addContentBtn" data-inline="true" value="Click to add new button"><br> <div id="newcontent"></div> </div>
-
添加以下脚本来处理按钮的
click事件。在回调函数中，创建新按钮并为其分配操作。$("#main").live("pageinit", function(event) { $("#addContentBtn").bind("click", function(event, ui) { var str="<a href='#page2' data-role='button' data-inline='true'>" +"Disable 1st button and Go to Page 2</a>"; $("#newcontent").html(str).trigger("create") .bind("click", function(event, ui) { $("#addContentBtn").button("disable"); }); }); });
-
添加
#page2如下代码所示。这是一个多页文档。单击“动态添加”按钮时，将打开此页面。<div id="page2" data-role="page" data-add-back-btn="true"> <div data-role="header"> <h1>Page2 Header</h1> </div> <div data-role="content"> <h3>This is Page 2</h3> </div> </div>
创建带有页面#main的main.html，并在页面内容中添加带有id="addContentBtn"的按钮。同时在页面中添加一个空的div容器id="newcontent"。当您加载此页面时，您将只看到一个按钮，屏幕上显示文本点击添加新按钮。
接下来添加给定的脚本。添加一个在页面初始化后被调用的pageinit事件处理程序。这里，将按钮的click事件绑定到回调函数。在回调函数中，在空的"#newcontent"div 中添加一个带有data-role="button"的锚链接。由于页面已经初始化，您必须显式调用create方法来触发框架重新访问此链接，并将其增强为一个按钮。现在，当您单击第一个按钮时，您将看到第二个按钮禁用第一个按钮并转到第 2 页已创建并显示。在脚本中，还添加了将新按钮的click事件绑定到回调函数的代码。在这里，调用第一个按钮上的disable方法。
最后，使用id="page2"创建一个新页面，当您单击“新建”按钮时，该页面将被打开。将data-add-back-btn="true"添加到#page2以提供后退按钮，帮助导航回#main页面。现在，当您单击第二个按钮时，将调用动态添加的脚本，并禁用第一个按钮，页面将导航到打开page2。您可以点击page2中的后退按钮，返回#main页面。您将看到，您添加的动态脚本现在禁用了第一个按钮。
按钮插件还提供了enable、disable和refresh按钮的方法：
$(buttonselector).button("enable");
$(buttonselector).button("disable");
$(buttonselector).button("refresh");按钮使用data-属性提供大量标记选项。它们是角data-corners、图标data-icon、iconposdata-iconpos、阴影data-shadow、iconshadowdata-iconshadow、【T25 内联】、、、【T67】主题data-theme。
您可以在锚链接上调用buttonMarkup方法，将其增强为按钮。下面的代码行采用本机锚链接，并将按钮角色添加到其中，还设置了data-icon="alert"和data-inline="true"属性：
$("a").buttonMarkup({ icon: "alert", inline: "true"});按钮可以包含文本、图标或两者。图标可以定位在按钮的四个方向之一。jQueryMobile 框架提供了一组标准图标，您可以在应用中使用这些图标。此配方向您展示了如何将自定义图标与框架提供的标准图标一起添加到按钮。
从code/04/custom-icon源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/custom-icon/main.html启动此代码。
在此配方中，以下图像square.png用于自定义图标图像：
-
创建新的样式表
jqm-icon.css并定义自定义图标样式，如下代码所示：.ui-icon-square { background: #fff; background: rgba(0,0,0,.4); background-image: url("../../resourcimg/square.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .ui-icon-square { background-image: url("../../resourcimg/square-HD.png"); background-size: 18px 18px; } }
-
将 CSS 包含在
main.html的<head>部分，如下代码所示：<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <link rel="stylesheet" href="jqm-icon.css" />
-
使用带有提交按钮的自定义图标和以下不同主题。同时添加默认的
"home"图标，以进行比较。<div data-role="content"> <h3>Default Icon with text</h3> <input type="submit" data-inline="true" value="Home" data-icon="home" data-theme="a"/> <h3>Custom Icon with text</h3> <input type="submit" data-inline="true" value="Square" data-icon="square" data-theme="a"/> <h3>Default Icon without text</h3> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="home" data-theme="a"/> <h3>Custom Icon without text</h3> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="square" data-theme="a"/> </div>
创建一个jqm-icon.css样式表，并在其中添加一个新的图标类ui-icon-square。指定background-image属性并将其指向要使用的图像文件。指定图标的background颜色，并指定不透明度的图标盘的背景色，如图所示。这里，前缀文本ui 图标向按钮插件指示这是一个自定义图标，这将生成一个square类。现在可以在按钮中使用data-icon="square"属性，框架将获取并显示按钮上的square图标。
创建main.html，使用输入标签添加提交按钮，并使用data-icon属性为这些按钮设置图标。首先使用默认的home图标和图标，然后使用新添加的自定义square图标，带文本和不带文本。要进行详细比较，您可以使用不同的主题样例（“T4”）到“T5”）添加多个按钮。最终结果如下图所示。自定义图标看起来与默认图标一样好。
CSS 中定义的图标.ui-icon-square具有标准分辨率。如今，大多数新设备都支持高清分辨率。因此，要使其在高清分辨率下工作，您可以创建一个新的高分辨率图像，square-HD.png的 36 x 36 像素大小。在 CSS 中所示的@media查询中使用此图像，并指定此高分辨率图标应使用的目标设备分辨率。有关@media查询的更多详细信息，请参见http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-icons.html 。
对于标准的分辨率自定义图标，请使用以PNG-8格式保存并具有 alpha 透明度的 18 x 18 像素大小的图像。将其 alpha 值设置为0.4，背景色设置为#666。现在，您的图标将与框架提供的默认图标相似。
默认情况下，按钮被拉伸以适合其容器的宽度。您可以指定属性data-inline="true"以紧凑模式显示按钮。您还可以在同一行中相邻添加多个内联按钮。
按钮可以使用data-icon="home"属性与图标图像关联。这里，"home"是正在使用的图标的名称。data-iconpos属性可用于指定按钮中图标的显示位置。可能的值为top、bottom、left和right。使用data-iconpos="notext"属性完全隐藏文本，并调整按钮大小以仅显示图标。
默认情况下，按钮使用圆角，可使用布尔属性data-corners进行控制。默认情况下，按钮及其图标也会启用阴影。这可以通过使用属性data-shadow和data-iconshadow来控制。data-corners、data-shadow和data-iconshadow属性都是布尔值，并采用true或false值。
- 添加自定义图标精灵配方
- 替换默认图标精灵配方
jQueryMobile 框架使用默认的图标精灵，并从中派生所有图标。本食谱向您展示了如何向默认标准图标集添加一个自定义图标精灵，除和等于图标，一起构成计算器的键。标准图标集已经有了加、减和删除（乘的图标。
从code/04/add-icon-sprite源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/add-icon-sprite/main.html启动此代码。
在此配方中，下图calc-sprite.png提供了除法和等于图标：
-
创建一个新的
jqm-sprite.css样式表，并为从自定义图标精灵派生的新图标定义类.ui-icon-divide和.ui-icon-equals：.ui-icon-divide, .ui-icon-equals { background: #fff; background: rgba(0,0,0,.4); background-image: url("../../resourcimg/calc-sprite.png"); background-repeat: no-repeat; -moz-border-radius: 9px; -webkit-border-radius: 9px; -o-border-radius: 9px; border-radius: 9px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .ui-icon-divide, .ui-icon-equals { background-image: url("../../resourcimg/calc-sprite- HD.png"); -moz-background-size: 36px 18px; -o-background-size: 36px 18px; -webkit-background-size: 36px 18px; background-size: 36px 18px; } } .ui-icon-divide { background-position: -0px 50%; } .ui-icon-equals { background-position: -18px 50%; }
-
将 CSS 包含在
main.html的<head>部分，如下代码所示：<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <link rel="stylesheet" href="jqm-sprite.css" />
-
使用来自自定义图标精灵的新图标以及默认图标，如以下代码所示。先显示带文本的按钮：
<div data-role="content"> <h3>Default and Custom Icons with Text</h3> <input type="submit" data-inline="true" value="plus" data-icon="plus" /> <input type="submit" data-inline="true" value="minus" data-icon="minus" /> <input type="submit" data-inline="true" value="delete" data-icon="delete" /> <input type="submit" data-inline="true" value="divide" data-icon="divide" /> <input type="submit" data-inline="true" value="equals" data-icon="equals" />
-
然后显示无文本按钮进行比较：
<h3>Default and Custom Icons without Text</h3> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="plus" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="minus" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="delete" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="divide" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="equals" /> </div>
创建一个样式表jqm-sprite.css并在其中添加新的图标类.ui-icon-divide和.ui-icon-equals。指定background-image属性并将其指向要用作图标精灵的图像文件。接下来指定图标的background颜色和图标光盘的不透明度，如图所示。同时为图标指定border-radius或9px。添加了供应商前缀，以确保在各种浏览器平台上都能正常工作。最后，定义图标精灵中每个新图标的位置，如 CSS 文件的最后两行所示。添加@media查询，指定图标应使用的目标设备分辨率；这在本章前面的中已经解释过，在按钮配方中使用自定义图标。
这里，前缀文本ui 图标向按钮插件指示这些是自定义图标，这将生成没有前缀文本的相应类。您现在可以使用属性data-icon="divide"或data-icon="equals"在按钮上使用新图标，框架将获取并显示正确的自定义图标。
在main.html中，通过使用输入标签添加提交按钮，创建简单计算器的按钮。使用data-icon属性为这些按钮设置图标，如图所示。显示带文本和不带文本的按钮以进行比较。这里，加、减和删除图标来自默认图标精灵。自定义图标精灵贡献除和等于图标。屏幕显示如下图所示：
要创建图标精灵，请使用高度为18px的 PNG 图像。总宽度是18px乘以精灵中图标数量的倍数。默认图标精灵使用阿尔法值0.4和背景色#666。在自定义精灵中使用相同的图标可以与默认图标保持一致的外观。将图像保存为具有 alpha 透明度的PNG-8格式。
在代码中，如果您指定了一个无效的图标名，比如data-icon="random"，框架会在其前面加上文本.ui-icon-，并尝试在样式表中查找该类。如果未解析为有效图标，框架现在将从默认图标精灵中拾取第一个图标，并显示相同的图标。默认精灵中的第一个图标是plus图标，用于无法解析图标名称的所有位置。
- 替换默认图标精灵配方
- 使用按钮配方中的自定义图标
本食谱向展示了如何替换 jQuery Mobile 提供的默认图标精灵，并使用自己的图标精灵。这里使用的自定义图标精灵包含形成骰子六个面的图标。
从code/04/replace-icon-sprite源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/replace-icon-sprite/main.html启动此代码。
在这个配方中，下图dice.png是一个图标精灵，骰子的六个面有六个图标。此图标精灵用于替换默认图标精灵。
-
创建一个新的样式表
jqm-sprite.css并重新定义 jQuery Mobile framework 可用的默认.ui-icon类。将默认图标类替换为从自定义图标精灵派生的图标的新类，如以下代码所示：.ui-icon { background: #fff; background: rgba(0,0,0,.4); background-image: url("../../resourcimg/dice.png"); background-repeat: no-repeat; -moz-border-radius: 9px; -webkit-border-radius: 9px; -o-border-radius: 9px; border-radius: 9px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .ui-icon-one, .ui-icon-two, .ui-icon-three, .ui-icon-four, .ui-icon-five, .ui-icon-six { background-image: url("../../resourcimg/dice-HD.png"); -moz-background-size: 108px 18px; -o-background-size: 108px 18px; -webkit-background-size: 108px 18px; background-size: 108px 18px; } } .ui-icon-one { background-position: -0px 50%; } .ui-icon-two { background-position: -18px 50%; } .ui-icon-three { background-position: -36px 50%; } .ui-icon-four { background-position: -54px 50%; } .ui-icon-five{ background-position: -72px 50%; } .ui-icon-six{ background-position: -90px 50%; }
-
将 CSS 包含在
main.html的<head>部分，如下代码所示：<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <link rel="stylesheet" href="jqm-sprite.css" />
-
使用从替换的图标精灵派生的新图标显示骰子的六个面，如以下代码所示。显示带文本的按钮：
<div data-role="content"> <input type="submit" data-inline="true" value="one" data-icon="one" /> <input type="submit" data-inline="true" value="two" data-icon="two" /> <input type="submit" data-inline="true" value="three" data-icon="three" /> <input type="submit" data-inline="true" value="four" data-icon="four" /> <input type="submit" data-inline="true" value="five" data-icon="five" /> <input type="submit" data-inline="true" value="six" data-icon="six" />
-
然后显示无文本按钮进行比较：
<h3>This is how they look without Text</h3> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="one" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="two" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="three" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="four" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="five" /> <input type="submit" data-inline="true" data-iconpos="notext" data-icon="six" /> </div>
创建一个样式表jqm-sprite.css并从jquery.mobile.css文件中复制.ui-icon类的代码片段。将图标精灵的background-imageURL 更改为指向自定义图标精灵dice.png图像。将名称为.ui-icon-one的单个图标类添加到.ui-icon-six。指定这些图标在图标精灵中的位置。类.ui-icon已经为图标指定了background颜色。它还为带有所需供应商前缀的图标指定了边界半径9px。修改@media查询并更新新图标的名称，而不是默认图标，如图所示。
这里，前缀文本ui 图标向按钮插件指示这些是自定义图标，这将生成没有前缀文本的相应类。现在，您可以使用属性data-icon="one"到data-icon="six"在按钮上使用替换的图标，框架将获取并显示正确的自定义图标。
在main.html中，通过使用输入标签添加提交按钮，为骰子的六个面创建按钮。使用data-icon属性为这些按钮设置图标，如图所示。显示带文本和不带文本的按钮以进行比较。骰子六个面上的按钮现在显示如下屏幕截图所示，先有文本，然后没有文本：
此配方向您展示了如何用自己的自定义图标精灵替换默认图标精灵。您将无法再使用应用中的默认图标。因此，只有当你有足够的理由这样做，并且你的应用需要自定义所有图标时，才能替换默认图标集。更好的方法是添加自定义精灵和默认精灵，如前一个配方所示。
- 使用按钮配方中的自定义图标
- 添加自定义图标精灵配方
可折叠是具有data-role="collapsible"属性的容器。您可以在可折叠内容中添加标题和其他控件，可折叠块折叠时仅显示标题。您可以单击可折叠文件旁边的**+**图标进行展开。本食谱向您展示了如何使用可折叠图标的替代图标。
从code/04/collapsible源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/collapsible/main.html启动此代码。
-
在
main.html中，使用data-role="collapsible"添加两个可折叠块，如下代码所示。默认情况下，第一个可折叠图标使用标准图标（加和减。<div data-role="content"> <div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="c"> <h3>Header of the collapsible element</h3> The header uses the default plus/minus icons </div> <div id="collapser" data-role="collapsible" data-collapsed="false" data-theme="d" data-content-theme="d"> <h3>Header of the collapsible element</h3> The header uses the alternate expand/collapse icons </div> </div>
-
将以下脚本添加到页面的
<head>部分，以将备用箭头图标设置为第二个可折叠图标：//on initial load $("#main").live("pagebeforeshow", function(event, data) { $("#collapser").find( ".ui-icon-plus" ) .toggleClass("ui-icon-arrow-r"); $("#collapser").find( ".ui-icon-minus") .toggleClass("ui-icon-arrow-d"); }); // handle expand and collapse events below $("#main").live("pageshow", function(event, data) { $("#collapser").bind("expand collapse", function(event) { var isCollapse = (event.type === "collapse"); $(this).find( ".ui-icon" ) .toggleClass( "ui-icon-arrow-d", !isCollapse ) .toggleClass( "ui-icon-arrow-r", isCollapse ); }); });
在main.html中增加两个可折叠块；加载时，它们有默认的加和减图标。添加脚本并为pagebeforeshow事件创建事件处理程序，以更改第二个可折叠事件的图标（使用id="collapser"。使用 jQueryfind()方法查找类.ui-icon-plus（加图标），并使用toggleClass()方法将其替换为类.ui-icon-arrow-r（右箭头。同样，将类.ui-icon-minus（减去图标）替换为类.ui-icon-arrow-d（向下箭头。将可折叠块上的data-collapsed="false"属性设置为以展开模式显示。显示页面时，第二个可折叠图标现在具有箭头图标，而不是默认图标：
展开或折叠可折叠文件时，框架使用标准图标切换图标。您可以通过为pageshow事件添加事件处理程序来覆盖此行为。根据可折叠块上的事件（expand或collapse），找到.ui-icon类并替换为.ui-icon-arrow-d或.ui-icon-arrow-r类，以显示下或右箭头。折叠的块现在看起来如下图所示：
您可以使用data-content-theme属性设置可折叠内容的主题。收割台不受影响。以下代码使用样例e设置可折叠内容的主题：
<div data-role="collapsible" data-content-theme="e">使用data-theme属性和将主题设置为包括标题在内的整个可折叠块。现在，您可以使用data-content-theme属性为可折叠内容设置不同的主题。现在看起来好像您单独设置了标题样式。以下代码段将标题主题设置为 swatcha，将正文设置为 swatche：
<div data-role="collapsible"
data-theme="a" data-content-theme="e" >- 创建嵌套手风琴配方
手风琴或可折叠套装是一组可折叠块，位于带有data-role="collapsible-set"的容器中。一次只能展开一个可折叠对象，其他可折叠对象将返回其折叠状态。不能直接嵌套手风琴。本食谱向您展示了如何在一个简单的应用中创建一个嵌套的手风琴，该应用显示了可供购买的各种房地产。
从code/04/nested-accordion源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/nested-accordion/main.html启动此代码。
-
使用
data-role="collapsible-set"向main.html添加一个嵌套的手风琴，如下代码所示：<div data-role="content"> <h4>Our current housing projects</h4> <div data-role="collapsible-set" data-theme="d" data-content- theme="d"> <div data-role="collapsible" data-collapsed="false"> <h3>Villas and Row Houses</h3> <div data-role="collapsible-set" data-theme="e" data- content-theme="e"> <div data-role="collapsible"> <h3>ABC Lake View</h3> Premium Villas with each villa having its own private beach </div> <div data-role="collapsible"> <h3>ABC Nest</h3> Serene row houses amidst acres of trees </div> </div> </div> <div data-role="collapsible"> <h3>Apartments</h3> <div data-role="collapsible" data-theme="e" data-content- theme="e"> <h3>ABC Sky Rise</h3> Luxury 3 bedroom apartments 2 blocks away from ABC Mall </div> </div> </div> </div>
在main.html中，创建一个包含两个可折叠块的可折叠集合。第一个可折叠展示别墅和排房，第二个展示公寓。您现在可以在别墅和排屋可折叠下嵌套另一个可折叠集，如前面的代码片段所示。
添加两个可折叠块，将其嵌套在第一个可折叠块中以列出两个特性。使用data-theme和data-content-theme属性对嵌套内容设置不同于其父可折叠内容的主题。将显示嵌套的可折叠文件，如以下屏幕截图所示：
现在要完成代码，请将内容添加到第二个可折叠的公寓。在任何时间点，只有一个可折叠的在这个嵌套的手风琴中展开，如下面的屏幕截图所示：
在可折叠集合中的两个可折叠块之间引入任何其他元素或内容会破坏集合。可折叠块不再同步，当您展开或折叠它们时，它们彼此独立。
顾名思义，可折叠集只能包含可折叠块。
- 在可折叠的配方中使用备用图标的
*# 创建自定义布局网格
您可以使用布局网格在应用中将控件彼此相邻放置。默认情况下，布置格线将创建宽度相等的列单元。此配方向您展示了如何自定义此选项并创建具有不同高度和宽度的单元格。
从code/04/layoutgrid源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/layoutgrid/main.html启动此代码。
-
使用
ui-grid和ui-block类向main.html添加布局网格，如下代码所示：<div data-role="content"> <fieldset class="ui-grid-a"> <div class="ui-block-a" style="width: 25%"> <div class="ui-bar ui-bar-e">Col A</div> </div> <div class="ui-block-b" style="width: 50%"> <div class="ui-bar ui-bar-e">Col B</div> </div> <div class="ui-block-c" style="width: 25%"> <div class="ui-bar ui-bar-e">Col C</div> </div> <div class="ui-grid-solo"> <div style="height: 40px" class="ui-bar ui-bar-e">A Single Cell</div> </div> </fieldset> </div>
创建main.html并通过添加属性为class="ui-grid-a"的fieldset元素向其页面添加布局网格。默认情况下，这将创建两个宽度相等的列。但您可以通过添加ui-block-a、ui-block-b和ui-block-cdiv 来添加三个单元格，如代码所示。每个 div 都有不同的宽度，其中列 B具有50%宽度，其他两列25%宽度各不相同。总宽度总计为 100%，框架会自动将它们排成一行。如果总和超过 100%，那么多余的单元格将移到下一行。
现在在第二行中添加一个类为ui-grid-solo的div，这将使单元格具有 100%的宽度。您可以使用style="height:"属性更改此单元格的高度，如代码所示。ui-bar和ui-bar-e类使用边框和渐变色为单元格设置样式，并使用样例e为其设置主题。网格布局现在如以下屏幕截图所示：
通过向单个单元格添加data-theme属性，可以将其主题设置为ui-block与其他单元格不同。要使整行的主题不同于网格中的其他行，必须向该行的所有单元格添加相同的data-theme属性。
您可以在布局网格的ui-block单元中添加任何种类的元素。甚至可以在此单元内添加布局网格。你必须明智地选择你想要的屏幕外观，记住移动设备有限的屏幕大小。
您可以通过向任何容器添加ui-grid类来向其添加网格。以下代码段将整个页面样式设置为两列网格：
<div id="main" data-role="page" class="ui-grid-a">- 在第三章工具栏中的配方页脚添加布局网格
您可以在应用中显示从各种格式和来源获得的数据。此配方向您展示了如何显示从 XML 文件获取的学生记录样本集。
从code/04/xml-content源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/xml-content/main.html启动此代码。
-
创建学生节点具有
name和age属性的student.xml文件。每个student节点都有多个子course元素。每个course元素都有一个name属性和一个子marks元素，如下代码所示：<?xml version="1.0" encoding="utf-8" ?> <students> <student name="Alex" age="22"> <course name="HTML5"> <marks>89</marks> </course> <course name="CSS3"> <marks>88</marks> </course> <course name="JavaScript"> <marks>80</marks> </course> </student> . . . . </students>
-
创建
main.html文件并添加一个隐藏的div容器。您可以将 XML 数据读入此div，然后格式化并显示：<div id="content" data-role="content" data-theme="b"> <div id="hiddendiv" hidden="true">hi</div> </div>
-
在
main.html的<head>部分包含以下 JavaScript 代码，加载 XML 文件，格式化数据，然后显示：$("#main").live("pageinit", function(event) { var str=""; $("#hiddendiv").load("student.xml", function() { $("#hiddendiv").find("student").each(function() { str += "<div data-role='collapsible' data-theme='d' data-content-theme='d'>"; str += "<h3>" + $(this).attr("name") + ", " + $(this).attr("age") +" years</h3>"; str += "<ul data-role='listview'>"; var i=0; $(this).find("course").each(function() { str += "<li>" + $(this).attr("name") + " : " + $(this).children("marks").html() + "</li>"; }); str += "</ul></div>"; }); $("#content").html(str).trigger("create"); }); });
在main.html中，添加一个带有id="hiddendiv"的div容器，并通过设置属性hidden="true"将其隐藏。为pageinit事件创建事件处理程序，以便在页面初始化并在内存中可用时处理 XML 数据的加载。使用 jQuery Ajaxload()方法将 XML 数据加载到hiddendiv中。成功加载后，使用 jQueryfind()方法查找每个student节点。对于每个student，通过创建一个可折叠文件（使用data-role="collapsible"）生成 HTML 代码。将可折叠标题设置为学生的name和age。您可以使用 jQueryattr()方法从student节点的属性中获取这些值。接下来，在student节点中找到每一个课程，获得course``name和marks。使用children()调用读取marks值，该调用提取course节点的第一个子元素。course元素被添加到无序列表中（使用data-role="listview"）。
构建 HTML 内容后，将其设置为"#content"页面内容 div，然后触发"create"方法，让 jQueryMobile 框架发挥其魔力并生成增强控件，如以下屏幕截图所示：
这个方法向您展示了如何使用 Ajax 从位于同一文件夹中的 XML 文件中读取内容。您还可以向服务器发送 Ajax 请求，并获取此 XML 作为响应。jQuery 库有一整套选择器和操纵器，您可以使用它们来读写 XML 数据。访问http://docs.jquery.com 阅读更多。
XML 结构需要结束标记，这使得它非常庞大。尽可能多地使用属性，而不是子节点，从而使 XML 尽可能轻。您还可以使用诸如gzip之类的算法来压缩 XML。
几乎所有的浏览器都知道如何直接呈现和显示 XML 数据。如果 XML 内容具有关联的样式表，则还可以对其进行格式化和样式设置。在 jQueryMobile 应用中，当您可以使用锚链接上的target属性打开另一个页面中的内容时，您可以利用此功能，如下代码所示：
<a href="student.xml" target="student" data-role="button">Open Student details</a>- 使用 JSON 内容的配方
JSON代表JavaScript 对象表示法。它是一种轻量级数据交换格式，非常易于使用。此配方向您展示如何从 JSON 文件显示贵金属的价格。
从code/04/json-content源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/04/json-content/main.html启动此代码。
-
创建包含五种贵金属数组的
precious.json文件。名称、符号、日内open、close、high、low价格也可提供，如下代码所示：[ { "name": "Gold", "symbol": "Au", "price": { "open": 1642.46, "close": 1682.42, "high": 1699.66, "low": 1638.51 } }, { "name": "Silver", "symbol": "Ag", "price": { "open": 31.24, "close": 33.11, "high": 33.65, "low": 31.21 } }, { "name": "Platinum", "symbol": "Pt", "price": { "open": 1621.15, "close": 1623.87, "high": 1624.45, "low": 1620.98 } }, { "name": "Paladium", "symbol": "Pd", "price": { "open": 656.05, "close": 657.35, "high": 657.75, "low": 655.25 } }, { "name": "Rhodium", "symbol": "Rh", "price": { "open": 1434.38, "close": 1434.68, "high": 1434.98, "low": 1434.12 } } ]
-
创建
main.html并添加一个带id="preciousdata"的空div。您可以在此处读取 JSON 文件、格式并显示数据：<div id="content" data-role="content" data-theme="b"> <div id="preciousdata"></div> </div>
-
在
main.html的<head>部分包含以下 JavaScript 代码，以获取并加载 JSON 文件，格式化数据，并在布局网格中显示贵金属价格表：$("#main").live("pageinit", function(event) { $.getJSON("precious.json", function(metal) {
-
接下来，将用于创建布局网格的 HTML 字符串存储在局部变量中：
var blocka = "<div class='ui-block-a' style='width: 40%'>"; var blockb = "<div class='ui-block-b' style='width: 15%'>"; var blockc = "<div class='ui-block-c' style='width: 15%'>"; var blockd = "<div class='ui-block-d' style='width: 15%'>"; var blocke = "<div class='ui-block-e' style='width: 15%'>"; var title = "<div class='ui-bar ui-bar-a' style='text-align: right'>"; var uibarc = "<div class='ui-bar ui-bar-c' style='text-align: right'>"; var uibare = "<div class='ui-bar ui-bar-e' style='text-align: right'>";
-
使用上面定义的局部变量，构建布局网格标题的 HTML 内容：
var str="<div class='ui-grid-d'>"; str += blocka + title + "Precious Metal (USD)</div></div>"; str += blockb + title + "Open</div></div>"; str += blockc + title + "High</div></div>"; str += blockd + title + "Low</div></div>"; str += blocke + title + "Close</div></div>";
-
现在为每种金属创建 HTML 内容，包括它们的价格详细信息：
for (var i in metal) { str += blocka + uibare + metal[i].name + " (" + metal[i].symbol + ")</div></div>"; str += blockb + uibarc + metal[i].price.open + "</div></div>"; str += blockc + uibare + metal[i].price.high + "</div></div>"; str += blockd + uibarc + metal[i].price.low + "</div></div>"; str += blocke + uibare + metal[i].price.close + "</div></div>"; } str += "</div>";
-
最后，将此数据添加到
#preciousdatadiv 中，并触发"create"方法显示格式化的 JSON 数据：$("#preciousdata").html(str).trigger("create"); }); });
在main.html中，添加一个带有id="preciousdata"的空div容器。稍后您可以使用它来显示格式化的 JSON 数据。为pageinit事件创建一个事件处理程序，以便在页面初始化并在内存中可用时处理 JSON 数据的加载。使用$.getJSON()jQuery 调用使用 GET 请求从服务器获取 JSON 编码的数据。JSON 数据现在在metal对象中可用。
在getJSON方法的回调函数中，使用ui-grid-d类为五列布局网格创建 HTML 内容。五列分别为贵金属（美元）、开盘、高盘、低盘和收盘。使用ui-block类为每个列单元格创建标题行。接下来，循环通过metal中的对象，构建列单元格，如图所示。
使用样例e和样例c交替设置专栏主题。您可以使用 swatcha以不同的方式设置标题主题。最后，将生成的 HTML 内容设置为#preciousdatadiv 并触发create方法，让 jQuery Mobile 增强布局网格。包含贵金属价格数据的 JSON 现在显示如下屏幕截图所示：
这个方法向您展示了如何使用jQuery.getJSON()方法从服务器获取 JSON 数据。jQuery 库还提供了一个jQuery.parseJSON()方法，您可以使用该方法将 JSON 字符串直接解析为 JavaScript 对象，如下代码所示：
var preciousobject= jQuery.parseJSON('{"name":"Gold"}');JSON 现在非常流行用于存储和传输数据。JSON 是 JavaScript 的一个子集，如本配方所示，使用 JavaScript 读取 JSON 数据非常简单。与相比，JSON 是轻量级的，使用的带宽更少（例如，没有开始和结束标记）。许多面向文档的数据库（如 CouchDB 和 MongoDB）也支持 JSON。
JSON 数据也可以使用 JavaScripteval()方法加载。但是，只有当您绝对必须并且非常确定 JSON 文本文件的源时，才可以这样做。使用JSON 解析器加载数据总是比较安全的，因为这将只接受有效的 JSON 数据，并防止潜在的恶意代码运行。有关更多详细信息和访问一系列可用 json 解析器的信息，请参阅www.json.org。jQuery JSON 方法通常是首选方法，因为它们非常方便且使用安全。
始终使用正确实现的 JSON 解析器读取和写入.json文件。避免使用不安全的eval()方法。
- 使用 XML 内容的*配方**