<!DOCTYPE html>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" href="lib/jquery.mobile/jquery.mobile-1.4.1.min.css" />
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile/jquery.mobile-1.4.1.min.js"></script>

基本構(gòu)造

單頁(yè)面

Html 代碼

<div data-role="page"> 
  <div data-role="header">...</div> 
  <div role="main" class="ui-content">...</div> 
  <div data-role="footer">...</div> 
</div>

***1.4之前主體部分使用「data-role="content"」

多頁(yè)面

Html 代碼

<div data-role="page" id="first">
  <div data-role="header">...</div> 
  <div role="main" class="ui-content">...</div> 
  <div data-role="footer">...</div> 
</div>
<div data-role="page" id="second"> 
  <div data-role="header">...</div> 
  <div role="main" class="ui-content">...</div> 
  <div data-role="footer">...</div> 
</div>

在早期版本中為了提高頁(yè)面跳轉(zhuǎn)的效率，在一個(gè)文件中定義多個(gè)頁(yè)面，通過「href="#ID名"」頁(yè)面跳轉(zhuǎn)。默認(rèn)顯示文件中定義的第一個(gè) page，如果要自定義初期顯示其他 page 的話

Js 代碼

if (document.location.hash == "")
     document.location.hash = "#second";

但是這樣也就加重了 HTML 的 load 速度，所以現(xiàn)在基本都是1個(gè)文件1個(gè)頁(yè)面。

主題 Theme

除過一些特殊的 Widget（比如 ListView）需要特殊設(shè)置外，大部分 Widget 都可以通過 data-theme 來修改主題。1.4之前提供 a、b、c、d、e 五種主題，從1.4開始做了簡(jiǎn)化。官方還提供了自定義主題的 ThemeRoller for jQuery Mobile：http://themeroller.jquerymobile.com/

Header/Footer

首先 Header 和 Footer 都不是必須元素，在需要的是時(shí)候添加即可。

Header
只有標(biāo)題

Html 代碼

<div data-role="header">
    <h1>Title</h1>
</div>

左按鈕

Html 代碼

<div data-role="header" data-theme="b">
  <a href="#" class="ui-btn ui-btn-a ui-btn-left">Left</a>
  <h1>Title</h1>
</div>

右按鈕

Html 代碼

<div data-role="header" data-theme="b">
  <h1>Title</h1>
  <a href="#" class="ui-btn ui-btn-a ui-btn-right">Right</a>
</div>

1.4之前按鈕是先左后右放置，跟代碼寫在什么地方?jīng)]有關(guān)系?，F(xiàn)在的版本希望 class 屬性明確指定位置。

左右按鈕

Html 代碼

<div data-role="header" data-theme="b">
  <a href="#" class="ui-btn ui-btn-a ui-btn-left">Left</a>
  <h1>Title</h1>
  <a href="#" class="ui-btn ui-btn-a ui-btn-right">Right</a>
</div>

回退按鈕

Html 代碼

<div data-role="header" data-add-back-btn="true" data-back-btn-text="Back">
    <h1>jQuery Mobile TIPS</h1>
    <a href="help.htmll" class="ui-btn ui-btn-a ui-btn-right">About</a>
</div>

1.4之前回退按鈕需要通過<a>元素來實(shí)現(xiàn)。

全局回退按鈕有效設(shè)置：

Js 代碼

$(document).on('mobileinit', function() {
  $.mobile.toolbar.prototype.options.addBackBtn = true;
  $.mobile.toolbar.prototype.options.backBtnText = 'Back';
});

data-position="fixed" 固定位置
data-fullscreen="true" 頁(yè)面 Tap 的時(shí)候隱藏 data-id 屬性頁(yè)面跳轉(zhuǎn)的時(shí)候只會(huì)滑動(dòng) content 部分

鏈接 Link

Html 代碼

<a  class="ui-btn">...</a>
<a href="basic.html" target="_blank" class="ui-btn">...</a>
<a href="basic.html" rel="external" class="ui-btn">...</a>
<a href="basic.html" data-ajax="false" class="ui-btn">...</a>

同一 Domain 下，link 默認(rèn)使用 ajax 加載。

data-transition="slide" 跳轉(zhuǎn)動(dòng)畫

默認(rèn)跳轉(zhuǎn)動(dòng)畫

Js 代碼

$(document).bind("mobileinit", function(){ 
   $.mobile.defaultTransition = "slidedown";
})

按鈕 Button

顯示一個(gè)按鈕，有<button>、<a>、<input>三種方式。

對(duì)于<button>和<a&gt

Html 代碼

<button class="ui-btn">...</button>
<a href="#" class="ui-btn">...</a>

1.4以前使用「data-role="button"」

ui-btn-inline 緊湊
ui-corner-all 圓角
ui-shadow 陰影
ui-btn-* 變更主題
ui-mini 最小化

對(duì)于<input>
<input type="button" value="..." />
<input>稍微不同，需要通過data-xxxxx屬性來設(shè)置樣式。
data-inline、data-corners、data-shadow、data-theme、data-mini

按鈕組

Html 代碼

<div data-role="controlgroup">
  <button class="ui-btn">...</button>
  <a href="index.html" class="ui-btn">...</a>
  <input type="button" value="..." />
</div>

水平放置按鈕

Html 代碼

<div data-role="controlgroup" data-type="horizontal">...</div>

導(dǎo)航 Navbar

Html 代碼

<div data-role="navbar">
<ul>
  <li><a href="#" data-icon="grid">Summary</a></li>
  <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
  <li><a href="#" data-icon="gear">Setup</a></li>
</ul>
</div>

列表 Listview

一般

Html 代碼

<ul data-role="listview">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

分組

Html 代碼

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Mail</li>
    <li><a href="#">Inbox</a></li>
    <li><a href="#">Outbox</a></li>
    <li data-role="list-divider">Contacts</li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Work</a></li>
</ul>

左右滑動(dòng)菜單 Panel

Html 代碼

<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>Fixed header</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
        <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
    </div>
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
       //......
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Fixed footer</h4>
    </div>
    <div data-role="panel" data-position-fixed="true" data-display="push" id="nav-panel">
        //......
    </div>
    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" id="add-form">
       //......
    </div>
</div>

上一篇：Plugin 開發(fā)下一篇：為 Android APK 簽名

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

UI 框架 jQuery Mobile

引入

基本構(gòu)造

主題 Theme

Header/Footer

鏈接 Link

按鈕 Button

導(dǎo)航 Navbar

列表 Listview

左右滑動(dòng)菜單 Panel