jQuery Mobile系列

创建自定义jQuery移动主题自定义页面、工具栏、内容、表单元素、列表、按钮等元素的外观KrisHadlock,Web开发人员/设计师,StudioSedition简介：智能电话和平板设备的高采用率最终导致增加了对移动Web开发人员和设计师的需求。jQueryMobile框架支持您创建能与原生应用程序开发结果相匹敌的移动Web体验，让用户能够通过Web浏览器提供对应用程序和网站的及时访问，而不是让他们下载和安装移动应用程序。本文将了解如何使用jQueryMobile主题框架创建具有自定义品牌的移动网站和Web应用程序。标记本文！发布日期：2012年5月25日级别：中级原创语言：英文jQueryMobile框架是一个JavaScript库，您可使用它轻松地创建网站的移动版本，将现有的网页转换为适合触摸(touch-friendly)的网站和应用程序。jQueryMobile框架允许用户通过Web浏览器直接连接适合触摸的应用程序，它影响了在移动和平板设备上访问和分发移动应用程序的方式。移动和平板设备采用率急速上涨，jQueryMobile框架通过提高生成移动网站的速度，使开发人员能够满足对这些移动Web体验的不断高涨的需求。具体来讲，jQueryMobile包含一个您可以轻松自定义的主题框架。自定义色板和图标集的能力提供了页面、工具栏、内容、表单元素、列表、按钮等元素的自定义主题。本文简单概述了如何为这些jQueryMobile元素类型中的每一种创建自定义主题。自定义主题允许您创建网站的移动版本，这些版本与其桌面版本具有相同的品牌。jQueryMobile主题jQueryMobile有一种可选的推荐标准Web应用程序页面结构，它包含一些通用的结构，比如包含页眉、内容和页脚内容的页面元素。为了定义这些元素，jQueryMobile框架使用了HTML5data-role属性。清单1清单1给出了jQueryMobile的受推荐HTML模板的一个示例，对每个主要元素都使用了data-role。清单1.一个使用页面data-role的元素另一个非常重要且值得推荐的元素是metaviewport标记。这个标记指定一个浏览器应该如何显示移动网站。以下代码展示了如何添加一个meta标记来为移动设备设置viewport：divdata-role=pagedivdata-role=headerh1PageTitle/h1/divdivdata-role=contentpPagecontentgoeshere./p/divdivdata-role=footerh4PageFooter/h4/div/divmetaviewport标记对于基于访问移动网页的设备来恰当呈现该网页很重要。没有此标记，您的网页将显示得很小或被缩小，就像任何不是针对移动设备而构建的正常网页将显示的那样。图1显示一个移动网页，它使用了metaviewport标记，并显示了更适合所使用设备的内容。图1.一个使用metaviewport标记的移动网页jQueryMobile框架包含一个页面主题系统，提供了对页面元素外观和样式的全面控制。HTML5data-theme属性可添加到一个元素中，以便应用现有的jQueryMobile主题色板或一个新的色板。该主题系统包含5个色板，使用一个字母来标识每个色板，例如，A-E是jQueryMobile框架原生提供的色板。您可以下载jQueryMobile框架所提供的CSS文件，查看现有的色板。要创建新色板，您可以使用字母表中任何未使用的字母（即F-Z）。确定了希望使用的字母后，您可以引用任何现有的色板，为所有页面元素复制和自定义类。metaname=viewportcontent=width=device-width,initial-scale=1回页首页面主题页面主题由包含整个网页的HTML元素的样式组成。jQueryMobile的受推荐页面结构中包含一个div元素，该元素有一个包含该页面的值的data-role属性。要设置此元素的样式，可对它应用一个data-theme属性，为新的色板指定一个惟一且未使用的值，以便可以为它编写一个自定义CSS。以下代码显示了使用data-theme值F的page元素的示例：通过使用这个data-role和data-theme，jQueryMobile框架实际上在page元素中创建并添加了一些CSS类。以下是在经过框架处理后，浏览器中的输出的示例：可以看到，page元素中添加了一些CSS类。ui-page和ui-page-active类已基于data-role值page进行了分配，ui-body-f类基于data-theme值F进行了分配。您可以使用任何这些类来设置page元素或它的内容的样式。清单2给出了使用ui-body-f类向page元素添加自定义样式的示例。清单2.使用CSS设置jQueryMobile页面元素的样式您添加到此类的自定义CSS设置移动网页中使用的背景颜色和字体。创建了页面的色板之后，您可以更详细地设置您所针对的HTML元素以及为其设置样式的HTML元素。例如，清单3展示了如何设置page元素中出现的输入文本和密码字段的样式。清单3.设置页面元素中显示的所有输入文本和密码字段的样式一旦您获得了page元素的控制权，就存在无限可能。借助这个包含网页内容的包含元素，您可以真正自定义任何元素。回页首工具栏主题在jQueryMobile框架中，工具栏是页眉和页脚元素。要将工具栏定义为页眉或页脚，您可以使用data-role属性。data-role属性的值应该为header或footer，具体取决于您创建的元素。清单4提供了page元素中包含的页眉和页脚工具栏的示例。清单4.使用页眉和页脚工具栏divdata-role=pagedata-theme=fdivdata-role=pagedata-theme=fclass=ui-pageui-body-fui-page-activestyle=min-height:580px;.ui-body-f{background-color:#f9f9f9;font-family:LucidaSansUnicode,LucidaGrande,Arial,sans-serif;}.ui-body-finput[type=text],.ui-body-finput[type=password]{background-color:#ccc;}为工具栏分配一个主题非常简单，只需使用data-theme属性并为它提供一个自定义色板值即可。默认情况下，系统为页眉和页脚工具栏分配了a色板来显示可视的分层结构。以下是分配给页眉工具栏的一个自定义主题的示例：要设置此主题的样式，您需要为该栏创建一个新的CSS类（清单5）。清单5.设置页眉工具栏的样式这个新的自定义CSS类设置所有应用了Fdata-theme的工具栏的样式。但是，您可能常常希望页眉和页脚看起来不同。要实现这种差异，则需要创建一个新的自定义主题（将它命名为G），并创建一个新CSS类来设置它的样式（清单6）。清单6.为页眉工具栏添加一个自定义CSS类G工具栏主题设置了一些基本属性，但它还包含针对不同浏览器的复杂的多种渐变。这些渐变非常复杂，但幸运的是您不需要记住如何创建它们，因为一些网站将为您生成这些渐变。所以，您只需将代码复制并粘贴到您的CSS类中即可。请参阅阅本文的参考资料部分，获取为您的网站生成渐变的链接。divdata-role=headerh1PageTitle/h1/divdivdata-role=footerh4PageFooter/h4/divdivdata-role=headerdata-theme=fh1PageTitle/h1/div.ui-bar-f{padding:10px0px;background-color:#069;border-bottom:2pxsolid#036;color:#fff;}.ui-bar-g{margin-top:20px;padding:10px0;color:#fff;border-bottom:2pxsolid#000;background-color:#000;background:-moz-linear-gradient(top,rgba(204,204,204,1)0%,rgba(0,0,0,0.65)100%);/*FF3.6+*/background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,rgba(204,204,204,1)),color-stop(100%,rgba(0,0,0,0.65)));/*Chrome,Safari4+*/background:-webkit-linear-gradient(top,rgba(204,204,204,1)0%,rgba(0,0,0,0.65)100%);/*Chrome10+,Safari5.1+*/background:-o-linear-gradient(top,rgba(204,204,204,1)0%,rgba(0,0,0,0.65)100%);/*Opera11.10+*/background:-ms-linear-gradient(top,rgba(204,204,204,1)0%,rgba(0,0,0,0.65)100%);/*IE10+*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',endColorstr='#a6000000',GradientType=0);/*IE6-9*/background:linear-gradient(top,rgba(204,204,204,1)0%,rgba(0,0,0,0.65)100%);/*W3C*/}回页首内容主题content元素可使用您选择的自定义色板设置主题。要为您的移动网站中的内容创建自定义色板，必须先创建一个content元素（参见清单7）。清单7.向您的内容元素添加一个可折叠的内容块这个内容块将在加载页面时折叠。当用户单击标题栏时，它会显示您稍后要创建的登录表单。要设置这个内容块的样式，只需将一个data-theme分配给它并创建一个自定义CSS类即可。清单8提供了一些与可折叠的内容块和它的内容相关联的自定义类的示例。清单8.与可折叠内容块的标题栏关联的自定义CSS类这些CSS类定义了可折叠的标题栏的不活动、活动和悬停状态。清单7中的h3标记使用一个ui-collapsible-heading类转换为了h3；包含的文本（在本例中为“Login”）通过一些类转换为一个超链接，具体操作取决于所处的状态。用于这个超链接的3个类是ui-btn-up-f、ui-btn-down-f和ui-btn-hover-f。这些类中的每一个都无需加以说明，它们涵盖了可折叠内容块的标题栏的释放、按下和悬停状态。这些类依据data-theme值而更改，所以这些类在末尾附加了一个F；如果您希望使用data-theme值G，这些类将一个G附加到末尾，代替F。回页首列表主题列表在移动网页上很常见，因为它们提供了一种为忙碌的人们快速显示选项的方式。要将一个常规HTML列表转换为富有吸引力且易于在触摸设备上使用的移动列表，只需将data-role属性设置为listview即可，如清单9中所示。清单9.将一个简单的HTML列表转换为一个适合触摸的列表divdata-role=collapsibledata-collapsed=truedata-theme=fh3Login/h3Loginformwillgohere/div