JQuery Mobile中特有事件和方法

JQuery Mobile中特有事件和方法是本文要介绍的内容，主要是来了解JQuery Mobile中的事件和方法的应用，具体内容来看本文详解。

1、触摸屏事件—— Touch events

tap
Triggersafteraquick,completetouchevent.

本人实际测试效果：轻轻点击，效果和按普通按钮差不多。

taphold
Triggersafteraheldcompletetouchevent(closetoonesecond).

本人实际测试效果：按住一会儿，大约1秒，即触发。很顶用。

swipe
Triggerswhenahorizontaldragof30pxormore(andlessthan20pxvertically)occurswithin1secondduration.

本人实际测试效果：不懂，不会用

swipeleft
Triggerswhenaswipeeventoccurredmovingintheleftdirection.

本人实际测试效果：在触摸屏幕上向左滑动，很好用。

PS：在电脑上你也可以用，按住鼠标向左拖就可以了。

swiperight
Triggerswhenaswipeeventoccurredmovingintherightdirection.

本人实际测试效果：在触摸屏幕上向右滑动，很好用。

PS：在电脑上你也可以用，按住鼠标向右拖就可以了。

使用方法：用live或者bind绑定到dom元素上即可，我是这么用的（以下的类似）：

$('#wlist').live('swipeleft',function(){
changepage('up');
});

2、重力感应事件—— Orientation change event

orientationchange
Triggerswhenadeviceorientationchanges(byturningitverticallyorhorizontally).
Whenboundtothisevent,yourcallbackfunctioncanleverageasecondargument,
whichcontainsanorientationpropertyequaltoeither"portrait"or"landscape".
ThesevaluesarealsoaddedasclassestotheHTMLelement,allowingyoutoleveragetheminyourCSSselectors.
NotethatwecurrentlybindtotheresizeeventwhenorientationChangeisnotnativelysupported.

对应于手机上重力感应功能，当显示效果从垂直变为水平，或由水平变为垂直时触发。本人没用上该效果。

3、滚动条事件——Scroll events

scrollstart
Triggerswhenascrollbegins.NotethatiOSdevicesfreezeDOMmanipulationduringscroll,
queuingthemtoapplywhenthescrollfinishes.
We'recurrentlyinvestigatingwaystoallowDOMmanipulationstoapplybeforeascrollstarts.

个人测试效果：当滚动条触发时使用。

scrollstop
Triggerswhenascrollfinishes.

个人测试效果：当滚动条停止时使用，利用这个你可以让其返回当前滚动条的位置信息并记录下来。

