JqueryMobile基础教程

JqueryMobile的初始化事件，在document.ready事件之前被加载，名字叫做mobileinit

Mobileinit事件绑定

$(document).bind(“mobileinit”,function (){

    //全局代码

});

$.mobile对象为设置所有属性的入口点

JqueryMobile的页面和对话框的效果都是通过Ajax来实现，可以在mobileinit事件里面改写这些效果

$(document).bind(“mobileinit”,function (){

    $.mobile.defaultPageTransition = “slide”;

    $.mobile.defaultDialogTransition = “slide”;

});

JqueryMobile提供了6种效果供用户选择，分别是slide（滑动），slideup，slidedown，pop，fade（渐变），flip（翻转）

设置全局加载及措施提示信息，也是在mobileinit事件里完成，$.mobile.loadingMessage,$.mobile.pageLoadErrorMessage

 

JqueryMobile的Touch事件，Touch事件包括tap(当用户点屏幕时触发)，taphold(当用户点屏幕且保持触摸超过1秒时触发)，swipe(当页面被水平或垂直拖动时触发)，

swipeleft，swiperight分别表示页面被拖动到左边和右边时触发

$(document).ready(function (){

    $(“body”).bind(‘tap, function (event){

   

});

});

 

JqueryMobile的方向感应事件（横屏竖屏的切换）

$(document).ready(function (){

    $(“body”).bind(‘orientationchange’, function (event){

   

});

});

有可能DOM加载时orientationchange事件还没能完全加载完毕，所以在ready后还应该再加载一次，保险的代码如下：

$(document).ready(function (){

    $(“body”).bind(“orientationchange”, function (event){

    //event.orientation表示屏幕方向

});

$(“body”).trigger(“orientationchange”);

});

 

 

 

 

JqueryMobile的滚动事件

$(document).ready(function (){

    $(“body”).bind(“scrollstart”, function (event){

       

});

$(“body”).bind(“scrollstop”, function (event){

      

});

 

});

 

JqueryMobile的页面跳转，第一个参数目标页面，第二个参数切换效果(transition过度，reverse翻转，changeHash，role，pageContainer，type,data,reloadPage)

$.mobile.changePage(“a.html”,”slideup”);

//将id为search的form表单以POST的方式提交到a.jsp页面

$.mobile.changePage({

url:”a.jsp”,

type:”POST”,

data:$(“form#search”).serialize()

});

$.mobile.loadPage(“a.html”);相当于是iframe

 

·                $.mobile.path.parseUrl 将一个URL进行解析成带有16个属性的对象

·                $.mobile.path.makePathAbsolute 将文件或目录转变为带绝对路径的形式

·                $.mobile.path.makeUrlAbsolute 将一个相对路径转变为一个绝对路径

·                $.mobile.path.isSameDomain 对比两个URL是否相同

·                $.mobile.path.isRelativeUrl 判断地址是否相对地址

·                $.mobile.path.isAbsoluteUrl 判断地址是否绝对地址

·                $.mobile.path.base 得出URL地址的base部分JqueryMobile基础教程