详解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标签:

  简单搜索

  点击这个标签的结果是,在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)

时间: 2024-10-27 21:34:37

详解JQuery Mobile中特有事件和方法的相关文章

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"

详解jQuery Mobile自定义标签_jquery

本文实例讲解了jQuery Mobile自定义标签,分享给大家供大家参考,具体内容如下 规划产品国际化的需求时,涉及到PC Web,移动Web,和各app.设计了多个版本的移动Web均不理想. 由于移动Web采用了jQuery Mobile框架,所以将切换语言放在哪个位置更合理进行了讨论.讨论的过程和多个方案我就不提了,先来看看最终效果:   是不是感觉很经验,这里一开始尝试了多次,最终自定义了一个下拉选项,代码如下: <!DOCTYPE html> <html> <head

详解jQuery插件开发中的extend方法_jquery

Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象.... 因此里面可以添加方法属性等等... 我么通过不同的应用可以将我们自己的方法整合到jQuery空间中....实现插件开发 在jQuery中定义  jQuery.extend = jQuery.fn.extend  所以这两个函数式相同的  一.Jquery的扩展方法原型是: extend(dest,s

jQuery Mobile中jQuery.mobile.changePage方法使用详解

jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mobile.changepage是过时的jQuery Mobile 1.4.0及将被删除在1.5.0.使用pagecontainer部件的change()法代替. 注意该方法是在内部使用的页面加载和转换作为一个结果,点击一个链接或提交表单时.跳转外部页面全部没有效果,必须是内部的DIV页面才有效果.j

详解jQuery uploadify文件上传插件的使用方法_jquery

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript

实例详解jQuery Mockjax 插件模拟 Ajax 请求_jquery

1. 原理 jquery-mockjax是用于mock 前台ajax向后台请求的返回数据. 原理很简单 在你js代码要发送ajax请求的地方断点一下,然后比较在[引入jquery-mockjax] 和 [没有引入jquery-mockjax]的情况下$.ajax.toString()的值情况. 很明显,引入jquery-mockjax时,这个mock库会对jquery提供的ajax函数做替换.这样就很容易能mock起来. 在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这

jquery mobile中使用data-role=&amp;amp;quot;dialog&amp;amp;quot;弹出对话框的问题

问题描述 jquery mobile中使用data-role="dialog"弹出对话框的问题 如图,当页面除了一个"page"和"dialog"还有其它的 容器时,对话框后的背景就会显示没有样式的这个容器内容, 这是为什么呢,怎样才能让背景中不显示任何东西 解决方案 试试把背景内容放到另一个page中 你说的data-role =dialog 我没注意到 这个属性... 另外 可以看看 . data-role=popup http://www.

Android菜单详解——理解android中的Menu

Android菜单详解--理解android中的Menu 前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至今为止看到的最好的一本android书,中文版出到<精通Android 2>. 理解Android的菜单 菜单是许多应用程序不可或缺的一部分,Android中更是如此,所有搭载Android系统的手机甚至都要有一个"Menu&qu

ip-《TCP/IP 详解卷一》中90页中讲到,“由于子网号不相同,代理ARP不能使用”,这怎么理解?

问题描述 <TCP/IP 详解卷一>中90页中讲到,"由于子网号不相同,代理ARP不能使用",这怎么理解? <TCP/IP 详解卷一>中90页中讲到,"由于子网号不相同,代理ARP不能使用",这怎么理解? 解决方案 ARP主要用在一个子网中,用MAC地址来通信.数据链路层 不同子网,需要通过三层路由 解决方案二: 比如 N1 <-> GW <-> N2,N1和N2是同一个子网,GW上开启arp代理的效果是,N1和N2上