JQuery Mobile中特有事件和方法是本文要介绍的内容,主要是来了解JQuery Mobile中的事件和方法的应用,具体内容来看本文详解。
1、触摸屏事件—— Touch events
- tap
- Triggers after a quick, complete touch event.
本人实际测试效果:轻轻点击,效果和按普通按钮差不多。
- taphold
- Triggers after a held complete touch event (close to one second).
本人实际测试效果:按住一会儿,大约1秒,即触发。很顶用。
- swipe
- Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.
本人实际测试效果:不懂,不会用
- swipeleft
- Triggers when a swipe event occurred moving in the left direction.
本人实际测试效果:在触摸屏幕上向左滑动,很好用。
PS:在电脑上你也可以用,按住鼠标向左拖就可以了。
- swiperight
- Triggers when a swipe event occurred moving in the right direction.
本人实际测试效果:在触摸屏幕上向右滑动,很好用。
PS:在电脑上你也可以用,按住鼠标向右拖就可以了。
使用方法:用live或者bind绑定到dom元素上即可,我是这么用的(以下的类似):
- $('#wlist').live('swipeleft',function(){
- changepage('up');
- });
2、重力感应事件—— Orientation change event
- orientationchange
- Triggers when a device orientation changes (by turning it vertically or horizontally).
- When bound to this event, your callback function can leverage a second argument,
- which contains an orientationproperty equal to either "portrait" or "landscape".
- These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors.
- Note that we currently bind to the resize event when orientationChange is not natively supported.
对应于手机上重力感应功能,当显示效果从垂直变为水平,或由水平变为垂直时触发。本人没用上该效果。
3、滚动条事件——Scroll events
- scrollstart
- Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll,
- queuing them to apply when the scroll finishes.
- We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.
个人测试效果:当滚动条触发时使用。
- scrollstop
- Triggers when a scroll finishes.
个人测试效果:当滚动条停止时使用,利用这个你可以让其返回当前滚动条的位置信息并记录下来。
- $('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
- Triggered on the page being shown, before its transition begins.
- pagebeforehide
- Triggered on the page being hidden, before its transition begins.
- pageshow
- Triggered on the page being shown, after its transition completes.
- pagehide
- Triggered on the page being hidden, after its transition completes.
这四个事件的好处是,在页面的加载过程中你可以干些事。
比如,在加载的时候添加loading画面:
- $('div').live('pagebeforeshow',function(){$.mobile.pageLoading();});
在加载完成后影藏loading画面:
- $('div').live('pageshow',function(){$.mobile.pageLoading(true);});
5、页面创建事件:Page initialization events
- pagebeforecreate
- Triggered on the page being initialized, before initialization occurs.
- pagecreate
- Triggered on the page being initialized, after initialization occurs.
有时候你会遇到这种情况:一个页面,已经填写了一些自定义信息,你需要依靠这些信息初始化一个新页面。我遇到的例子是,我的文件列表一刷新,点击其中任意一个文件可以显示一个对话框,这个对话框要显示你点击的这个文件的名字,和其他操作。新页面并不知道你点的是哪个文件,总不能再查询一遍吧?这个时候你就需要Page initialization events事件了,把你点击的文件名传过去。
- $('#aboutPage').live('pagebeforecreate',function(event){
- alert('This page was just inserted into the dom!');
- });
- $('#aboutPage').live('pagecreate',function(event){
- alert('This page was just enhanced by jQuery Mobile!');
- });
上面是jquery mobile官网给出的两个例子,,允许你操纵一个页面pre-or-post初始化,相对于页面显示/隐藏事件,创建事件只会在初始化网页的时起作用。
值得注意的是,在Jquery mobile 1.0a2版本,加载对话框等东西进来,实际是用ajax方法将对话框以div role="page"模式加入当前页面。这个新加入的div,用ID保存它被ajax进来时的路径。
例如,我的主页mian.php有一个a标签:
- <a href="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画面
- //cue the page loader
- $.mobile.pageLoading();
- //hide the page loader
- $.mobile.pageLoading( true );
跳转到另一个页面上
- //transition to the "about us" page with a slideup transition
- $.mobile.changePage("about/us.html", "slideup");
- //transition to the "search results" page, using data from a form with an ID of "search""
- $.mobile.changePage({ url: "searchresults.php", type: "get", data: $("form#search").serialize() });
- //transition to the "confirm" page with a "pop" transition without tracking it in history
- $.mobile.changePage("../alerts/confirm.html", "pop", false, false);
设置滚顿条位置
- //scroll to Y 100px
- $.mobile.silentScroll(100);
设置根据显示时宽度的***最小信息设置html断点,我没用过,我猜会让断点以后的html不显示。$.mobile.addResolutionBreakpoints (method)Add width breakpoints to the min/max width classes that are added to the HTML element.
- //add a 400px breakpoint
- $.mobile.addResolutionBreakpoints(400);
- //add 2 more breakpoints
- $.mobile.addResolutionBreakpoints([600,800]);
除此以外还有其他一些方法,我都没用过,也没需要去用。等beta1的文档出来了再看吧。
- jqmData(), jqmRemoveData(), and jqmHasData() (method)
- $.mobile.path (methods, properties)Utilities for getting, setting, and manipulating url paths. TODO: document as public API is finalized.
- $.mobile.base (methods, properties)Utilities for working with generated base element. TODO: document as public API is finalized.
- $.mobile.activePage (property)
小结:详解JQuery Mobile中特有事件和方法的内容介绍完了,希望通过本文的学习能对你有所帮助!