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

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

本文假设读者已具备初步的jQuery Mobile相关知识，如果读者不大了解jQuery Mobile，可以通过如下专题进行学习：jQuery Mobile基础入门教程

jQuery Mobile中的主题

在jQuery Mobile中，有一个建议的页面模版结构，其中包含了比如页面头部，页面主体和页脚等部分。jQuery Mobile使用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"> 

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

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

页面的主题样式

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

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

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

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

可以看到，其中的样式class="ui-page ui-body-f ui-page-active"为jQuery mobile添加的样式。其中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样式。

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

工具栏样式的定义

在jQuery Mobile框架中,工具条属于页面的头部和底部元素。为了将工具条定义为头部或者底部，可以使用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结尾。

列表样式

在移动页面应用中，列表样式是十分普遍的，因为它们很容易地导航。在jQuery Mobile中，使用列表很简单，只需要在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)。

表单及按钮的主题样式

在jQuery mobile中，增加表单及按钮，其实跟普通的网页中增加差不多，只需要增加相关的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按钮，

使用的是默认的jQuery mobile的样式，而对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= )

小结

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