实战：jQuery Mobile开发HTML5移动应用

引自：http://tech.it168.com/a2011/1209/1286/000001286393_all.shtml

随着移动互联世界的到来，目前已发展到多种移动操作系统割据的局面，而开发者则急需要能运用原有的开发知识和技能，快速方便地构建移动应用程序，并期望能运行在不同的手机操作平台上，比如Android,iOS,黑莓等。

而目前，出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架，其中最为大家熟悉的是jQueryMobile框架(http://jquerymobile.com)，它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用，而且直接通过手机的浏览器即可浏览。除此以外，jQueryMobile也有很好的扩展性，用户可以很好地对其进行定制修改，本文将指导读者对jQueryMobile的提供的主题样式进行自定义，从而创建符合用户需要的样式。

本文假设读者已具备初步的jQueryMobile相关知识，如果读者不大了解jQueryMobile，可以通过如下几篇文章进行学习，文章链接地址为：

统一接口工具JQueryMobile简介

http://tech.it168.com/a2010/1210/1136/000001136835.shtml

使用JQueryMobile实现手机新闻浏览器

http://tech.it168.com/a2011/0321/1168/000001168231.shtml

JQueryMobile实现手机新闻浏览器(2)

http://tech.it168.com/a2011/0323/1169/000001169682.shtml

使用jQueryMobile实现新闻浏览器(3)

http://tech.it168.com/a2011/0324/1170/000001170077.shtml

jQueryMobile中的主题

在jQueryMobile中，有一个建议的页面模版结构，其中包含了比如页面头部，页面主体和页脚等部分。jQueryMobile使用HTML5中的data-role属性进行定义，下面的代码中就显示了一个主体页面的框架：

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">
        <p>Page content goes here.</p>        
    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
    
</div>

而另外一个建议使用的元素是标签，这个标签的作用是指定浏览器以何种方式在手机上显示网页，代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1">

<metaviewport>标签对于在移动设备上正确显示移动网页是十分重要的，如果不使用该标签，则页面内容在显示时可能会失真或者变形，或者是根本不能适合移动设备浏览。在下图中，显示了一个使用标签的页面，可以看到，页面内容的显示能适合移动设备的大小。

jQueryMobile中的主题

jQueryMobile框架中，包含了一个页面主题的框架，它提供了对页面样式的相关控制功能。通过使用HTML5的data-theme属性标签，能轻易为某一个页面元素应用已有的jQueryMobile的样式。默认的主题样式有5种，使用英文字母去区分，比如A-E开头的都内置的样式，开发者可以通过下载jQueryMobile的代码中去学习了解这样样式文件是如何编写的。假如开发者要编写新的样式，可以使用F-Z字母中的任意一个去命名新建立的样式，然后就可以编写相关的代码。

页面的主题样式

我们先来看下如何定义页面主题样式。页面的主题样式是通过data-role来指定属性的值为page,再使用data-theme主题指定使用的样式，如下代码：

<divdata-role="page"data-theme="f">

这里指定了使用一个新的主题样式，命名为”f”。实际上，jQuerymobile框架为自动为当前的页面增加对应的CSS样式，下面代码就是浏览器在执行代码后返回生成的代码：

<div data-role="page" data-theme="f" 
class="ui-page ui-body-f ui-page-active" style="min-height: 580px;">

可以看到，其中的样式class="ui-pageui-body-fui-page-active"为jQuerymobile添加的样式。其中ui-page和ui-page-active为根据data-role的设定样式去进行设置赋值，而ui-body-f则为用户自定义的样式，下面是一个自定义的ui-body-f样式的代码：

.ui-body-f {
  background-color: #f9f9f9;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
}

在这个自定义的样式中，定义了背景颜色和字体。如果要对某一个移动页面中的某些元素进行自定义，也是可行的，可以使用的方法为在样式中指定页面的元素名，如下代码所示：

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

其中指定了对页面中的文本框和密码框，使用的是ui-body-f的CSS样式。

因此，只要掌握了这种方法，开发者就可以对页面中的各类元素进行样式的定义了，十分方便。

工具栏样式的定义

在jQueryMobile框架中,工具条属于页面的头部和底部元素。为了将工具条定义为头部或者底部，可以使用data-role属性去指定，如下代码所示，表示在一个页面中同时定义了头部的工具栏和底部的工具栏：

　　<div data-role="header">
    <h1>Page Title</h1>
</div>

<div data-role="footer">
    <h4>Page Footer</h4>
</div>

同样，为页面的头部和底部指定一个样式也是很简单的，也是利用data-theme属性，如下代码所示：

<div data-role="header" data-theme="f">
    <h1>Page Title</h1>
</div>

为此，需要创建一个CSS样式，如下：

.ui-bar-f {
  padding: 10px 0px;
  background-color: #069;
  border-bottom: 2px solid #036;
  color: #fff;
}

就是说，新创建的这个样式是装饰所有的data-theme为F的页面元素。然而，有的时候，可能需要页面的底部使用不同的样式，那么可以另外在新建一个名为g的样式，创建的代码如下：

.ui-bar-g {
  margin-top: 20px;
  padding: 10px 0;
  color: #fff;
  border-bottom: 2px solid #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, left top, left bottom, 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 */
}

在这个样式中，设置了一些基本的CSS3属性外，还为不同的浏览器设计了不同的背景颜色和相关的渐变背景，更详细的关于CSS3渐变背景的设置请参考相关资料。

内容的主题样式

接下来，我们学习下在内容页部分，是如何应用主题样式的。例子代码如下：

<div data-role="collapsible" data-collapsed="true" data-theme="f">
    <h3>>Login</h3>
    Login form will go here
</div>

注意,在这里,使用了data-role属性的值为collaspsible,表明这个页面的div是一个可折叠的层,并且设置了data-collapsed属性为true，其效果为当页面加载时，显示的是折叠状态，而当用户点标题栏时，才会显示登陆的表单。同样，在data-theme属性中设置样式为f,其样式定义如下：

ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-up-f {
  background: #666;
  color: #fff;
  text-decoration: none;
}
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-down-f, 
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-hover-f {
  background: #999;
  color: #fff;
  text-decoration: none;
}

在上面的这段CSS中，为标题工具栏定义了三种状态的样式，即：非激活，激活中和鼠标移动在上面。其中

的标签会被CSS修饰转变为一个带有ui-collapsible-heading的样式，而它包含的文字，这里是指“Login”将会被转化为带有样式的链接，其中有三种不同的链接的样式，分别为ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f,分别代表的工具条的三种不同的状态(up,down,hover)。以上的样式中，会根据data-theme中指定的样式号而有所变化，比如开发者指定的是使用g的新样式，则以上的CSS样式中，则会全部以-g结尾。

列表样式

在移动页面应用中，列表样式是十分普遍的，因为它们很容易地导航。在jQueryMobile中，使用列表很简单，只需要在data-role中指定为listview即可，如下代码所示：

<ul data-role="listview" data-inset="true" data-theme="f">
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
</ul>

默认的样式如下图所示：

列表样式开发

如果要上面的列表实现圆角效果的话，可以增加data-inset属性，并将其属性值设置为true即可，如下效果图，出现了圆角：

列表样式开发

同样，为列表增加样式也十分简单，只需要设置data-theme属性的值为样式的名称即可，比如同样增加样式f，定义样式f如下：

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

这里，设定了文字的颜色为白色，并且使用ui-btn-up-f，ui-btn-down-f，ui-btn-hover-f设置了列表选项的三种不同状态(up,down,hover)。

表单及按钮的主题样式

在jQuerymobile中，增加表单及按钮，其实跟普通的网页中增加差不多，只需要增加相关的input标签元素或button标签元素即可，代码示例如下：

<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>

同样，我们指定表单的样式如下：

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

这里我们在上文中已经谈到，即将输入文本框和密码框都使用f样式，在上面的代码中，请留意

标签一段，其中分别对两个按钮使用了不同的样式，对于RESET按钮，

使用的是默认的jQuerymobile的样式，而对submit按钮，则使用的是data-theme=f的样式，

最后看下f样式的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;
}

本文的代码可以在如下这个连接下载(http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=774893&filename=jquery-mobile-custom-themes.zip&method=http&locale=)

小结

本文讲解了如何在jQueryMobile框架中，自定义合适各种布局的样式主题，其中关键点在于使用data-theme属性指定和命名新建立的CSS样式，并且要注意样式的命名和编写要符合jQueryMobile的规范即可，更多的关于jQueryMobile自定义样式的内容，请参考其官方网站的文档指引。