实战：jQuery Mobile开发HTML5移动应用-技术开发专区

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

作者：廖煜嵘编辑：景保玉 2011-12-12 07:00 IT168网站原创

　　工具栏样式的定义

　　在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 渐变背景的设置请参考相关资料。

第1页：jQuery Mobile中的主题第2页：页面的主题样式第3页：工具栏样式的定义第4页：内容的主题样式第5页：列表样式开发第6页：表单及按钮的主题样式

关注我们