xx性欧美肥妇精品久久久久久,成人午夜天

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>

	"a" 主題的樣式用于大多數(shù)元素，子元素通常繼承父元素的樣式。

主題頭部和底部

實例

<!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>內聯(lián)按鈕:</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> 你可以點擊彈窗的外部區(qū)域來關閉彈窗。</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> 你可以點擊面板之外的區(qū)域來關閉，或者按下 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 是一款免費的開源瀏覽器。發(fā)布于 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。發(fā)布于 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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

	在之前的 jQuery Mobile 版本中, 使用 JavaScript 來為元素繼承父主題樣式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 來繼承，而是使用純 CSS。 jQuery Mobile 團隊為此已經創(chuàng)建了一個工具，地址為 ThemeRoller。你可以使用該工具來升級舊的主題，使其兼容新的版本。

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jQuery Mobile Tutorial

jQuery Mobile list

jQuery Mobile Form

jQuery Mobile themes

jQuery Mobile events

jQuery Mobile 主題

主題頭部和底部

實例

主題對話框的頭部底部

實例

主題按鈕

實例

主題圖標

實例

主題彈窗

實例

頭部和底部的主題按鈕

實例

主題導航欄

實例

主題面板

實例

主題可折疊按鈕和內容

實例

主題列表

實例

主題分割按鈕

實例

主題可折疊列表

實例

主題表單

實例

主題可折疊表單

實例

添加新主題

實例

Tutorial Navigation