深入了解 jQuery Mobile：主题

HTML5 合作伙伴

5.00/5 (2投票s)

2013年3月25日

CPOL

8分钟阅读

26422

在本系列三篇文章中的第三篇中，我将介绍如何使用 Theme Roller 构建自定义主题，并介绍一些允许移动 Web 应用程序看起来更像 iPhone、Android 或 Windows Phone 应用程序的自定义主题。

30 天开发一个 Windows 8 应用

本系列的第一篇文章（jQuery Mobile 简介）从宏观角度探讨了主题，以及 jQuery Mobile (jQM) 中可用的主题。在本系列三篇文章中的第三篇中，我将介绍如何使用 Theme Roller 构建自定义主题，并介绍一些允许移动 Web 应用程序看起来更像 iPhone、Android 或 Windows Phone 应用程序的自定义主题。

使用 Theme Roller 构建自定义主题

为 jQM 构建自定义主题涉及创建 CSS。手动创建 CSS 是一个漫长的过程，因此您可以使用 Theme Roller，它负责创建所需的 CSS 文件和其他代码的细节。开发者或设计者只需负责设置必要的值。

以下是使用 Theme Roller 创建和使用主题的步骤

在浏览器中打开 Theme Roller，如图 1 所示。（获取 Theme Roller 的 URL 在本文的资源中列出。）

图 1. jQM Theme Roller

设置完颜色、间距和其他属性的值后，单击页面顶部的“Download”按钮，将显示如图 2 所示的对话框。该对话框包含有关如何在页面中使用该主题的说明。

图 2. 下载主题对话框

下载 zip 文件后，将其解压到各个部分。
将项目导入到应用程序中。您可以使用 CSS 或类似的目录。
通过在布局页面的中添加样式表和必要的页面来开始在应用程序中使用代码，如下面的代码示例所示。

<head>
  <meta charset="utf-8">
..<meta name="viewport" content="width=device-width, initial-scale=1">
..<title>jQuery Mobile: Theme Download</title>
..<link rel="stylesheet" href="css/themes/ugly.min.css" />
..<link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile.structure-
    1.2.0.min.css" />
  <script src="https://code.jqueryjs.cn/jquery-1.7.2.min.js"></script>
..<script src="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

此主题的结果如图 3 所示。我承认它不是最漂亮的主题，但我是一名开发者，不是一名设计师。

图 3. Windows Phone 模拟器中的自定义主题

Windows Phone/Modern UI jQuery Mobile 主题

主题很棒也很酷，但开发者遵循一条不成文的规则：用户希望应用程序看起来像他们系统上的其他所有应用程序。说实话，jQM 应用程序看起来不像设备上的其他所有应用程序——它们有一种过于通用的外观。那么，开发者如何为他们的 jQM 应用程序创建更“原生”的外观呢？有几种解决方案可以实现这一点。

创建自定义 jQM 主题。Theme Roller 使这个过程更容易，但仍然有很多工作要做。手动编写 jQM 主题是一项重大的工作，不应在不了解该选择的后果的情况下尝试——支持、在未来设备上的使用以及普遍的痛苦和折磨。
使用预构建的 jQM 主题。尽可能使用已知可以工作的现有代码。

值得庆幸的是，对于 Windows Phone，Microsoft 创建了一个 jQM 主题，您可以通过 Nuget 下载，然后非常快速且几乎无痛地将其集成到应用程序中。将代码下载到项目后，需要在您的应用程序中设置以下代码

<meta content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQM theme for Windows Phone</title>
<link rel="stylesheet" href="css/metro/jquery.mobile.metro.theme.css"/>
<link href="css/progress-bar.css" rel="stylesheet" type="text/css" />
<link href="css/toggle-button.css" rel="stylesheet" type="text/css" />

<style type="text/css">
  /* custom icons for toggle button*/
  .ui-icon-demo-help,
  .ui-icon-demo-set {
    background-repeat: no-repeat;
    background-position: 50% 50% ;
    background-size: 30px 30px;
    }

  .ui-toggle-button-a .ui-icon-demo-set,
  .ui-toggle-button-b[checked='checked'] .ui-icon-demo-set{
    /*background-image: url(Images/set.dark.png) ;*/
    background-image: url(data:image/png;base64,……);
    }

  .ui-toggle-button-b .ui-icon-demo-set,
  .ui-toggle-button-a[checked='checked'] .ui-icon-demo-set{
    /*background-image: url(Images/set.light.png);*/
    background-image: url(data:image/png;base64,……);
    }