$('body').live('scrollstop',function(){
$(‘#hidescroll’).val($(this).scrollTop);
});

上面用一个ID名为hidescroll的影藏hidden控件保存了当前滚动条的位置信息。如果想使用后退页面时返回当前滚动条的位置，就请把这个hidescroll的值一并传输过去吧，不论是用get还是post。并且记得在页面写上：

$(document).ready(function(){//document.body.scrollTop=$(‘#hidescroll’).val();});

4、面显示影藏事件——Page show/hide events

pagebeforeshow
Triggeredonthepagebeingshown,beforeitstransitionbegins.
pagebeforehide
Triggeredonthepagebeinghidden,beforeitstransitionbegins.
pageshow
Triggeredonthepagebeingshown,afteritstransitioncompletes.
pagehide
Triggeredonthepagebeinghidden,afteritstransitioncompletes.

这四个事件的好处是，在页面的加载过程中你可以干些事。

比如，在加载的时候添加loading画面：

$('div').live('pagebeforeshow',function(){$.mobile.pageLoading();});

在加载完成后影藏loading画面：

$('div').live('pageshow',function(){$.mobile.pageLoading(true);});

5、页面创建事件：Page initialization events

pagebeforecreate
Triggeredonthepagebeinginitialized,beforeinitializationoccurs.
pagecreate
Triggeredonthepagebeinginitialized,afterinitializationoccurs.

有时候你会遇到这种情况：一个页面，已经填写了一些自定义信息，你需要依靠这些信息初始化一个新页面。我遇到的例子是，我的文件列表一刷新，点击其中任意一个文件可以显示一个对话框，这个对话框要显示你点击的这个文件的名字，和其他操作。新页面并不知道你点的是哪个文件，总不能再查询一遍吧？这个时候你就需要Page initialization events事件了，把你点击的文件名传过去。

$('#aboutPage').live('pagebeforecreate',function(event){
alert('Thispagewasjustinsertedintothedom!');
});
$('#aboutPage').live('pagecreate',function(event){
alert('ThispagewasjustenhancedbyjQueryMobile!');
});

上面是jquery mobile官网给出的两个例子，,允许你操纵一个页面pre-or-post初始化,相对于页面显示/隐藏事件，创建事件只会在初始化网页的时起作用。

值得注意的是，在Jquery mobile1.0a2版本，加载对话框等东西进来，实际是用ajax方法将对话框以div role="page"模式加入当前页面。这个新加入的div,用ID保存它被ajax进来时的路径。

例如，我的主页mian.php有一个a标签：

<ahref="dialog/search.php"type="GBK"data-rel="dialog"data-transition="slide"data-icon="search"data-iconpos="top">简单搜索</a>

点击这个标签的结果是，在mian.php中，被ajax加入了一个id="dialog/search.php"的div，这个div, role="page"，其内容就是文件search.php中body里的内容。

这样做，导致当下次再点击同一个连接的时候，实际相当于显示已被加载进来的page，加载速度当然很快。但是,这意味着你的ID属性已经不再是原来页面的一部分，而是当前页面的一个div，所以你必须记住当绑定到页面,pagecreate事件(pagebeforecreate等等)。

避免这个问题的方法是用class代替id。好在我在我的程序里几乎没有遇到这个问题，因为我根本没有用Page initialization events事件，在初始化一些对话框的时候，我在主页的JS中做操作，修改对话框中的元素（因为我知道这些对话框显示的时候就已经是主页的一个div 了，我要的ID总会找到）。不过这样做的结果是，Jquery mobile 1.0a3版本导致了我所有对话框的失效……算了，哥不更新了，等beta版出来还不行么。

6、常用函数、方法

显示或影藏jquery自带的loading画面

//cuethepageloader
$.mobile.pageLoading();
//hidethepageloader
$.mobile.pageLoading(true);

跳转到另一个页面上

//transitiontothe"aboutus"pagewithaslideuptransition
$.mobile.changePage("about/us.html","slideup");
//transitiontothe"searchresults"page,usingdatafromaformwithanIDof"search""
$.mobile.changePage({url:"searchresults.php",type:"get",data:$("form#search").serialize()});
//transitiontothe"confirm"pagewitha"pop"transitionwithouttrackingitinhistory
$.mobile.changePage("../alerts/confirm.html","pop",false,false);

设置滚顿条位置

//scrolltoY100px
$.mobile.silentScroll(100);

设置根据显示时宽度的最大最小信息设置html断点，我没用过，我猜会让断点以后的html不显示。$.mobile.addResolutionBreakpoints (method)Add width breakpoints to the min/max width classes that are added to the HTML element.

//adda400pxbreakpoint
$.mobile.addResolutionBreakpoints(400);
//add2morebreakpoints
$.mobile.addResolutionBreakpoints([600,800]);

除此以外还有其他一些方法，我都没用过，也没需要去用。等beta1的文档出来了再看吧。

jqmData(),jqmRemoveData(),andjqmHasData()(method)
$.mobile.path(methods,properties)Utilitiesforgetting,setting,andmanipulatingurlpaths.TODO:documentaspublicAPIisfinalized.
$.mobile.base(methods,properties)Utilitiesforworkingwithgeneratedbaseelement.TODO:documentaspublicAPIisfinalized.
$.mobile.activePage(property)

小结：详解JQuery Mobile中特有事件和方法的内容介绍完了，希望通过本文的学习能对你有所帮助！

转自：http://blog.csdn.net/sunxin1001/article/details/7263598

JQuery Mobile中特有事件和方法相关推荐

jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...
jQuery Mobile中固定工具栏header、footer的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中固定工具栏header.footer的data-*选项带有 data-role=&q ...
web上渐进使用jQuery Mobile中animate相关CSS
一.关于animate.css 在介绍主人公之前,先说说他的亲戚. 有个叫"蛋一灯(Dan Eden)"的人弄了个名叫animate.css的开源项目,实际上就是使用CSS3 an ...
jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
jQuery Mobile中面板panel的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中面板panel的data-*选项带有 data-role="panel&q ...
jQuery Mobile中文本输入域input、textarea的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中文本输入域input.textarea的data-*选项带有 type=" ...
jQuery Mobile中滑动块range的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中滑动块range的data-*选项带有 type="range" ...
jQuery Mobile中选择select的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中选择select的data-*选项 //所有的 <select> 元素.这 ...
jQuery Mobile中单选按钮radio的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中单选按钮radio的data-*选项带有 type="radio" ...

JQuery Mobile中特有事件和方法

JQuery Mobile中特有事件和方法相关推荐

最新文章

热门文章