jQuery Mobile 高级设计模板

来自：http://www.adobe.com/cn/devnet/dreamweaver/articles/dw-template-jquery-mobile.html

下载：

• template_14-jquery-mobile-app.zip

jQuery Mobile 是一款基于 HTML5 的统一用户界面系统，适用于所有常见的移动设备平台，并且构建于可靠的 jQuery 和 jQuery 用户界面基础之上。 其轻型代码构建有渐进增强功能，并采用灵活的主题设计。 与此同时，Adobe Dreamweaver CS6 的特色在于利用简化的工作流程创建 jQuery Mobile 项目。 在本文中，您将使用 Dreamweaver CS6 创建简单的 jQuery Mobile 应用程序。

下面的视频将带您了解 jQuery Mobile 中的这个 Dreamweaver 模板。

Dreamweaver CS6 中创建 jQuery Mobile 项目的精简工作流程

图 1. 查看在 Dreamweaver CS6 中创建 jQuery Mobile 项目的精简工作流程

图 1. 您将在本教程中创建的 jQuery Mobile 应用程序。

在 Dreamweaver 中，只需按照主题（本地）从 Sample>jQuery Mobile 中选择 File > New > Page，最后单击 Create 即可。 当您保存此文件时，Dreamweaver 会创建所有必要文件，包括全部 CSS 和 HTML 标记，以便创建基本的 jQuery Mobile 网站。

图 2. 在 Dreamweaver CS6 中创建一个新的移动网站。

移动网站创建完毕后，即可开始自定义 CSS 和 HTML，以便将此项目融入到您的理想体验。 下面的各示例对此模板的某些更先进方面进行了阐释，并为您开始修改更加深入的 jQuery Mobile 框架层面提供了上下文。

通过 CSS 实现灵活性

jQuery Mobile 框架最优越的一个方面在于其依赖 CSS 进行布局和设计。 由于该框架的核心利用少量 HTML 构建结构，您只需运用少量 CSS 即可修改设计。

在多页实现操作中，您可以对“页面”使用独立 DIV标记，并可使用列表视图为这些页面创建主页导航。 有关页面结构的详细信息，请参阅可定制的 jQuery Mobile 初学者设计课程 一文。 由于可以从无序列表中创建列表视图，您能够以该列表为目标创建 CSS 规则，并重新定义某些方面，以便为主页创建更大的按钮。

标准的列表视图标记包含一个 data-role 属性（分配给外部<UL> 标记）。 请参阅以下代码：

<ul data-role="listview">
     <li>
          <a href="#about_us">About Us</a>
              ...
     </li>
</ul>


jQuery 框架运用所谓的注入技术将额外的 CSS 和 HTML 添加至 <UL> 元素，并将上述代码转化为以下代码段。

<ul data-role="listview" class="ui-listview">
     <li class="btn_a ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li" data-theme="a">
          <div class="ui-btn-inner ui-li" aria-hidden="true">
               <div class="ui-btn-text">
                    <a href="#about_us" class="ui-link-inherit">About Us</a>
...
               </div>
               <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> 
               </span>
          </div>
     </li>
</ul>


除添加注入<LI>元素内的 <DIV> 和<SPAN>元素外，该进程还会在运行时通过 JavaScript 将名为 ui-listview的类注入<UL>元素。 这样，您就可以通过 CSS 规则进行定位，也可以借此执行锁定。 最后，将列表视图置于 <DIV>内，并将 id设置为 home 。您可以使用以下 CSS 规则名称具体定位主页的列表视图：

#home .ui-listview {  }

下图展示了经过重新设计的列表。

图 3. 经过重新设计的列表

您可以借助分配给各 <LI>的子画面表单 (Sprite Sheet) 和自定义类，调整背景图像的x-position以便从单一图像创建各图形按钮。 除背景图像外，您还可以为嵌套 <A> 标记分配 padding-top to the nested <A>，从而为按钮图形提供垂直空间，如下图所示。

图 4. 子画面表单 (Sprite Sheet)

这些 CSS 规则与 HTML 标记相结合，将传统的无序列表转换成基于图标的导航系统。

结合 ThemeRoller 与自定义 CSS

jQuery Mobile 网站包含在线工具主题创建工具，称作 ThemeRoller。 这是一种基于 Web 的工具，允许您设计配色方案以便与自定义 jQuery 移动网站搭配使用。 jQuery Mobile 框架构建于主题概念基础之上，这是移动网站的预定义外观样式。 每个主题均包含一系列样式组（称作色板），您可以将其应用至整个 jQuery Mobile 页面，也可以仅应用至部分页面。 虽然您可以理所当然地覆盖色板内包含的许多 CSS 规则，但使用 ThemeRoller 创建全新主题会更加有效。

图 5. 通过 ThemeRoller 创建新主题。

ThemeRoller 在线设计工具允许您创建、修改及保存主题，以便在项目中使用。 在您下载并解压主题后，将文件复制到项目文件夹内，然后链接 CSS。 ThemeRoller网站甚至可以在下载窗口内提供某些 HTML。

添加一些自定义 jQuery 脚本

如果您从 jQuery Mobile 构建于 jQuery 基础之上这一事实出发思考，我必须指出另一个事实，即您可以运用某些简单脚本向移动网站内添加更多功能。 本教程随附模板，您可以从本文开头的“要求”部分进行下载，其中包括一个简单脚本和一些自定义 HTML，允许您根据此处所含的链接动态调整 Contact Us 页面的内容。 您可以借助单一的 Contact Us 页面，学习如何根据添加至各个链接的 HTML 更改页面信息。

下面的listview链接包含<A> 标记的另一个属性，称作 data-phone。 在此代码段中，输入该国家/地区办事处的电话号码。 连同 <a> 标记的链接文本，我们已有足够的信息将自定义数据注入单一的 Contact Us 页面，并为用户提供许多自定义联系人页面体验。

<ul data-role="listview" data-filter="true" data-inset="true" class="countries">  
     <li><a class="location" href="#contact_us" data-phone="123-456-7891">Albania</a></li>
     <li><a class="location" href="#contact_us" data-phone="123-456-7892">Algeria</a></li>
     <li><a class="location" href="#contact_us" data-phone="123-456-7893">Argentina</a></li>
…
</ul>


通过挂接至自定义 JavaScript 文件，您可以锁定标记和 jQuery 的诸多层面，进一步操控用户体验。 我在此模板中纳入了一套简单的 jQuery 指令，用以将数据注入 Contact Us 页面，如下图所示。

图 6. 将数据注入 Contact Us 页面

当用户点按或单击位置列表中的链接时，应用程序便会运用 jQuery 挑选激活的链接，读取自定义属性和链接标签，然后通过这些元素修改 Contact Us 页面元素。 这将给您造成一种能够创建定制 Contact Us 页面的幻觉，而事实上，将数据动态注入的页面与赋予动画前的页面是同一页面。

下一步阅读方向

除布局和页面加载能力外，jQuery Mobile还能够提供大量交互形式增强功能。 您可以运用 HTML 形式的基础标记，将单选按钮和下拉菜单等项目转换为移动友好型用户体验。 更重要的是，DreamweaverInsert Panel 包含大量 jQuery Mobile 相关对象，只需单击一次即可添加到移动网站。