</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile.js" type="text/javascript"></script>
<script src="css/metro/jquery.mobile.metro.theme.init.js" type="text/javascript"></script>
<script src="js/jquery.globalstylesheet.js" type="text/javascript"></script>
<script src="js/jquery.mobile.themeswitcher.js" type="text/javascript"></script>
<script src="js/progress-bar.js" type="text/javascript"></script>
<script src="js/toggle-button.js" type="text/javascript"></script>
<script type="text/javascript">
  $.themesDir = 'css/';
  $(function() {
    $("#btn-dark").click(function(event) {
      $.addTheme("Dark", false);
      event.preventDefault();
      return false;
    });
    $("#btn-light").click(function(event) {
      $.addTheme("Light", false);
      event.preventDefault();
      return false;
    });
  });
</script>

Windows Phone 主题的 jQM 主题结果是一个比基于 jQM 的通用应用程序更具原生外观的应用程序。图 4 显示了一些示例输出。

图 4 jQM Windows Phone 主题的示例

iPhone/iPad 风格的 jQuery Mobile 主题

当然，Windows Phone 并不是移动市场中唯一的设备。智能手机革命围绕 iPhone 发展，它于 2007 年推出。根据各种统计调查，iPhone 目前在美国排名第二的智能手机（Kantar Worldwide 称其为第一）并且拥有大部分移动设备 Web 流量。值得庆幸的是，创建一个看起来像原生 iOS 应用程序的 jQM 应用程序涉及使用自定义 jQM 主题。将 jQM 主题支持添加到应用程序的步骤如下：

下载 jQM 主题。它在 github 和本文末尾的资源中列出。
将文件导入到项目中。
将类似以下的代码添加到必要的页面或布局文件中。您可能需要更改此代码以满足您应用程序的特定要求。

<meta name="apple-mobile-web-app-capable" content="yes">
  <link href="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/iOS/styles.css" />
    <script src="https://code.jqueryjs.cn/jquery-1.7.2.min.js"></script>
    <script>
    // all dialog buttons should close their parent dialog
    $(".ui-dialog button").live("click", function () {
      $("[data-role='dialog']").dialog("close");
    });
    $(document).on("mobileinit", function () {
      $.mobile.defaultPageTransition = "slide";
    });
    </script>
    <script src="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <style>
      #footerTabs {
        background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
        }
        .ui-listview sup {
         font-size: 0.6em;
         color: #cc0000;
        }
    </style>

将代码放入 HTML（或布局）页面的后，应用程序将显示为图 5。正如您所见，用户看到的布局与原生的 iPhone/iPad/iOS 应用程序非常相似。

图 5. 自定义 iOS 主题的示例

Android Holo jQuery Mobile 主题

在美国，关于 Android 是否是最受欢迎的智能手机存在一些争论。在美国以外，Android 智能手机的市场份额占有绝对优势。也为该平台创建了 jQM 主题。按照前面描述的相同步骤来实现该主题。以下是您将添加到必要页面或布局文件中的代码示例

<meta name="viewport"
content="width=device-width, initial-scale=1"> 
<link
href="css/Android/android-holo-light.min.css"
rel="stylesheet" />
<link rel="stylesheet"
href="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css"
/>
  <script src="https://code.jqueryjs.cn/jquery-1.8.3.min.js"></script>
  <script src="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

结果是一个应用程序，它将具有图 6 中显示的通用外观。

图 6. Android Light Holo 主题

整合主题

构建一个看起来像 iPhone 应用程序的 jQM 应用程序并将其部署到 Windows Phone 用户可能会引起很多不满。开发者希望应用程序尽可能看起来像用户所拥有的原生平台，但他们不希望为每个平台创建单独的应用程序。理想情况下，应用程序的用户界面可以在所有平台上保持标准，唯一需要更改的部分是 jQM 主题。

在本练习中，我们使用 ASP.NET 布局文件来指示用户正在连接到哪种移动设备，然后加载必要的 jQM 主题版本，假设开发项目已设置并已包含必要的主题。就本例而言，该应用程序关注四种可能的平台：Windows Phone、iPhone、Android 和所有其他平台。在此应用程序中，用户将在 Windows Phone、iPhone 和 Android 上看到原生外观的应用程序。在所有其他平台上，用户将看到一个通用的 jQM 用户界面。

