创建定制的jQuery Mobile主题

虫虫 发布于 2011/12/07 22:20
阅读 9K+
收藏 5
jQuery Mobile 框架是一套JavaScript库,用来帮助你快速创建适合移动设备访问的网站。它可以把目前的页面转换成适合触摸操作的页面。jQuery Mobile可以让用户通过浏览器直接访问到触摸友好的应用。

jQuery Mobile包含了一套主题机制可以让你方便的定制你的网页应用界面。你可以自定义颜色,图标,页面形式,工具栏样式等等。本文将简单讲解各种元素如何设置自定义主题。

jQuery Mobile有一套推荐的页面结构,包括一些常用的元素,header,conent和footer。这些元素是通过HTML5 data-role 这个属性定义的。下面的代码就是jQuery Mobile推荐的页面模板:
<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 viewport>标签。这个标签定义了浏览器应该如何显示这个网站:
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta viewport>标签是一个很重要的标签,它会根据访问的设备不同而以不同的方式呈现网页。下图展示了添加了这个标签在手机上的展现:


jQuery Mobile框架包含了一个页面主题系统,为页面的元素的样式提供了全方位的控制。HTML5标签<data-theme>可以被添加到不同的元素上,以指定这个元素的主题。jQuery Mobile默认提供了5套主题,从A至E。你也可以创建你自己的样式,用其他没有用过的字母命名,例如F至Z。

页面主题
页面主题包括为HTML元素提供样式。jQuery Mobile建议使用<div>元素,加上data-role属性。为了给这个div加样式,我们需要再添加data-theme属性。这个属性的值必须是唯一的未被用过的样式名字,这样你才能为这个样式定义自己的CSS。在这里,我们将用“F”来作为名字:
<div data-role="page" data-theme="f">
当你指定data-role和data-theme后,jQuery Mobile实际上创建并添加了一些CSS类给这个页面的元素。下面这段代码就是我们上面代码的浏览器输出:
<div data-role="page" data-theme="f" class="ui-page ui-body-f ui-page-active" style="min-height: 580px;">
正如你所见,ui-page和ui-page-active是根据data-role为page来添加的,而ui-body-f是根据data-theme这个属性添加的。你可以任意使用这些css类去格式化page元素和内容。下面的代码展示了如何使用ui-body-f类:
.ui-body-f {
  background-color: #f9f9f9;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
}
这段自定义的CSS设置了网页的背景色和字体。一旦你创建了你的页面样式,你可以设置更加详细的样式,例如下面这段代码展示了如何设置文本框和密码框的样式:
.ui-body-f input[type="text"],
.ui-body-f input[type="password"] {
  background-color: #ccc;
} 
这样,你就可以为页面元素创建无限多种自定义的样式了。

工具栏样式
在jQuery Mobile框架中,工具栏就是header和footer元素。要定义一个工具栏是header或者footer,你可以使用data-role这个属性。这个属性的值应该是 header 或者 footer。样例如下:
<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>
下面我们来定义这个样式的内容:
.ui-bar-f {
  padding: 10px 0px;
  background-color: #069;
  border-bottom: 2px solid #036;
  color: #fff;
}
这个新的自定义CSS会格式化所有data-theme为f的工具栏。但也有可能你想让你的header和footer看起来不一样。为了实现这个效果,我们必须再定义一个主题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 */
}
g工具栏设置了一些基本属性,也包括了一些复杂的渐变和不同浏览器的效果。你并不需要记住这些CSS,有很多网站可以帮你生成这些CSS。

内容主题
和上面两个元素类似,我们可以通过以下方式来格式化内容元素:
<div data-role="collapsible" data-collapsed="true" data-theme="f">
    <h3>>Login</h3>
    Login form will go here
</div>
这个块在页面装载的时候是会收起的,当用户点击标题的时候,才会展示块的内容。我们也设置了data-theme属性,下面是我们对这个属性的定义:
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类的意义应该都是很明显的。所有这些CSS类最后的那个“f”就是根据data-theme的值生成的。


列表样式
列表是移动设备页面的常用组件。而把普通的HTML列表转化为触摸设备易于使用的列表,你只需要设置一个data-role属性就行了,例如
<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-insert属性,赋值为true,如图所示


给一个 listview 添加样式是很简单的,同样也是添加 data-theme 属性,这里我们设置了“f”样式,定义如下:
.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创建表单和正常的网站没有什么区别,添加输入元素,添加标签,这些元素会使用现有的页面样式:
<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>

当然,表单元素也能够被单独定制样式,这里我们还是用“f”这个样式名:
.ui-body-f input[type="text"],
.ui-body-f input[type="password"] {
  background-color: #ccc;
}
在上面的两段代码中,你应该发现,fieldset有自定义的按钮,每一个按钮有不同的主题。Reset按钮使用默认主题,而Submit按钮使用f主题。下面的代码是用来定义f主题的按钮样式的:
.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;
}
正如你所见,submit按钮有一个自定义的渐变效果,让这个按钮看起来更显眼。
加载中
0
lixiaokai2008
lixiaokai2008
这篇文章写得太到位了,读完就可以把jQuery Mobile基本了解了
返回顶部
顶部