jQuery Mobile themes

jQuery Mobile provides 2 different theme styles, from "a" to "b" - the buttons, toolbars, content blocks, etc. of each theme are not consistent in color. The visual effects are also different.

You can customize the appearance of your application by setting the data-theme attribute of the element:

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

##ValueDescriptionExampleaThe page is on a gray background with black textTry it outbThe page is black with white text Try it


	The header and bottom are both on a gray background with black text The buttons are on a gray background with black text Text The activated buttons and links are white text and blue background The placeholder attribute value in the input box is light gray and the value value is black
	The head and bottom are black with white text The buttons are white with white text charcoal background Activated buttons and links are white with blue text Background The placeholder attribute value in the input input box is light gray, and the value value is white

Button style uses class="ui- btn", use the "ui-btn-a|b" class to set the button to gray (default) or black:

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

"a" The theme's style is used for most elements, and child elements usually inherit the style of the parent element.

Theme Header and Bottom

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header" data-theme="b">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>文本内容</p>
    <a href="#" class="ui-btn">按钮</a>
    <p>插入 <a href="#">链接</a> !</p>
  </div>

  <div data-role="footer" data-theme="b">
    <h1>页面底部</h1>
  </div>
</div> 


</body>
</html>

Running Example»

Click the "Run Instance" button to view the online instance

The bottom of the head of the theme dialog box

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>欢迎!</p>
    <a href="#pagetwo" class="ui-btn">跳转到页面二</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header" data-theme="b">
    <h1>主题对话框!</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>我是一个主题对话框 - 我的头部和底部是黑色的!</p>
    <a href="#pageone" class="ui-btn ui-btn-inline">跳转到页面一</a>
  </div>

  <div data-role="footer" data-theme="b">
    <h1>对话框底部文本</h1>
  </div>
</div>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Theme button

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>普通按钮:</p>
    <a href="#" class="ui-btn">灰色按钮 (默认)</a>
    <a href="#" class="ui-btn ui-btn-b">黑色按钮</a>
    <br>
  
    <p>内联按钮:</p>
    <a href="#" class="ui-btn ui-btn-inline">灰色按钮 (默认)</a>
    <a href="#" class="ui-btn ui-btn-inline ui-btn-b">黑色按钮</a>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div>
</div> 

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Theme icon

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a>
    <a href="#" class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a>
  </div>
</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Theme pop-up window

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all">Show Popup</a>

    <div data-role="popup" id="myPopup" class="ui-content" data-theme="b">
      <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
      <p>我是主题弹窗!.</p>
      <p>在我右上角有个关闭按钮</p>
      <p><b>提示：</b> 你可以点击弹窗的外部区域来关闭弹窗。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Head and bottom theme buttons

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
    <h1>欢迎访问我的主页</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
  </div>

  <div data-role="main" class="ui-content">
    <p>以下按钮仅仅是用于演示，不会有任何效果。</p>
  </div>

  <div data-role="footer" style="text-align:center;">
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
      <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
    </div>
  </div>
</div>
</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Theme navigation bar

##Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>文本头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>导航栏将会主动基础父元素的样式。可以通过添加 data-theme 属性来自定义按钮样式。</p>
  </div>

  <div data-role="footer" data-theme="b">
  <h1>Insert Footer Text Here</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
        <li><a href="#" data-icon="arrow-r">Button 2</a></li>
        <li><a href="#" data-icon="arrow-r">Button 3</a></li>
        <li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
      </ul>
    </div>   
  </div>
</div> 

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Theme Panel

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel" data-theme="b"> 
    <h2>主题面板</h2>
    <p>我是一个主题面板!</p>
    <p> 你可以点击面板之外的区域来关闭，或者按下 Esc 键或滑动来关闭。</p>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击以下按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-shadow">打开面板</a>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div> 
</div>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Theme Collapsible Buttons and Content

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>文本头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible" data-theme="b" data-content-theme="b">
      <h1>点我 - 我是可折叠的！</h1>
      <p>我是折叠的内容</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>文本底部</h1>
  </div>
</div> 

</body>
</html>

Running Example» Click the "Run Instance" button to view the online instance

topic list

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
   <h2>有序列表</h2>
    <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>
    <br>
   <h2>无序列表</h2>
    <ul data-role="listview">
      <li><a href="#">List Item</a></li>
      <li data-theme="b"><a href="#">List Item</a></li>
      <li data-theme="b"><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
    </ul>
    <br>
  </div>
</div> 

</body>
</html>

Run Example»Click the "Run Example" button to view the online example

Topic segmentation button

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
     <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>
</div> 

<div data-role="page" id="download">
  <div data-role="main" class="ui-content">
  <h3>分割按钮实例</h3>
    <p>下面的按钮仅供演示。</p>
    <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-check ui-btn-icon-left" data-rel="back">下载</a>
    <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-delete ui-btn-icon-left" data-rel="back">取消</a>
  </div>
</div>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Theme Collapsible List

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>主题化的可折叠列表</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible" data-theme="b" data-content-theme="b">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>
    </ul>
  </div>

  <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>

  <div data-role="footer">
  <h1>此处是页脚文本</h1>
  </div>
</div>

</body>
</html>

Run Instance»

Click "Run Instance" Button to view online examples

Topic form

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
	<h1>主题化表单</h1>
  </div>

  <div data-role="main" class="ui-content">
  <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>
</div>

</body>
</html>

Run instance»

Click the "Run Example" button to view the online example

Theme Collapsible Form

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>主题化的可折叠列表</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible" data-theme="b" data-content-theme="b">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>
    </ul>
  </div>

  <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>

  <div data-role="footer">
  <h1>此处是页脚文本</h1>
  </div>
</div>

</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

Add a new theme

jQuery Mobile can be added on the mobile page New theme.

Add or edit a new theme by modifying the CSS file (if you have downloaded jQuery Mobile). You just need to copy the style module, then re-command the letter class name (c-z), and add your favorite colors and fonts to the style.

You can also add a new style of the theme in the HTML document, add the toolbar class: ui-bar-(a-z), add the text content class: ui-body-(a-z), add the page class: ui -page-theme-(a-z) .

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<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>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

	In previous versions of jQuery Mobile, JavaScript was used to inherit parent theme styles for elements. After version 1.4, the framework pays more attention to performance improvement and no longer uses JavaScript for inheritance, but uses pure CSS. The jQuery Mobile team has created a tool for this at ThemeRoller. You can use this tool to upgrade older themes to make them compatible with newer versions.

In previous versions of jQuery Mobile, JavaScript was used to inherit parent theme styles for elements. After version 1.4, the framework pays more attention to performance improvement and no longer uses JavaScript for inheritance, but uses pure CSS.

The jQuery Mobile team has created a tool for this at ThemeRoller. You can use this tool to upgrade older themes to make them compatible with newer versions.

jQuery Mobile themes

Theme Header and Bottom

Example

The bottom of the head of the theme dialog box

Instance

Theme button

Instance

Theme icon

Instance

Theme pop-up window

Instance

Head and bottom theme buttons

Example

Theme navigation bar

Theme Collapsible List

Instance

Topic form

Instance

Theme Collapsible Form

Example

Add a new theme

Instance

php.cn