jQuery Mobile 主题

通过设置元素的data-theme属性可以自定义应用的外观:

<div data-role="page" id="pageone" data-theme="a">

值描述实例a页面为灰色背景黑色文字
头部与底部均为灰色背景黑色文字
按钮为灰色背景黑色文字
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为黑色尝试一下b页面为黑色背景白色文字
头部与底部均为黑色背景白色文字
按钮为白色文字木炭背景
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为白色尝试一下

按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设置按钮为灰色（默认）或黑色：

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

"a" 主题的样式用于大多数元素，子元素通常继承父元素的样式。

主题头部和底部

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

<a href="#" class="ui-btn ui-btn-b">黑色按钮</a>

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

<div data-role="popup" id="myPopup" data-theme="b">主题弹框

<div data-role="panel" id="myPanel" data-theme="b">主题面板

主题可折叠按钮和内容

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>

主题列表

<ol data-role="listview" data-theme="b">
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
      <li data-theme="a"><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
    </ol>

 <h2>分割按钮实例</h2>
    <ul data-role="listview" data-inset="true" data-split-theme="b">
      <li data-role="divider" data-theme="a">浏览器</li>
      <li>
        <a href="#">
        <img src="chrome.png">
        <h2>Google Chrome</h2>
        <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
      </li>
      <li>
        <a href="#">
        <img src="firefox.png">
        <h2>Mozilla Firefox</h2>
        <p>Firefox 是一款来自 Mozilla。发布于 2004 年。</p>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
      </li>
    </ul>

主题可折叠列表

<div data-role="collapsible" data-theme="b" data-content-theme="a">
    <h4>B</h4>
    <ul data-role="listview">
       <li><a href="#">Billy</a></li>
       <li><a href="#">Bob</a></li>
    </ul>
    </div>
  </div>

主题表单

 <form method="post" action="demoform.asp">
  <div class="ui-fieldcontain">
    <label for="name">全名:</label>
    <input type="text" name="text" id="name" placeholder="你的名字.." data-theme="b">
    <br><br>
  
    <label for="search">您需要搜索什么？</label>
    <input type="search" name="search" id="search" placeholder="搜索内容..">
    <br><br>
 
    <label for="colors">请选择喜爱的颜色：</label>
    <select id="colors" name="colors" data-theme="b">
      <option value="red">红色</option>
      <option value="green">绿色</option>
      <option value="blue">蓝色</option>
    </select>
    <br><br>
 
     <label for="switch">切换开关:</label>
       <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-theme="b">
     <br><br>
  
    <div data-role="controlgroup">
      <legend>请选择喜爱的电影:</legend>
      <label for="mov1">蜘蛛侠</label>
  <input type="checkbox" name="mov1" id="mov1" data-theme="a">
  <label for="mov2">变形金刚</label>
  <input type="checkbox" name="mov2" id="mov2" data-theme="b">
    </div>
  </div>
  </form>

主题可折叠表单

<div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
        <legend>点击我 - 我是可折叠的！</legend>
          <label for="name">全名:</label>
          <input type="text" name="text" id="name" data-theme="a">
          <p>喜爱的颜色:</p>
        <div data-role="controlgroup">
          <label for="red">红色</label>
          <input type="checkbox" name="favcolor" id="red" value="red">
          <label for="green">绿色</label>
          <input type="checkbox" name="favcolor" id="green" value="green">
          <label for="blue">蓝色</label>
          <input type="checkbox" name="favcolor" id="blue" value="blue" data-theme="a">
        </div>
      <input type="submit" data-inline="true" value="提交" data-theme="b">
      </fieldset>
    </form>
  </div>

添加新主题

jQuery Mobile 可以在移动页面添加新主题。

通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（c-z）,并在样式中添加你喜欢的颜色和字体。

你也可以在 HTML 文档中添加主题的新样式， 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) ,页面添加类：ui-page-theme-(a-z) 。

<style>.ui-bar-f {    color: red;    background-color: yellow;}.ui-body-f {    font-weight: bold;    color: white;    background-color: purple;}.ui-page-theme-f {    font-weight: bold;    background-color: green;}</style></head><body><div data-role="page" data-theme="f">  <div data-role="header" data-theme="f">    <h1>应用 "f" 主题的标题样式</h1>  </div>  <div data-role="main" class="ui-content ui-body-f">    <p>应用新的 "f" 主题的内容样式！</p>  </div></div>