6 jQuery Mobile Api

jQuery Mobile提供了使用Javascript与框架(html5)通信以及进行内容管理的API。下面介绍具体事件。

文档事件

mobileinit事件会在jQuery Mobile框架载入内存之后、UI元素被渲染之前触发,开始使用这个事件处理程序改变一些UI全局选项。

jQuery Mobile文档事件的执行顺序通常是:

    • mobileinit
    • ready
    • load

使用方法:通常使用jQuery的bind方法在document元素上处理。$(document).bind(‘mobileinit‘,function(){});

代码的位置:放在jQuery和jQuery Mobile框架之间。

配置

$.mobile可调用全局属性以及有用的方法。这个框架使用jQuery UI桌面版框架的部件结构,所谓部件即使由框架管理的控件。

每个部件都有一个对象构造器以及默认配置,这些默认配置可以在mobileinit中更改,更改后会影响到该页面上的每一个部件。

jQuery Mobile中可以使用部件的列表:

page、dialog、collapsible、fieldcontain、navbar、listview、checkboxradio、button、slider、textinput、selectmenu、controlgroup等。

有些富控件被组织委一个部件,文本输入类型都使用textinput,复选与单选按钮则都属于checkboxradio部件。

每个部件都有它自己的对象构造器,它代表了页面上每个对象的工作方式,可以通过$.mobile.<widget_name>.prototype来访问相应的原型。每个部件构造器都有一个option对象,通过这个对象可以定义部件的默认属性,$.mobile.page.prototype.options可用于定义应用到每个页面实例的默认属性。

注意:这些配置只在mobileinit事件中有效。

jQuery Mobile的核心功能之一是用于加载外部页面的Ajax框架。可用ajaxEnaled=false来禁用。

使用allowCrossDomainPages属性来强制框架支持加载外部页面。

具体配置请看官网。

 

  • data-*工具

  使用jQuery Mobile时经常需要处理data-*自定义属性。

   jQuery:var button=$("a:jqmData(role=‘button‘)");

   jQuery Mobile添加一个新的名为jqmData的过滤器,并会应用我们指定的命名空间,上面的代码可换为:

   var button=$("a:jqmData(role=‘button‘)");

   同时可以使用jqmData和jqmRemoveDate来代替原来的data和removeData函数。

  • 页面工具

$.mobile.activePage属性可与当前的data-role=“page”元素关联,这个属性指向对应的jQuery Dom对象(通常是一个div元素):

   var currentPageId=$.mobile.activePage.id;

可以通过$.mobile.pageContainer属性访问当前页面的容器(通常为body元素)

最有用的工具是$.mobile.changePage方法,它允许我们跳转向另一个页面,就像用户点击了相应的链接一样。可以在javascript中通过这个方法来显示内部或外部页面。参数可以是字符串(外部链接),也可以指向内部页面的jQuery对象。

$.mobile.changePage("external.html");

$.mobile.changePage($("#pageId"));

changePage方法的第二个可选参数是一个对象,所有选项如图所示:

  

注意:加载的目标页面必须是一个jQuery Mobile文档。

   $.mobile.loadPage方法,主要由changePage在加载外部页面时使用。可以使用loadPage预加载指定内容并将它插入dom中,然后再使用对应的jQuery Dom对象通过changePage方法转向它。

  • 平台工具

   用于查询当前的平台,详细请看<即学即用 141页>。

  • 路径工具

   可通过$.mobile.path访问。用是查询下,大体有绝对与相对路径的转换,是否为同域名,相对路径与绝对路径的判断。

  比较有用的一个parseUrl(url),返回一个对象,各个属性对应该url的各个部分(protocol、hostname、port、pathname、directory、filename、hash以及更多)。

  • UI工具

   $.mobile.getInheritedTheme(element,defaultSwatch)方法,可以获得元素基于色样定义或继承应该应用的色样。

    $.mobile.silentScroll(y)可以将页面滚动到任意位置,同时不显示动画,也不触发任何事件。

    $.mobile.showPageLoadingMsg()和$.mobile.hidePageLoadingMsg(),可以显示及隐藏弹出的加载信息。

   $.mobile.fixeTollbars.show()以及$.mobile.fixedToolbars.hide()显示及隐藏固定工具栏。工具栏可以全屏或者固定显示。                 $.mobile.fixedToolbars.show(true)将立即显示工具栏,而没有淡入淡出动画。

