jQueryMobile的使用

一. JQM提供的网格布局系统

  • jqm提供的布局系统没有预定义 margin或padding
  1. jqm中的“行”分为四种

    默 认:一行中只有一列,列宽 100%

    ui-grid-a 一行中有二列并等分 列宽 50%
    ui-grid-b 一行中有三列并等分 列宽 33%
    ui-grid-c 一行中有四列并等分 列宽 25%
    ui-grid-d 一行中有五列并等分 列宽 20%

  2. jqm中的列依次排序

    第一列: ul-block-a
    第二列: ul-block-b
    第三列: ul-block-c
    第四列: ul-block-d
    第五列: ul-block-e

  3. jqm中的所有ul-block-a必须重起一行

  4. jqm中一行默认只能等分N列,若不想等分,只能自定义样式

  5. 列中若防止button,则默认填满整理,若是链接或input按钮,默认会添加左右margin:5px

  • JQM提供的组件-分组和分隔,模拟实现bootstrap中的panel

     

二. jqum提供的组件-Table-真实的响应式表格

  1. 列切换(column toggle)模式的响应式表格

    
            。。。
            
    必须显示的列 优先级最低(最先被隐藏) 优先级最高(最后被隐藏)
  2. 回流(reflow)模式的响应式表格

     
    屏幕够宽时显示效果与普通表格相同,不够宽时每一行数据都会独立显示

    三. JQM提供的组件-ListView(列表组)

    四. jqm提供的组件-表单组件

    1. textInput组件:

      1)单行文本输入域
      2)多行文本输入域
      3)下拉框组件
      
    2. 特殊的form控件

    • 滑块组件

         
      
    • 开关控件

         
      
    • 单选按钮组

         
      legend
    • 复选按钮组

        
      legend

    五、触屏设备中的事件

    1. JQM扩展了标准的事件

      orientationchange: 浏览设备的方向改变
      pagebeforecreate: JQM Page创建之前 - 挂到DOM树之前
      pagecreate: JQM Page被创建 - 挂到DOM树
      pageinit: JQM Page 开始初始化 - 挂到DOM树开始初始化
      pagechange: JQM 当前Page发生改变,且切换动画完成之后
      swipe:手指在屏幕上滑动
      swipeleft: 手指在屏幕上向右滑动
      swiperight: 手指在人屏幕向右滑动
      tap: 手指在屏幕上轻击一下
      taphold: 长按
      

      提示: 上诉事件监听函数的绑定不能直接写在html中,只能使用jquery提供的事件绑定函数实现

       $("").on("swipeleft",fn);
      

    JQM中提供的几个Page相关事件触发顺序:
    pagebeforeload->pageload->pagebeforecreate->pagecreate->pageinit->pagechange

      js控制页面跳转
    
          $.mobile.changePage("3-2.html",{transitoin:"slide"});
    
    1. NG基于JQM扩展了标准的事件

      1) 自定义模块声明要依赖ngTouch模块,就可以使用触屏相关的指令

      2) ngClick/ngSwipeLeft/ngSwipeRight

    2. ngRoute与JQM中的页面跳转有何异同

     1)相同点
    
        完整的HTML只需要一个,使用异步AJAX请求获取下一个页面
    
        可以实现转场动画
    
     2)不同点
    
        .1 ngRoute需要配置路由字典,JQM没有路字典
    
        .2 ngRoute访问路由地址的格式 - 特殊格式的hash
    
            http://xxx/index.html#/main
    
          jQM访问页面地址- 普通的url
    
            http://xxx/tpl/main.html
    
        .3 ngRoute访问的路由页面可以使用F5刷新,JQM的页面不能按F5刷新
    
        .4 ngRoute-index.html只能声明一个ngview容器,JQM中index.html可以声明多个page
    
        .5 ngRoute: 模板页面中的所有内容都会被挂到ngview;jQM模板页面只有第一个page会被挂载到当前DOM树
    
        .6 ngRoute路由参数在两个页面间传递数据
    
           http://index.html#/detail/101
    
           JQM通过请求字符串或者H5提供的本地存储在两个页面间传递数据
    
            http://tpl/detail.html?num=102
    
    1. 重新编译新挂载的page
      //监听新page被初始化事件-使用angular重新编译新挂载的page
        angular.element('body').on("pageinit",function(event){
            
            var scope = angular.element(event.target).scope();
            
            angular.element(event.target).injector().invoke(function($compile){
                
                $compile(event.target)(scope);
                scope.$digest();
            })
            
        });
    

    你可能感兴趣的:(jQueryMobile的使用)