欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > jquery Mobile >
收 藏
2600

JqueryMobile基础教程

所属栏目:jquery Mobile 来源:未知 内容发布:做网站吧

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基础教程

文章关键词:JqueryMobile  基础教程  

上一篇:没有了 下一篇:jQuery Mobile AJAX导航
相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:没有了
下一篇:jQuery Mobile AJAX导航

返回顶部