• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery Mobile操作HTML5的常用函数总结

jQuery Mobile操作HTML5的常用函数总结

作者:Kayo Lee 字体:[增加 减小] 来源:互联网

Kayo Lee 通过本文主要向大家介绍了jQuery,Mobile,HTML5,jQuery,JavaScript等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一. $.mobile.changePage() & $.mobile.loadPage()
1.$.mobile.changePage()

$.mobile.changePage() 方法会在页面加载时自动调用,若这个页面为当前文档中的不同 "page",则会转到这个新页面隐藏旧页面;若这个页面为外部页面,即页面与当前页面不在同一文档中(本质上是新页面不在当前 DOM 中),$.mobile.changePage() 首先会调用 $.mobile.loadPage() 把外部页面的元素插入到 DOM 中,再显示新页面。这也是对页面加载过程的简单复述。

$.mobile.changePage() 有两个参数 to (string or object, 必须) 和 options (object, 可选),具体如下:

(1)—— to (string or object, 必须)

to 为必要参数,其值可以为 string(字符串,如 "about/us.html") 或 object(对象,如 $("#about")),这主要是面向两种不同的页面,string 形式的为外部页面链接,而 object 为同一文档中的不同 "page" ,如 "#page2" ,$.mobile.changePage() 会把其处理成包含这个 DOM 的 jQuery 对象,即 $('#page2') 这种形式,而 $.mobile.changePage() 内部会判断 to 参数的形式,若是 string 则调用 $.mobile.loadPage() 把外部页面的元素插入到 DOM 中,再显示页面。

(2)—— options (object, 可选)

options 为可选参数,其值为 object (对象),这个 object 包含多个属性,这些属性储存一个页面的各种参数,jQuery Mobile 会根据这些参数来控制如何加载页面,以及对页面进行初始化。具体属性值如下:

allowSamePageTransition (boolean, 默认值: false) 默认情况下,$.mobile.changePage() 是不会理会跳转到当前页面的请求。把这个属性设置为 "true" ,则可以允许这种请求

changeHash (boolean, 默认值: true) 判断地址栏上的哈希值是否应该被更新。

data (object 或 string, 默认值: undefined) Ajax 请求时发送的数据。仅当 to 参数的值为一个 URL 时可用。

dataUrl (string, 默认值: undefined) 当浏览器完成页面转换时要更新浏览器的地址栏上的 URL 。如不特别指定,则使用 data-url 的属性值。

pageContainer (jQuery collection, 默认值: $.mobile.pageContainer) 指定包含页面的 DOM 对象的 jQuery 对象。

reloadPage (boolean, 默认值: false) 强制刷新页面,即使页面容器的 DOM 已经准备好仍然会执行刷新。仅当 to 参数的值为一个 URL 时可用。

reverse (boolean, 默认值: false) 设置页面转场动画的方向。当该属性设置为 "true" 时页面转场反向。

role (string, 默认值: undefined) 显示页面的时候使用 data-role 值。默认情况下为 undefined,即取决于元素的 @data-role 属性值(标签上 data-role 的值)。

showLoadMsg (boolean, 默认值: true) 设置当加载外部页面时是否显示加载提示信息。

transition (string, 默认值: $.mobile.defaultPageTransition) 设置页面加载时使用的过场动画。

type (string, default: "get") 设置请求页面时使用的方法 ("get" 或 "post") 。仅当 to 参数的值为一个 URL 时可用。

这里引用例子说明一下 $.mobile.changePage() 的使用方法,手动调用该方法可以触发跳转到一个新页面,例如,在 Web Apps 发生错误时可以跳转到一个提示错误的页面。

// 转入到 "about us" 页面并使用 "slideup" 转场动画
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
 
// 转入到 "search results" 页面, 使用 来自 id 为 search 的表单数据,并把页面请求方式改为 "post"
$.mobile.changePage('searchresults.php', {
  type: "post",
  data: $("form#search").serialize()
});
 
// 转入到 "confirm" 页面并使用 "pop" 转场动画,不更新历史记录(地址栏哈希值不更新)
$.mobile.changePage('../alerts/confirm.html', {
  transition: "pop",
  reverse: false,
  changeHash: false
});

发生错误时可以跳转到一个提示错误的页面。

$(function(){
  // 发生错误
  // 已 "slideup" 的方式弹出对话框提示发生了错误
  $.mobile.changePage('../alerts/confirm.html', {
    transition: "slideup",
    role: "dialog"
  });
});

2.$.mobile.loadPage()

如上面所述,$.mobile.loadPage() 用于加载一个外部页面,但这里的加载是指把外部页面的元素插入到当前 DOM 中,并在插入之前对页面内容进行 jQuery Mobile 增强 。该方法会被 $.mobile.changePage() 调用,条件是 $.mobile.loadPage() 的第一个参数 to 为 string (即加载的页面为外部页面)。这个方法仅仅是进行插入 DOM 操作,不会影响当前激活的页面,所以它可以用于在后台加载页面(只插入 DOM 而不显示页面),该方法会返回一个 deferred 对象,包含页面请求成功与否等相关信息,并会在页面增强和插入 DOM 后分解这个对象。

$.mobile.loadPage() 有两个参数 url (string or object, 必须) 和 options (object, 可选),具体情况如下:

(1)—— url (string or object, 必须)

