jQuery Mobile 高级设计模板
来自:http://www.adobe.com/cn/devnet/dreamweaver/articles/dw-template-jquery-mobile.html
下载:
jQuery Mobile 是一款基于 HTML5 的统一用户界面系统,适用于所有常见的移动设备平台,并且构建于可靠的 jQuery 和 jQuery 用户界面基础之上。 其轻型代码构建有渐进增强功能,并采用灵活的主题设计。 与此同时,Adobe Dreamweaver CS6 的特色在于利用简化的工作流程创建 jQuery Mobile 项目。 在本文中,您将使用 Dreamweaver CS6 创建简单的 jQuery Mobile 应用程序。
下面的视频将带您了解 jQuery Mobile 中的这个 Dreamweaver 模板。
图 1. 查看在 Dreamweaver CS6 中创建 jQuery Mobile 项目的精简工作流程
![jQuery Mobile 高级设计模板 jQuery Mobile 高级设计模板](https://cdn.ancii.com/article/image/v1/CJ/su/DY/YDsJuCxciS9WuzwhFy-bH1XTkGooxXX_mbkq3YDfHktzmwoCLpL2YcxrmABCqwcgzzQ2hxXZf6z3p4tBdlhnac-exuELCN-ofQlkOC2TmFhZsDsBFYvzYXPP-pJ0SUr6vF_14luryzD528YLZG8V1kGIFSjCWdY9V2SKwz4FqimH3r3t50KoMlSrXxXRBGvfEdNe0rNWOYZV1Foue4tXcVaxSfBym7GCtf4F-Zfy5c9rWgdynY7c7fusDvqHWWiJWKqLIah3u0utW4Fk1Qb7jLI1MUejZpD2wfZVtsCj4w0.jpg)
在 Dreamweaver 中,只需按照主题(本地)从 Sample>jQuery Mobile 中选择 File > New > Page,最后单击 Create 即可。 当您保存此文件时,Dreamweaver 会创建所有必要文件,包括全部 CSS 和 HTML 标记,以便创建基本的 jQuery Mobile 网站。
![jQuery Mobile 高级设计模板 jQuery Mobile 高级设计模板](https://cdn.ancii.com/article/image/v1/CJ/su/DY/YDsJuCxciS9WuzwhFy-bH1XTkGooxXX_mbkq3YDfHktzmwoCLpL2YcxrmABCqwcgzzQ2hxXZf6z3p4tBdlhnac-exuELCN-ofQlkOC2TmFhZsDsBFYvzYXPP-pJ0SUr6vF_14luryzD528YLZG8V1kGIFSjCWdY9V2SKwz4FqimH3r3t50KoMlSrXxXRBGvfEdNe0rNWOYZV1Foue4tXcVaxSfBym7GCtf4F-Zfy5c9rWgdynY7c7fusDvqHWWiJfh8zuVcBasUnUbr3TlVjR1N7EG3ZU3WtSLKw2XmAwu0.jpg)
移动网站创建完毕后,即可开始自定义 CSS 和 HTML,以便将此项目融入到您的理想体验。 下面的各示例对此模板的某些更先进方面进行了阐释,并为您开始修改更加深入的 jQuery Mobile 框架层面提供了上下文。
通过 CSS 实现灵活性
jQuery Mobile 框架最优越的一个方面在于其依赖 CSS 进行布局和设计。 由于该框架的核心利用少量 HTML 构建结构,您只需运用少量 CSS 即可修改设计。
在多页实现操作中,您可以对“页面”使用独立 DIV
标记,并可使用列表视图为这些页面创建主页导航。 有关页面结构的详细信息,请参阅可定制的 jQuery Mobile 初学者设计课程 一文。 由于可以从无序列表中创建列表视图,您能够以该列表为目标创建 CSS 规则,并重新定义某些方面,以便为主页创建更大的按钮。
标准的列表视图标记包含一个 data-role
属性(分配给外部<UL>
标记)。 请参阅以下代码:
<ul data-role="listview"> <br> <li><br> <a href="#about_us">About Us</a><br> ...<br> </li><br></ul><br>
jQuery 框架运用所谓的注入技术将额外的 CSS 和 HTML 添加至 <UL>
元素,并将上述代码转化为以下代码段。
<ul data-role="listview" class="ui-listview"><br> <li class="btn_a ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li" data-theme="a"><br> <div class="ui-btn-inner ui-li" aria-hidden="true"><br> <div class="ui-btn-text"><br> <a href="#about_us" class="ui-link-inherit">About Us</a><br> ...<br> </div><br> <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> <br> </span><br> </div><br> </li><br></ul><br>
除添加注入<LI>
元素内的 <DIV>
和<SPAN>
元素外,该进程还会在运行时通过 JavaScript 将名为 ui-listview
的类注入<UL>
元素。 这样,您就可以通过 CSS 规则进行定位,也可以借此执行锁定。 最后,将列表视图置于 <DIV>
内,并将 id
设置为 home
。您可以使用以下 CSS 规则名称具体定位主页的列表视图:
#home .ui-listview { }
下图展示了经过重新设计的列表。
![jQuery Mobile 高级设计模板 jQuery Mobile 高级设计模板](https://cdn.ancii.com/article/image/v1/CJ/su/DY/YDsJuCxciS9WuzwhFy-bH1XTkGooxXX_mbkq3YDfHkt4FpNr34VCNSgxe0plcAghii7qaJgAJA0OnFQqz6OEvGCbV0YbP2dkSxMUzuekdNFlZFJiuLCR6Zz2lq-mPqp9bJBipTfZZKfeHQpJX6nEBBeeH0IBXqlWGPFLFjYVcjbc97OqJLnFFClscYpCZZL3V5N7UTMpwvARyJiPna-P7BNVOWl__QhU9QFsTeSQrfqyylJgXyN6PD2RbnfQU036VuT8dAyPRn2vdulYdq9S1XtcbvZ6VyHxd3aZhUiaKLX1QAOkNsmEzJ6ZKM_Me7JeNWUVzoVTCfJhITqxAXGZq1_FBzh837sOrpdBmOxu4WVrDop1OLaCZOqCqCgwlY7E.png)
您可以借助分配给各 <LI>
的子画面表单 (Sprite Sheet) 和自定义类,调整背景图像的x-position
以便从单一图像创建各图形按钮。 除背景图像外,您还可以为嵌套 <A>
标记分配 padding-top
to the nested <A>
,从而为按钮图形提供垂直空间,如下图所示。
![jQuery Mobile 高级设计模板 jQuery Mobile 高级设计模板](https://cdn.ancii.com/article/image/v1/CJ/su/DY/YDsJuCxciS9WuzwhFy-bH1XTkGooxXX_mbkq3YDfHktzmwoCLpL2YcxrmABCqwcgzzQ2hxXZf6z3p4tBdlhnac-exuELCN-ofQlkOC2TmFhZsDsBFYvzYXPP-pJ0SUr6vF_14luryzD528YLZG8V1kGIFSjCWdY9V2SKwz4FqimH3r3t50KoMlSrXxXRBGvfEdNe0rNWOYZV1Foue4tXcVaxSfBym7GCtf4F-Zfy5c9rWgdynY7c7fusDvqHWWiJJpYa7UXpOmIT07Rw5Fh1cVyCSR0my9zzSd3RRfgFtSk.jpg)
这些 CSS 规则与 HTML 标记相结合,将传统的无序列表转换成基于图标的导航系统。
结合 ThemeRoller 与自定义 CSS
jQuery Mobile 网站包含在线工具主题创建工具,称作 ThemeRoller。 这是一种基于 Web 的工具,允许您设计配色方案以便与自定义 jQuery 移动网站搭配使用。 jQuery Mobile 框架构建于主题概念基础之上,这是移动网站的预定义外观样式。 每个主题均包含一系列样式组(称作色板),您可以将其应用至整个 jQuery Mobile 页面,也可以仅应用至部分页面。 虽然您可以理所当然地覆盖色板内包含的许多 CSS 规则,但使用 ThemeRoller 创建全新主题会更加有效。
![jQuery Mobile 高级设计模板 jQuery Mobile 高级设计模板](https://cdn.ancii.com/article/image/v1/CJ/su/DY/YDsJuCxciS9WuzwhFy-bH1XTkGooxXX_mbkq3YDfHktzmwoCLpL2YcxrmABCqwcgzzQ2hxXZf6z3p4tBdlhnac-exuELCN-ofQlkOC2TmFhZsDsBFYvzYXPP-pJ0SUr6vF_14luryzD528YLZG8V1kGIFSjCWdY9V2SKwz4FqimH3r3t50KoMlSrXxXRBGvfEdNe0rNWOYZV1Foue4tXcVaxSfBym7GCtf4F-Zfy5c9rWgdynY7c7fusDvqHWWiJNIz9BvsJyJdL-_VNU1-QoBjJ6tjlFOX1BP_LVxrQ5RA.png)
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"> <br> <li><a class="location" href="#contact_us" data-phone="123-456-7891">Albania</a></li><br> <li><a class="location" href="#contact_us" data-phone="123-456-7892">Algeria</a></li><br> <li><a class="location" href="#contact_us" data-phone="123-456-7893">Argentina</a></li><br> …<br></ul><br>
通过挂接至自定义 JavaScript 文件,您可以锁定标记和 jQuery 的诸多层面,进一步操控用户体验。 我在此模板中纳入了一套简单的 jQuery 指令,用以将数据注入 Contact Us 页面,如下图所示。
![jQuery Mobile 高级设计模板 jQuery Mobile 高级设计模板](https://cdn.ancii.com/article/image/v1/CJ/su/DY/YDsJuCxciS9WuzwhFy-bH1XTkGooxXX_mbkq3YDfHktzmwoCLpL2YcxrmABCqwcgzzQ2hxXZf6z3p4tBdlhnac-exuELCN-ofQlkOC2TmFhZsDsBFYvzYXPP-pJ0SUr6vF_14luryzD528YLZG8V1kGIFSjCWdY9V2SKwz4FqimH3r3t50KoMlSrXxXRBGvfEdNe0rNWOYZV1Foue4tXcVaxSfBym7GCtf4F-Zfy5c9rWgdynY7c7fusDvqHWWiJI1dgsmzf8Tcxu0X_RalwK_RZgemvSdJg8lmoesJGpkM.jpg)
当用户点按或单击位置列表中的链接时,应用程序便会运用 jQuery 挑选激活的链接,读取自定义属性和链接标签,然后通过这些元素修改 Contact Us 页面元素。 这将给您造成一种能够创建定制 Contact Us 页面的幻觉,而事实上,将数据动态注入的页面与赋予动画前的页面是同一页面。
下一步阅读方向
除布局和页面加载能力外,jQuery Mobile还能够提供大量交互形式增强功能。 您可以运用 HTML 形式的基础标记,将单选按钮和下拉菜单等项目转换为移动友好型用户体验。 更重要的是,DreamweaverInsert Panel 包含大量 jQuery Mobile 相关对象,只需单击一次即可添加到移动网站。