动态内容

    缺点:如果用户在某个新创建的页面上刷新当前页面,必须监听mobileinit并检查(通过读取页面地址中的散列值或某个页面事件)用户是否正在加载某个动态页面,否则无法刷新。第二次加载时,动态页面将不存在,得根据需要再次创建。

   页面渲染完成后使用Javascript插入其他组件时,如果不触发create事件,这些组件可能无法正常渲染。

  • 创建部件

  动态创建部件需要调用部件对应的构造器,他们就是与部件名同名的jQuery函数。

   例如:

   将若干a元素转换为按钮,只需:$("a").button();

  动态创建一个:$("<a>").attr("href","somewhere,html").button();

  • 更新部件

  如往一个列表视图中添加元素,或修改一个复选框。要实现这一点需要调用部件函数并传入字符串参数refresh。为空时不能刷新。

   例如:$("#list1").listview("refresh");

  • 创建网格

   grid可以用于创建css网格的特殊部件,使用一个带子元素的html元素,并根据其子元素的数目将它转为n列的网格。

   使用方法:$("#element").grid();

  • 改变页面内容

   例如 :

   $("#content").html(newHtmlcontent);

   $("#page1").trigger("create");

   要更新一个容器,只需在页面上触发create事件,通常每个部件的构造器都会响应页面的create事件,以便检查是否需要创建对应的控件。

处理事件

  • 页面事件

  jQuery Mobile文档有不同的页面(内部或从外部加载),因此必须认真地考虑jQuery Mobile页面的加载。

   每个页面(带data-role=“page”的元素)都有一组不同的事件,这些事件有一些可以全局处理(同时处理所有页面),有一些则只对某个特定页面有效。要全局处理页面事件,可以调用$(document).bind(),也可以调用更明确的$(":jqmData(role=‘page‘)").bind。或者使用live来代替bind,以便能绑定那些将来加入到Dom中的页面。

  •  创建事件

pagebeforecreate:页面已插入dom,但是组件还未创建。

pagecreate:页面已被创建,但组件还未渲染。

pageinit:页面已完全加载。这应该是页面最常用的事件。

pageremove:页面已从dom移除(通常这是一个ajax加载的页面并且当前未激活)。

  • 加载事件

对那些使用ajax加载的页面来说,事件处理程序 通常绑定在$(document)上,因为此时对应的页面还不在dom中,无法绑定对应处理程序。

可用的加载事件:

pagebeforeload:在所有ajax请求完成之前执行。

pageload:当新页面已被加载并插入到dom后执行。

pageloadfailed:指定页面无法加载时执行。

这些事件处理程序都会接收到两个参数,一个事件对象和一个数据对象。

第一个参数有一个preventDefault()方法,这个方法可以强制框架不显示默认的错误消息警告并提供自己的ui。

第二个参数,请参考官网。

  • 显示事件

一个页面可以被初始化一次,但用户可以在页面访问历史中前进及后退。

事件分成页面改变事件和过渡事件。

有效的页面变化事件包括以下这几个:

pagebeforechang:在页面改变发生之前以及过渡开始之前执行。

pagechange:在页面改变完成之后执行。

pagechangefailed:页面改变无法完成时执行。

以上每个事件处理程序接受两个参数。

toPage:如果目标页面是外部页面,则值为目标页面的URL字符串;如果是内部页面则值为目标页面的Dom对象。

options:与发送到$.mobile.changePage的选项相同。

可用的过渡事件有以下这几个:

pagebeforeshow:在过渡并显示页面之前执行(页面仍然处于隐藏状态)。

pageshow:在页面已完成加载过渡并显示在屏幕上时执行。

pagebeforehide:在页面隐藏之前执行(页面仍然可见)。

pgehide:页面已经完成卸载过渡并已隐藏时执行。

每个过渡事件的处理程序都能接收到一个参数,值为相关页面的jQuery(封装的dom)对象。如果是一个显示事件,对应的是上一页的对象;如果是隐藏事件,对应的则是下一页的对象。

  • 部件事件

  每个能动态显示或隐藏内容的部件,例如collapsible等,都会触发一个updatelayout事件,因为页面布局已经发生了改变。

  • 方向事件

  orientationchange事件。强制仅当宽度和高度值更新后才触发这个事件,可以执行代码$.mobile.orientationChangeEnabled=false.

   这个事件对应的处理程序将接收到一个字符串作为第一个参数,职位portrait(表示纵向)或landscape(表示纵向)。

  • 手势事件