该参数的值可以为 string 或 object ,无论是何种形式,必须为一个绝对或相对 URL 。若是由 $.mobile.changePage() 调用本方法时,则该参数值为 $.mobile.changePage() 的 to 参数值。

(2)—— options (object, 可选)

options 为可选参数,其值为 object (对象),实际上如由 $.mobile.changePage() 调用本方法时,该参数值为 $.mobile.changePage() 的 options 参数值。因此这个 object 与 $.mobile.changePage() 的 options 选项值相同,其具体属性值请参考 $.mobile.changePage() 中 options 的属性值。

这里引用例子说明一下 $.mobile.loadPage() 的使用方法,手动调用该方法可以在后台加载外部页面的元素并且不影响当前激活页面。
    

// 把 "about us" 页面加载到 DOM
$.mobile.loadPage('about/us.html');
 
// 转入到 "search results" 页面, 使用来自 id 为 search 的表单数据,并把页面请求方式改为 "post"
$.mobile.loadPage('searchresults.php', {
  type: "post",
  data: $('form#search').serialize()
});

二. $.fn.jqmData() & $.fn.jqmRemoveData()
当页面中使用了 jQuery Mobile ,jQuery Mobile 会使用 jqmData 和 jqmRemoveData 代替 jQuery 核心的 data 和 removeData 方法(注意,这包括了 jQuery 中的 $.fn.data , $.fn.removeData , $.data , $.removeData 和 $.hasData),这两个方法会自动获取和设置 data 属性的命名空间(即使当前没有使用命名空间)。

这两个方法的参数对应着 jQuery 的 data 和 removeData 方法的参数,具体如下:

(1)—— jqmData( jQuery.data() )

element 与该 data 属性相关联的 DOM 对象
key data 的命名字符串
value data 属性的值
(2)—— jqmRemoveData ( jQuery.removeData() )

element 与需要移除 data 属性相关联的 DOM 对象
name 需要移除的 data 的命名字符串
注意:当通过 jQuery Mobile data 属性寻找元素时,请使用自定义选择器:jqmData() ,它会在查询元素时自动合并 data 属性的命名空间。例如,你应该使用 $('div:jqmData(role="page")') 代替 $('div[data-role="page"]') ,因为前者会自动映射到 $("div[data-"+ $.mobile.ns +'role="page"]') ,而不需要强制把选择器与命名空间连接起来。例如:命名空间为 rn ,若使用后者即为 $('div[data-rn-role="page"]') ,这时如果更改了命名空间,则这个选择器便会失效,而使用前者则会自动映射到当前选择器中,即使更改命名空间也不会造成这个选择器失效。

但是也有例外的情况,就是根据 URL 值在命名空间中选择 data 属性,例如,jQuery Mobile 可以使用 :jqmData(url) 跟踪一个页面来自哪里,根据 URL 中的命名空间来选择空间内的 data 属性。这要求需要在选择器的括号内填写一个有效的 URL 。

三. $.fn.jqmEnhanceable()
这是判断元素是否要进行 jQuery Mobile 增强的方法,默认情况下,所有 jQuery Mobile 组件都会通过此方法放入 jQuery Mobile 增强集,以交给另一函数进行 jQuery Mobile 增强,包括添加相应的 HTML , CSS class 和交互。这是 jQuery Mobile 默认调用的方法,并且没有任何可选参数,但该方法仍有一个很值得注意的地方,在方法的实现函数内部,会判断默认配置 $.mobile.ignoreContentEnabled 的值,若为 true ,则会对调用该方法的 jQuery 对象的 DOM 父节点遍历,若父节点标签上设置了 data-enhance = "false" ,则不让该 DOM 对象加入增强集。事实上 jQuery Mobile 的官方文档并没有阐述 $.fn.jqmEnhanceable() 的具体使用方法,反而用了不少篇幅介绍这个注意事项。

另外还需要注意的是,遍历操作会设计元素的所有父节点,因此即使遍历一个很小的 jQuery 对象集的父节点也会消耗很多资源,开发则需要谨慎使用。若开发时已经明确不需要对某元素进行增强,建议还是直接不使用 data-role 触发相应的组件。

而如何设置 $.mobile.ignoreContentEnabled 的值,可以参考《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础》

四. $.fn.jqmHijackable()
这是判断元素是否加入 jQuery Mobile Ajax 导航,即使用 Ajax 进行处理的方法,与 $.fn.jqmEnhanceable() 相似,默认情况下这也

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • JQuery中html()方法使用不当带来的陷阱
  • jQuery实现多张图片上传预览(不经过后端处理)
  • JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
  • Jqprint实现页面打印
  • 基于jquery的时间段实现代码
  • 基于jquery实现ajax无刷新评论
  • etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
  • JQuery入门——用映射方式绑定不同事件应用示例
  • jQuery的文档处理程序详解
  • 自己动手开发jQuery插件教程

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于jquery css3实现点击动画弹出表单源码特效
    • jQuery为某个div加入行样式
    • 轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
    • 页面内容排序插件jSort使用方法
    • JQuery自定义事件的应用 JQuery最佳实践
    • jquery中的mouseleave和mouseout的区别 模仿下拉框效果
    • ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
    • jQuery实现弹出窗口中切换登录与注册表单
    • 关于html+ashx开发中几个问题的解决方法
    • jQuery load方法用法集锦

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有