每天一个小知识点12（jQueryMobile总结三）



jQueryMobile总结 三

---

jquerymobile是由jquery而来的，所以可以使用任何jquery操作，并且可以和其他框架配合使用

事件1：页面加载完成事件

 <div data-role="content">
<p>举头望明月</p>
<p>低头写代码</p>
</div>

 $(document).on("pageinit",function(){
$("p").click(function(){
$(this).css("background-color","red");
})
})

注意和jquery有什么不一样的地方呢

点击事件：

tap 事件在用户敲击某个元素时触发。

  $(document).on("pageinit","#myPage",function(){   //注意这里是不是有一点不一样
$("p").on("tap",function(){
$(this).css("background-color","blue");
})
})

---

taphold 注意这个单词，从它身上发现这是一个保持住点击的事件

 $(document).on("pageinit","#myPage",function(){
$("p").on("taphold",function(){
$(this).hide();
})
})

---

swipe 滑动的时候被触发

 $("p").on("swipe ",function(){
$(this).css("background-color","yellow");
})

swipeleft 由它楼上而来，根据名字就知道，向左滑动

swiperight 由它楼上的楼上而来，效果和楼上差不多，向右滑动

---

scrollstart 这是一个在滑动开始的时候被触发的事件

$(document).on("scrollstart",function(){
  alert("开始滚动！");
});

做这个案例的时候注意的是你需要一个滚动条

注意：iOS 设备会在滚动事件发生时冻结 DOM 操作(还没修改好)

scrollstop--和他上边比较相似

$(document).on("scrollstop",function(){
  alert("结束滚动！");
});

---

orientationchange 当你手机方向发生改变的时候触发

$(window).on("orientationchange",function(){
  alert("方向已改变！");
});

$(window).on("orientationchange",function(event){
  alert("方向是：" + event.orientation);   //这里参数可以获得方向，不过这个玩意我没测试过
});

---

简单案例，同样我也没测试过

$(window).on("orientationchange",function(){
  if(window.orientation == 0) // Portrait
  {
$("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
$("p").css({"background-color":"pink","font-size":"200%"});
  }
});