jQuery Mobile C...login
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
jQuery Mobile Classic-Tutorial
Autor：php.cn  Updatezeit：2022-04-11 13:58:34

jQuery Mobile 主题


jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。

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

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

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

主题头部和底部


实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题对话框的头部底部

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题按钮

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题图标

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题弹窗

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

头部和底部的主题按钮


实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题导航栏


实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题面板

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题可折叠按钮和内容

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题列表

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题分割按钮

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题可折叠列表

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题表单

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

主题可折叠表单

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

添加新主题

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

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

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

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

Note在之前的 jQuery Mobile 版本中, 使用 JavaScript 来为元素继承父主题样式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 来继承，而是使用纯 CSS。

jQuery Mobile 团队为此已经创建了一个工具，地址为 ThemeRoller。你可以使用该工具来升级旧的主题，使其兼容新的版本。
einreichen

Chinesische PHP-Website

HeimHeimKursKursArtikelArtikelFragen und AntwortenFragen und AntwortenWörterbuchWörterbuchHandbuchHandbuchHerunterladenHerunterladensuchensuchenAPPHerunterladen APPHerunterladen