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

阅读更多

目前Version 1.4.1，这里只是做个摘要，官方的Demos有很详细的使用说明。
http://demos.jquerymobile.com/1.4.1/
http://api.jquerymobile.com/

（1）引入

（2）基本构造
单页面

 
  
...
 
  
...
 
  
...
 

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

多页面

  
...
 
  
...
 
  
...
 

 
  
...
 
  
...
 
  
...
 

在早期版本中为了提高页面跳转的效率，在一个文件中定义多个页面，通过「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
只有标题

    
Title

左按钮

  Left
  
Title

右按钮

  
Title
  Right

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

左右按钮

  Left
  
Title
  Right

回退按钮

    
jQuery Mobile TIPS
    About

1.4之前回退按钮需要通过元素来实现。

全局回退按钮有效设置：

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

...
...
...
...

同一Domain下，link默认使用ajax加载。

data-transition="slide" 跳转动画

默认跳转动画

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

（6）按钮Button
显示一个按钮，有、、三种方式。

对于和

... ...

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

ui-btn-inline 紧凑
ui-corner-all 圆角
ui-shadow 阴影
ui-btn-* 变更主题
ui-mini 最小化

对于

稍微不同，需要通过data-xxxxx属性来设置样式。
data-inline、data-corners、data-shadow、data-theme、data-mini

按钮组

  ...
  ...
  

水平放置按钮

...

(7)导航Navbar

  
Summary
  
Favs
  
Setup

（8）列表Listview

一般

    
Acura
    
Audi
    
BMW
    
Cadillac
    
Ferrari

分组

    
Mail
    
Inbox
    
Outbox
    
Contacts
    
Friends
    
Work

（9）左右滑动菜单Panel

    

        
Fixed header
        Menu
        Add
    
    

       //......
    
    

        
Fixed footer
    
    

        //......
    
    

       //......