Cordova 3.x 基础（9） -- UI框架jQuery Mobile

Go贝壳

2014-02-27

目前Version1.4.1，这里只是做个摘要，官方的Demos有很详细的使用说明。

http://demos.jquerymobile.com/1.4.1/

http://api.jquerymobile.com/

（1）引入

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

（2）基本构造

单页面

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

多页面

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

在早期版本中为了提高页面跳转的效率，在一个文件中定义多个页面，通过「href="#ID名"」页面跳转。默认显示文件中定义的第一个page，如果要自定义初期显示其他page的话

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

但是这样也就加重了HTML的load速度，所以现在基本都是1个文件1个页面。

（3）主题Theme

除过一些特殊的Widget（比如ListView）需要特殊设置外，大部分Widget都可以通过data-theme来修改主题。1.4之前提供a、b、c、d、e五种主题，从1.4开始做了简化。官方还提供了自定义主题的ThemeRollerforjQueryMobile：http://themeroller.jquerymobile.com/

（4）Header/Footer

首先Header和Footer都不是必须元素，在需要的是时候添加即可。

Header

只有标题

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

左按钮

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

右按钮

<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之前按钮是先左后右放置，跟代码写在什么地方没有关系。现在的版本希望class属性明确指定位置。

左右按钮

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

回退按钮

<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>元素来实现。

全局回退按钮有效设置：

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

data-position="fixed"固定位置

data-fullscreen="true"页面Tap的时候隐藏

data-id属性页面跳转的时候只会滑动content部分

（5）链接Link

<a href="http://www.wings.msn.to/" 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默认使用ajax加载。

data-transition="slide"跳转动画

默认跳转动画

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

（6）按钮Button

显示一个按钮，有<button>、<a>、<input>三种方式。

对于<button>和<a>

<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最小化

对于<input>

<inputtype="button"value="..."/>

<input>稍微不同，需要通过data-xxxxx属性来设置样式。

data-inline、data-corners、data-shadow、data-theme、data-mini

按钮组

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

水平放置按钮

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

(7)导航Navbar

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

（8）列表Listview

一般

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

分组

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

（9）左右滑动菜单Panel

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

jquery cordova ui框架