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

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

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

　　表单及按钮的主题样式

　　在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自定义样式的内容，请参考其官方网站的文档指引。

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

关注我们