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

rensanning

浏览: 3547993 次
性别:
来自: 大连

最近访客更多访客>>

wcj3

SYSGIS

blogtester

lliiqiang

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 使用Titanium Mo...
浏览量：38135

: Cordova 3.x入门...
浏览量：607268

: 常用Java开源Libra...
浏览量：682259

: 搭建 CentOS 6 服...
浏览量：89321

: Spring Boot 入...
浏览量：401822

: 基于Spring Secu...
浏览量：69685

: MQTT入门
浏览量：91693

文章分类

社区版块

存档分类

博客分类：

Cordova

Cordova PhoneGap

目前Version 1.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开始做了简化。官方还提供了自定义主题的ThemeRoller for jQuery Mobile：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>
<input type="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>

分享到：

Cordova 3.x 基础（10） -- UI框架Ionic Fr ... | Cordova 3.x 基础（8） -- 几个不可或缺的 ...

2014-02-27 09:47
浏览 9637
评论(6)
分类:移动开发
查看更多

6 楼 rensanning 2014-03-06

猜测估计跟前几年他们在Y Combinator融资失利有关，他们在不断推出新的产品，Codiqa的开发难免有些停滞。另外JQM兼顾Web App和Hybrid App现在已经明显有些笨拙，应该不是他们认为的移动应用的大方向。

5 楼 marty 2014-03-05

rensanning 写道

Codiqa现在用的是jQuery Mobile 1.3.1，不过从他们的Twitter来看，正在升级到1.4。

引用

Codiqa 拖拉元件生成的HTML代碼沒辦法編輯

Drag/Drop工具一般都是通过修改propertie来修改。

现在好像没有30天试用了。

對啊，而且費用也調高了 ><
說到Drag/Drop支援直接寫代碼這種雙向編程方式，能提供高度彈性 (能編代碼還有什麼不能做到 ? ) ，雖然 Codiqa 這產品沒有，不過 Jetstrap 倒是有支援 ^^

我猜想Codiqa 可能是第一代產品，當時的架構還沒那麼完善，才會光調整升級動作都慢很多。

4 楼 rensanning 2014-03-05

Codiqa现在用的是jQuery Mobile 1.3.1，不过从他们的Twitter来看，正在升级到1.4。

引用

Codiqa 拖拉元件生成的HTML代碼沒辦法編輯

Drag/Drop工具一般都是通过修改propertie来修改。

现在好像没有30天试用了。

3 楼 marty 2014-03-04

rensanning 写道

@marty

看看Codiqa，更专业！https://codiqa.com/demo
他们公司开发的3个产品（Codiqa、 Jetstrap、Ionic Framework）都相当棒！

Codiqa也是用JQueryMobile框架，不過JQueryMobile版本一直沒更新，很可惜。另外Codiqa 拖拉元件生成的HTML代碼沒辦法編輯，這對於學習JQueryMobile語法，想修改或剪貼範例Code而言，較不方便

2 楼 rensanning 2014-02-28

@marty

看看Codiqa，更专业！https://codiqa.com/demo
他们公司开发的3个产品（Codiqa、 Jetstrap、Ionic Framework）都相当棒！

1 楼 marty 2014-02-28

這個強大而且免費視覺化工具可以立馬體驗JQueryMobile 1.4.1的語法風格，操作速度。
可以試看看...

http://jqmdesigner.appsp0t.com

发表评论

您还没有登录,请您登录后再发表评论