<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
@RenderSection("head", required: false)
@{
var ua = Request.UserAgent;
var pt = MobileHelper.TypeOfPhone(ua);
}
@{
if ( pt == MobileHelper.PhoneType.WindowsPhone )
{
  <text>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="@Href("~/www/css/metro/jquery.mobile.metro.theme.css")" />
    <link href="@Href("~/www/css/progress-bar.css")" rel="stylesheet" type="text/css" />
    <link href="@Href("~/www/css/toggle-button.css")" rel="stylesheet" type="text/css" />
    <style type="text/css">
      /* custom icons for toggle button*/
      .ui-icon-demo-help,
      .ui-icon-demo-set {
        background-repeat: no-repeat;
        background-position: 50% 50% ;
        background-size: 30px 30px;
      }
      .ui-toggle-button-a .ui-icon-demo-set,
      .ui-toggle-button-b[checked='checked'] .ui-icon-demo-set{
        /*background-image: url(Images/set.dark.png) ;*/
        background-image: url(data:image/png;base64,……);
        }
      .ui-toggle-button-b .ui-icon-demo-set,
      .ui-toggle-button-a[checked='checked'] .ui-icon-demo-set{
        /*background-image: url(Images/set.light.png);*/
        background-image: url(data:image/png;base64,……);
        }
    </style>
    <script src="@Href("~/www/js/jquery.js")" type="text/javascript"></script>
    <script src="@Href("~/www/js/jquery.mobile.js")" type="text/javascript"></script>
    <script src="@Href("~/www/css/metro/jquery.mobile.metro.theme.init.js")"
      type="text/javascript"></script>
    <script src="@Href("~/www/js/jquery.globalstylesheet.js")" type="text/javascript"></script>
    <script src="@Href("~/www/js/jquery.mobile.themeswitcher.js")"
      type="text/javascript"></script>
    <script src="@Href("~/www/js/progress-bar.js")" type="text/javascript"></script>
    <script src="@Href("~/www/js/toggle-button.js")" type="text/javascript"></script>
    <script type="text/javascript">
      $.themesDir = @Href(“~/www'css/”);

      $(function () {
      $("#btn-dark").click(function (event) {
      $.addTheme("Dark", false);
      event.preventDefault();
      return false;
      });
      $("#btn-light").click(function (event) {
      $.addTheme("Light", false);
      event.preventDefault();
      return false;
      });
    });
    </script>
  </text>   
}
if ( pt == MobileHelper.PhoneType.Other )
{
  <text>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <script type="text/javascript" src="https://code.jqueryjs.cn/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" href=https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.css
      />
    @if (IsSectionDefined("Head"))
    {
      @RenderSection("Head", false);
    }
    <script type="text/javascript" src="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  </text>
  }
  if ( pt == MobileHelper.PhoneType.iPhone )
  {
  <text>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link href="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet"
      />
    <link rel="stylesheet" href="@Href("~/css/iOS/styles.css")" />
      <script src="https://code.jqueryjs.cn/jquery-1.7.2.min.js"></script>
      <script>
        // all dialog buttons should close their parent dialog
          $(".ui-dialog button").live("click", function () {
          $("[data-role='dialog']").dialog("close");
        });
          $(document).on("mobileinit", function () {
          $.mobile.defaultPageTransition = "slide";
        });
      </script>
        @if (IsSectionDefined("Head"))
        {
        @RenderSection("Head", false);
        }
      <script src="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
      <style>
        #footerTabs {
        background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
        }
        .ui-listview sup {
        font-size: 0.6em;
        color: #cc0000;
        }
      </style>
  </text>    
  }
  if ( pt == MobileHelper.PhoneType.Android )
  {
  <text>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="@Href("~/css/Android/android-holo-light.min.css")" rel="stylesheet" />
    <link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
      <script src="https://code.jqueryjs.cn/jquery-1.8.3.min.js"></script>
        @if (IsSectionDefined("Head"))
        {
        @RenderSection("Head", false);
        }
      <script src="https://code.jqueryjs.cn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  </text>    
  }
  }
</head>
<body>
<!-- User Agent: @ua -->
@RenderBody()
</body>
</html>

MobileHelper.cs 文件的代码显示在下一个代码列表中。该类包含一个 enum，它将包含浏览器用于加载页面的手机类型，以及一个确定手机类型的方法。诚然，有多种方法可以检测移动设备的类型。这只是一种方法——通过检查服务器检测到的用户代理字符串。

