jQueryMobile

一. JQueryMobile

1.  jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

2. JQM主要分为四部分：
   
     页面&导航
     CSS框架
     组件
     表单控件

3 使用JQM的步骤
    
  1） 项目中引入jquery1.8+版本

  2)  项目创建jqm目录，引入jqm必需资源文件

        jquery-mobile.css
        jquery-mobile.js
        images/...

  3)  创建html文件，引入必需的css和js,并设置viewport

         

二. jqueryMobile-page跳转及过场动画

 1. 页面跳转可以使用a/button/input等，推荐使用a-会自动添加过场动画

 2. 可以跳转到外部的完整HTML页面；也可以跳转到当前HTML中的另一个page,如

 1)跳转到外部完整的HTML页面

   

 2)跳转到当前HTML中的另一个page

   

 3) 已模态框形式打开另一个page

    

 3. JQM为页面切换添加了非常丰富的过渡动画，使用方法

  

  可用的动画效果有：

    fade:默认动画
    pop:弹出动画
    slide:滑动动画
    slideup:向上滑动动画
    trun:翻转动画
    flip:翻转动画
    flow:流动动画
    none:无动画

三. jqueryMobile-按钮

 1. 可以使用A.button.input元素实现按钮的样式

 2. 可以使用data-role="button"属性实现按钮样式，也可以指定class实现按钮的样式，如ui-btn ui-corner-all ui-shadow

 3. 按钮默认是块级显示，可以使用ui-btn-inline实现行内按钮

 4. 按钮上可以有文字和图标，若存在图标，必须指定与文字的位置关系,可选值
  ui-btn-icon-left
  ui-btn-icon-right
  ui-btn-icon-bottom
  ui-btn-icon-top
  ui-btn-icon-notext  只显示图标

创建带图标的按钮，图标功能：后退，前进，刷新，配置，用户，定位，主页，对勾....


 5. 按钮可以放到page的header里

 header中的第一个按钮默认处于左侧，第二个按钮处于右侧，一般只放两个
 
 


   按钮 默认就是按钮效果

 

四. jqueryMobile-导航条

  1. 基本结构

      

        

          


        

      

  2. 注意

      导航条中一般最多只能有五个项目，超过5个会在一行中显示2个

      导航条可以出现在page的Header/Main/Footer

      处于Header和Footer中的navbar默认会占满整行，并和标题字错开

五. jqueryMobile-load加载器

  显示加载器： $.mobile.loading("show");

  取消加载器：$.mobile.loading("hide");

六. jqueryMobile-panel(面板)

  1) 面板在目前版本的jqp中只能放在page中，header之前和footer之后

     


          


          


          


              打开面板

          

          


          


     

  2) 面板组件可以指定出现位置和打开方式

      ！！！注意：是对panel进行设置
     data-position="left/right"

     data-display = "reveal/overlay/push"

七. jqueryMobile-折叠组件(collapsible)和手风琴效果(collapsibleset)

1. 折叠组件

   

     
标题字
     
折叠的内容
   

2. 手风琴

   


      

        
标题字
        
折叠的内容
      

      

        
标题字
        
折叠的内容
      

   

八. 关于jqm的手册

1. 下载安装包Demo-初期

2. 完整的API列表(在线) - 后期

 http://api.jquerymobile.com

九. 关于jqm page的切换-深入探讨

 1. 一个HTML声明多个page

 不足：即使不显示的Page，初始化时也会被客户端请求下来

 2. 一个HTML只声明一个Page，通过超链接进行页面跳转

 1)jqm已经完全改写了超链接的默认行为-把同步请求转为AJAX请求

 2) 异步请求得到的HTML页面，只会保留其中的第一个page,添加到DOM树上，其他所有内容全部删除。

 3) 推荐一个项目中只有起始页是完整的HTML页面，其他被跳转到的页面都是page片段-只包含一个page的声明

 4）jqm项目中所有的HTML页面中元素的id应该是全局唯一的