jquery mobile笔记

jquery mobile 1.4.5

定义页面

<div id="page1" data-role="page" data-title="页面title">
  <div data-role="header">头部</div>
  <div data-role="content">
    内容
  </div>
  <div data-role="footer">底部</div>
</div>

data-role=”page” //定义一个页面(必写)
data-role=”header” //声明一个头部(可选)
data-role=”footer” //声明一个底部(可选)
data-title=”页面title” //title
data-role=”button” //按钮样式
data-role=”dialog” //弹窗

最好为页面指定一个id,类似id=”page1″,有时获取页面需要到id来跳转

——————————
同一个页面可以写多个data-role=”page”,表示有多个页面，如

<div id=”page1″ data-role=”page”>内容1</div>
<div id=”page2″ data-role=”page”>内容2</div>
表示有2个页面

 链接跳转时

(在jq mobile中一个超级链接默认就是一个ajax)
同页面跳转 <a href=”#page1″></a>
多页模板中的第二个页面 <a href=”index.html#page2″></a>
不同页面跳转<a href=”index.html”></a>

禁用ajax

不是什么页面跳转到适用于ajax的,以下情况均不使用ajax，使用默认跳转方式
<a href=”http://www.xx.com/”> //跳转到其他域名时
<a href=”page2.html” rel=”external”>
<a href=”page2.html” data-ajax=”false”>
<a href=”page2.html” target=”other”>
—————————————
让指定容器页面里面的所有a链接默认都取消ajax

最前面加上：
$.mobile.ignoreContentEnabled=’true’;

在页面容器加上：
<div id=”page1″ data-role=”page” data-title=”页面title” data-ajax=”false”>
在id=”page1″的页面容器里面的a链接默认都取消了ajax的功能

弹窗

<div id="page1" data-role="dialog">
  <a href="#" onclick="$('#page1').dialog('close')">关闭弹窗</a>
  <a href="page2.html" data-rel="back">返回上一页</a> data-rel="back"属性最好为href指定一个地址
</div>

 事件

data-rel="back" 返回上页
data-transition="pop" 切换效果(好几种343)

以下事件必须写在jquery.mobile-1.4.5.min.js之前
$( document ).on("mobileinit", function() { //启动jq mobile就触发,仅触发一次
  console.log(1);
});


$( document ).on("pageinit","#page1",function(event) { //切换到#page1页面时就触发一次,仅触发一次
  console.log(1);
});


$( document ).on( "pageshow", "#page1", function( event ) { //每次切换到#page1时都触发
  console.log(222);
});


以上3种比较常用，执行顺序是：
mobileinit > pageinit > pageshow
mobileinit和pageinit只能触发一次如果想在重新激活再触发就执行：
例如：$(document).trigger('mobileinit'); //激活mobileinit

触摸事件

//触摸一下屏幕
$("p").on("tap",function(){   
 $(this).hide();
});


//长按
$("p").on("taphold",function(){
  $(this).hide();
});


//滑动
$("p").on("swipe",function(){
  $("span").text("滑动检测!");
});


swipeleft   //左滑动
swiperight  //右滑动
scrollstart //用户开始滚动页面时触发
scrollstop  //用户停止滚动页面时触发

111111

111111
屏幕水平、垂直事件

$(window).on("orientationchange",function(event){
   alert("方向是: " + event.orientation);
});

 预缓存、预加载

<a href=”index.html” data-prefetch></a> //预加载，会提前把index.html页面内容加载进来
<div data-role=”page” id=”page2″  data-dom-cache=”true”> //缓存，下次进入到此页面时就不需要请求服务器了

 锚文本跳转

直接上案例：
$('a.here').on('click vclick',function(){
   var a_=$( $(this).attr('href') ).get(0).offsetTop;
   $.mobile.silentScroll(a_);
   return false;
});

<a class="here" href="#fuck">锚记</a>
.
.
.
<p id="fuck">内容内容内容内容内容内容</p>