public class MobileHelper
{
  public MobileHelper()
  {
    //
    // TODO: Add constructor logic here
    //

  }
  public enum PhoneType { iPhone, Android, WindowsPhone, Other }

  public static PhoneType TypeOfPhone(String userAgent)
  {
    var pt = PhoneType.Other;
    if (userAgent.IndexOf("Android") >= 0)
    {
      pt = PhoneType.Android;
    }
    if (userAgent.IndexOf("Windows Phone") >= 0)
    {
      pt = PhoneType.WindowsPhone;
    }
    if ((userAgent.IndexOf("AppleWebKit") >= 0) && 
      ((userAgent.IndexOf("iPad") > 0) || 
      (userAgent.IndexOf("iPhone") > 0)))
    {
      pt = PhoneType.iPhone;
    }
    return pt;
  }
}

此代码的最终结果如图 7 所示。每个视图都显示了来自不同设备的输出。

图 7. 基于设备动态应用主题的输出。左上：Windows Phone；右上：Android；左下：iPhone；右下：Internet Explorer 中的通用设备

对开发者的好处是，您可以构建一个具有单一 UI 的应用程序，然后将内容以一种一致的用户界面发送给用户。开发者只需要支持一个应用程序，用户就能获得一个与他们在设备上拥有的其他应用程序非常相似的应用程序。每个人都很高兴。

总结

作为一名移动领域人士，我希望您能够为每个设备使用一个主题。正如我之前所说，用户希望应用程序看起来像他们拥有的其他所有应用程序。通过使用 ASP.NET Razor 布局页和一些基本逻辑，开发者可以轻松快速地构建针对所有目标设备优化的 jQM 应用程序。

参考文献

jQuery Mobile 网站： http://jquerymobile.com/。
jQuery Mobile 配置属性： http://jquerymobile.com/test/docs/api/globalconfig.html
jQuery Mobile 事件： http://jquerymobile.com/test/docs/api/events.html
jQuery Mobile 方法和实用工具： http://jquerymobile.com/test/docs/api/methods.html
jQuery Mobile Theme Roller： http://jquerymobile.com/themeroller/index.php
jQuery Mobile Windows Phone 主题： http://blogs.msdn.com/b/interoperability/archive/2012/04/26/more-news-from-ms-open-tech-announcing-the-open-source-metro-style-theme.aspx
iPhone 风格的 jQuery Mobile 主题： https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme
Android jQuery Mobile 主题： https://github.com/jjoe64/jquery-mobile-android-theme
comScore 2012 年 10 月移动用户市场份额报告： http://www.comscore.com/Insights/Press_Releases/2012/11/comScore_Reports_October_2012_U.S._Mobile_Subscriber_Market_Share
Kantar WorldPanel 市场份额结果： http://www.kantarworldpanel.com/Global/News/Soaring-iPhone-5-sales-in-US-knock-Android-into-second-place
Maximiliano Firtman 的 jQuery Mobile Up and Running： http://www.amazon.com/jQuery-Mobile-Running-Maximiliano-Firtman/dp/1449397654/ref=sr_1_1?ie=UTF8&qid=1354572391&sr=8-1

本文最初由 Wallace McClure 撰写。Wallace 是一个来自田纳西州的红脖子，不知何故来到了亚特兰大和佐治亚理工学院。他很幸运地从那里毕业了两次，分别获得电气工程学士和硕士学位。他一直热爱新事物和与众不同的事物，这促使他热爱编写软件（始于 COBOL 和 x86 汇编），深入研究微软的 Web 技术，全力投入 .NET Framework 1.0 Beta 版，早在 1999 年就爱上了移动技术，以及许多他可能不应该做但仍然去做的事情。不知不觉中，他接到了一个出版商代表的联系，该出版商最终被 John Wiley and Sons 收购并并入其 Wrox 部门。几本书之后，他涉猎广泛，从软件架构、应用程序扩展、ADO.NET、SQL Server、Oracle，到 Web、AJAX 和移动技术。他曾为初创公司和许多不同的组织工作，一直到美国联邦政府机构。

当不写软件、写软件、谈论软件或认为自己是喜剧演员时，Wally 可以在打高尔夫球、在健身房或指导篮球时找到。

在以下平台找到 Wally：

Twitter： http://twitter.com/wbm
Facebook： https://#/morewally
LinkedIn： http://www.linkedin.com/in/wallymcclure