10 09/2014

jquery mobile 点滴

最后更新: Wed Sep 10 2014 12:36:06 GMT+0800

jquery mobile 以下简称 jqm,不定期纪录。

jqm 的链接处理方式

All standard HTML link types are supported in jQuery Mobile. To make the experience as polished as possible, any links to pages within the same domain will be automatically turned into Ajax requests and displayed with an animated page transition by the framework.jqm 默认 a 链接采用 ajax 加载页面，而不是 location 跳转。

Links that point to other domains or that have rel=”external” or target attributes will not be loaded with Ajax and will cause a full page refresh. If multiple “pages” are contained within a single HTML document, they can be linked by referencing the ID of the page as an anchor (#foo).写 rel=”external” 或者 target=”” 的a不做ajax加载（当然也就没动画了）。

好处：单一页面，动画跳转，前进后退导航

js 引用方式

外部 .js 最好是首页加载。被 a href 过来的页面，js（inline或者外部引用）必须放在 div data-role=”content” 里面！

css transition 页面转换效果

在低版本、低性能手机上，又闪又跳，关闭办法：

if(Modernizr.csstransforms3d){//检测是否支持 csstransforms3d
    $.mobile.defaultPageTransition='slide';
  $.mobile.defaultDialogTransition='flip';
}else{
    $.mobile.defaultPageTransition='none';
  $.mobile.defaultDialogTransition='none';
}

页面加载完成

jqm js 处理的顺序是：先初始化 jquery.js，然后自定义 js，最后由 jquery.mobile.js 来初始化 jqm 的样式和事件绑定等。jqm 加载事件顺序如下：

jqm mobileinit 第一次（加载首页和浏览器刷新的时候）触发（链接到另一个页面不触发）
jqm pagecreate 第一次点击一个链接的时候触发（前进后退，再回来的时候不触发）
jqm pagebeforeshow 每次点链接触发
jqm ready 和 mobileinit 一样

jqm 建议慎用 jquery ready。因为 点击链接不一会触发 ready!。所以只有 pagebeforeshow 是每次点链接都触发的。都是万恶的 ajax load 页面效果，导致这个奇怪的逻辑。好了，习惯就好。

$(document).on("mobileinit", function(){
    console.log('jqm mobileinit')    
})

$(document).on("pagecreate", function(){
    console.log('jqm pagecreate')    
})

$(document).on('pagebeforeshow', function(){
    console.log('jqm pagebeforeshow');
})

$(document).on("ready",function(){
    console.log('jqm ready')    
})

常用 data 属性

data-role=”page” 和 data-role=”content” 这是 jqm 的必要元素。在此容器中的 html 才会被 jqm 初始化。
data-role=”button” 表示这是按钮
data-icon=”” 图标 home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-inline=”true” 就是 display:inline-block
data-theme=”a” 具体指定使用某个主题颜色
data-rel=”dialog” 链接到对话框中
data-mini=”true” 小号按钮
data-iconpos=”notext” 按钮不显示文字。left | right | top | bottom | notext 图标在按钮里面的位置
class=”ui-btn-right” （按钮）右浮动（比如dialog中的关闭按钮）
data-transition 页面转换效果 fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 注意：origin 表示和来时一样
data-direction=”reverse” 反向滑动（比如链接的前进后退应该对应起来）

完整见 data 属性

我的全局定义

/*---------jqm 全局定义*/
$(document).on("mobileinit", function(){
    console.log('jqm mobileinit')

    //-fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

    if(Modernizr.csstransforms3d){//检测是否支持 csstransforms3d
        $.mobile.defaultPageTransition='slide';
      $.mobile.defaultDialogTransition='flip';
  }else{
      $.mobile.defaultPageTransition='none';
      $.mobile.defaultDialogTransition='none';
  }
  $.mobile.dialog.prototype.options.closeBtnText='关闭';
  $.mobile.loadingMessage='加载中...';
  $.mobile.pageLoadErrorMessage='加载错误';

    $.mobile.page.prototype.options.headerTheme = "z";  
    $.mobile.page.prototype.options.contentTheme  = "y";
    $.mobile.page.prototype.options.footerTheme = "z";

});

jqm 主题

上面代码中的 y,z 是我的自定义主题编号。jqm 默认 a 黑色 b 蓝色 c 浅灰 d 深灰 e 黄色 jqm theme

默认 jqm header,footer 是黑色 a;内容部分 data-role=”content” 部分是 c

继续看看我的 Jqm 自定义样式

常用 jqm 事件

vclick 移动设备上的点击
tap 移动设备上的点击
swip 滑动

参考：

Digest of guoshuang