创建自定义 jQuery 移动主题

自定义页面、工具栏、内容、表单元素、列表、按钮等元素的外观

智能电话和平板设备的高采用率最终导致增加了对移动 Web 开发人员和设计师的需求。jQuery Mobile 框架支持您创建能与原生应用程序开发结果相匹敌的移动 Web 体验，让用户能够通过 Web 浏览器提供对应用程序和网站的及时访问，而不是让他们下载和安装移动应用程序。本文将了解如何使用 jQuery Mobile 主题框架创建具有自定义品牌的移动网站和 Web 应用程序。

0 评论：

Kris Hadlock, Web 开发人员/设计师, Studio Sedition

2012 年 5 月 25 日

• 

  向 listview 添加一个主题很简单。就像其他每个主题一样，只需分配一个 data-theme 值即可。清单 9 使用 F 作为主题值。要自定义列表项，则需要使用 CSS 来设置它们，如 清单 10 所示。

  清单 10. 自定义列表项

  .ui-listview .ui-btn-up-f a, 
  .ui-listview .ui-btn-down-f a, 
  .ui-listview .ui-btn-hover-f a {
    color: #fff;
  }

  您使用 中的 CSS 设置的元素是列表项中的实际超链接，使用这些元素是为了将文本颜色设置为白色。ui-btn-up-f、ui-btn-down-f 和 ui-btn-hover-f 类都由 jQuery Mobile 注入，用于处理列表项的不同状态。

   

  回页首

  表单和按钮主题

  您采用与任何网站相同的方式，使用 jQuery Mobile 框架为移动网站创建一个表单：只需添加输入元素和关联的标签即可，它们将出现在现有的页面主题上。清单 11 提供了一个示例。

  清单 11. 创建一个移动表单

  <div data-role="collapsible" data-collapsed="true" data-theme="f">
    <h3>>Login</h3>
    <form action="" method="post">
      <label for="username">Username</label>
      <input type="text" name="username" id="username" />
      <label for="username">Password</label>
      <input type="password" name="password" id="password" />
      <fieldset class="ui-grid-a">
        <div class="ui-block-a">
          <button type="reset" data-inline="true">Reset</button>
        </div>
        <div class="ui-block-b">
          <button type="submit" data-inline="true" data-theme="f">Submit</button>
        </div>
      </fieldset>
    </form>
  </div>

  表单元素也可以设置自定义主题。清单 12 给出了一个使用您的 page 元素中的 F 主题设置表单样式的示例。

  清单 12. 自定义您的登录表单中使用的输入元素的样式

  .ui-body-f input[type="text"], 
  .ui-body-f input[type="password"] {
    background-color: #ccc;
  }

  在 清单 11 中，您可能已注意到包含自定义按钮代码的 fieldset。每个按钮都有一个与之关联的不同主题：Reset 按钮使用默认主题，而Submit 按钮使用 F 主题。清单 13 给出了为这两个按钮创建的用来实现不同外观的自定义 CSS 类。

  清单 13. 表单按钮的自定义 CSS 类

  .ui-btn-up-f {
    background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%, 
    rgba(78,137,197,0.65) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
    rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%,
    rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,
    rgba(78,137,197,0.65) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%,
    rgba(78,137,197,0.65) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#396b9e‘, 
    endColorstr=‘#a64e89c5‘,GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, rgba(57,107,158,1) 0%,
    rgba(78,137,197,0.65) 100%); /* W3C */
    border: 1px solid #225377;
    text-shadow: #225377 0px -1px 1px;
    color: #fff;
  }
  .ui-btn-down-f, 
  .ui-btn-hover-f {
    background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%, 
    rgba(75,136,182,0.65) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
    rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%,
    rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
    /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%,
    rgba(75,136,182,0.65) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#72b0d4‘, 
    endColorstr=‘#a64b88b6‘,GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
    /* W3C */
    border: 1px solid #00516E;
    text-shadow: #014D68 0px -1px 1px;
    color: #fff;
  }

  您可以看到，Save 按钮有一个与之关联的自定义渐变，使它能够与 Reset 按钮区别开来。对按钮集使用多个主题是确定哪个按钮是最重要或主要按钮的好方法。

   

  回页首

  结束语

  一旦您理解了 data-theme 属性和 jQuery Mobile 框架所提供的元素，就会发现使用该框架为适合触摸的网站设置主题很简单。增加了 data-theme 属性后，您可以分配自定义值和关联的自定义 CSS 类，它们会使您能够使用 jQuery Mobile 框架创建适合触摸的网站。要了解该框架的更多信息，请参阅 参考资料 一节，或者采用更好的方法，使用 下载 一节中的示例代码亲自测试一些自定义 CSS。

   

  回页首

  下载

  描述	名字	大小
  示例 jQuery 移动网页	jquery-mobile-custom-themes.zip	4KB

  参考资料

  学习

  • 查阅最新的 jQuery Mobile 框架文档。
  • ColorZilla 是一个渐变生成器，它使得使用 CSS 创建渐变变得很容易。
  • 在 jQuery Mobile 网站上查找最新的 按钮图标 的完整列表。
  • 在 developerWorks Web 开发专区 中，可以查找数百篇 技巧文章和教程，以及适合 Web 开发人员的下载、讨论论坛和其他丰富资源。
  • 在 developerWorks 移动开发博客 上检查移动更新。
  • 您将在 developerWork 上找到 数百篇与移动相关的文章。
  • 观看 developerWorks 演示中心，包括面向初学者的产品安装和设置，以及为经验丰富的开发人员提供的高级功能。

  获得产品和技术

  • 从 jQuery Mobile 框架网站下载 jQuery Mobile。
  • 下载并试用 IBM Mobile Technology Preview，一组代码样例和服务，可以帮助您开始构建可扩展和集成到企业中的移动应用程序。该预览包括一个 RESTful 通知服务；一个用于构建混合移动应用程序的开源框架 PhoneGap；一个轻量级的 WebSphere Application Server 运行时；以及向您演示其工作方式的样例代码。
  • IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile 包括 IBM Dojo 1.7 Toolkit、新的移动和富 Internet 应用程序 (RIA) 构建块，以及一个基于 Dojo 的图表组件。使用附带的 Rational 工具，该 Feature Pack 可帮助您采用原先面向桌面浏览器开发的 WebSphere 应用程序，对其进行调整，并将它们部署到移动设备中。
  • 以最适合您的方式 评估 IBM 产品：下载产品试用版，在线试用产品，在云环境下试用产品，或者在 SOA 沙盒 中花费几个小时来学习如何高效实现面向服务架构。

  创建自定义 jQuery 移动主题,布布扣,bubuko.com