tap:在屏幕上快速地触摸一下时触发。

taphold:用户触摸屏幕并持续按住一秒钟时触发。在显示上下文菜单时很有用。

swipeleft:用户的手指从右划到左时触发。

swiperight:用户的手指从左划到右时触发。

  • 虚拟点击事件

  虚拟点击事件是一个包装,可用于取代触摸或点击事件,基于运行平台的不同它们将自动选择正确的事件。

    虚拟点击事件的用法与点击事件完全相同,不同名称中有一个v作为前缀。jQuery Mobile中包括以下虚拟点击事件:vclick、vmousedown、vmousemove、vmouseup和vmousecancel。

时间: 2025-01-09 09:14:04

6 jQuery Mobile Api的相关文章

通过AJAX和PHP,提交JQuery Mobile表单

通过AJAX和PHP,提交JQuery Mobile表单   File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo("First Name: " . $firstName . " Last Name: " . $lastName); ?> File name: index.php <!DOCTYPE html&

使用 jQuery Mobile 和 CSS3 实现响应式设计

使用 jQuery Mobile 和 CSS3 实现响应式设计 创建可以适应每个用户的屏幕分辨率的 Web 页面布局 jQuery Mobile 框架就其本身而言就是一个优秀的解决方案,可以快速创建一个可访问的由 HTML5 标记驱动的移动网站.当与 CSS3 配合使用时,工作真的会变得很有趣,因为它使创建一个根据屏幕分辨率来响应用户设备的 Web 页面布局成为可能.本文展示了如何使用 jQuery Mobile 框架和 CSS3 媒体查询在您的 Web 页面中实现响应式设计. jQuery M

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

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

【课程分享】HTML5开发框架PhoneGap实战(jQuery Mobile开发、API解析、3个经典项目实战)

对这个课程有兴趣的朋友可以加我的QQ2059055336和我联系 课程讲师:厉风行 课程分类:Java 涉及项目:我要地图.豆瓣音乐.小强快跑 用到技术:HTML5.jQuery Mobile.PhoneGap 其他特性:PhoneGap API 涵盖内容:代码.视频.ppt 课时数量:40 PhoneGap前景 Adobe最近公开表示将会为HTML5开发推出更多有意义的工具.有业内人士表示,Adobe的HTML5战略特别值得注意,此外Adobe对于乔布斯的此番公开批评曾积极地回应道:"乔布斯说

jQuery Mobile 手机网页开发的 两个问题

============问题描述============ 问题1: 怎么动态修改主题....我想做个夜间模式...用户点击按钮的时候,改变jQuery Mobile里page的主题....怎么用jQuery 修改.. 问题2:$.Mobile 这个对象有多少方法什么的啊,哪里有参考的,我去搜了,都是一些不全的,没有像开发文档之类的吗.. 我搜到的都是 http://www.w3school.com.cn/jquerymobile/jquerymobile_examples.asp http://

经典收藏 50个jQuery Mobile开发技巧集萃

1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2.使用媒体查询来锁定设备 你可能会问如何使用CSS来锁定设备(根据屏幕尺寸).比如说,你想要为iPad设计两列布局.为智能手机设计单列布局.要做到这一点,最佳办法就是使用媒体查询.

Jquery Mobile实例--利用优酷JSON接口读取视频数据

本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到API接口 (http://open.youku.com/docs/tech_doc.html) 可以看到优酷提供不少API,本文将演示“通过视频关键词”接口. 点击进去后,会发现client_id和keyword是必填的,因此,未来构造的URL应该类似 https://openapi.youku.c

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

jQuery mobile的swipeleft的使用

今天要用swipeleft这个事件,然后就找了jQuery mobile的官方文档看了一下.然后自己在里面又做了一个向右滑动的扩展,可以正常使用.但是有一个问题,向右滑动后,再往左滑动就没有反应了.但是代码里明明是给向左滑动添加了事件的. 下面是源代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="