• 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事件监听与用法详解

jQuery-mobile事件监听与用法详解

作者:栁罗风尘 字体:[增加 减小] 来源:互联网

栁罗风尘 通过本文主要向大家介绍了jQuery,mobile,事件监听等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例讲述了jQuery-mobile事件监听与用法。分享给大家供大家参考,具体如下:

触摸事件 - 当用户触摸屏幕时触发(敲击和滑动)
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发

一、初始化事件

1. ready 事件 页面加载完成

$(document).ready(function(){
  //your code here...
});

2. 页面加载完成事件二 pageinit

$(document).on('pageinit','#pageone',function(){
  //your code here...
});

3.事件格式

$(元素).on('事件',funciton(){
  //code here...
})

二、触摸事件

tap          事件在用户敲击某个元素时触发
taphold      事件在用户敲击某个元素并保持一秒时被触发
swipe        事件在用户在某个元素上水平滑动超过 30px 时被触发
swipeleft    事件在用户在某个元素上从左滑动超过 30px 时被触发
swiperight   事件在用户在某个元素上从右滑动超过 30px 时被触发

三、滚动事件

scrollstart 事件在用户开始滚动页面时被触发
(iOS 设备会在滚动事件发生时冻结 DOM 操作)
scrollstop 事件在用户停止滚动页面时被触发

四、方向(横竖屏转动)

orientationchange 事件在用户垂直或水平旋转移动设备时被触发

可以通过window.orientation 来检测横屏竖屏

$(window).on("orientationchange",function(){
 if(window.orientation == 0) // Portrait
 {
  $("p").css({"background-color":"yellow","font-size":"300%"});
 }
 else // Landscape
 {
  $("p").css({"background-color":"pink","font-size":"200%"});
 }
});

五、页面事件

Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改,或遭遇失败时

【初始化事件】

pagebeforecreate 当页面即将初始化,并且在 jQuery Mobile 已开始增强页面之前,触发该事件。
pagecreate 当页面已创建,但增强完成之前,触发该事件。
pageinit 当页面已初始化,并且在 jQuery Mobile 已完成页面增强之后,触发该事件。

$(document).on("pagebeforecreate",function(event){})

【加载事件】

pagebeforeload 在任何页面加载请求作出之前触发。
pageload 在页面已成功加载并插入 DOM 后触发。
pageloadfailed 如果页面加载请求失败,则触发该事件。默认地,将显示 "Error Loading Page" 消息。

$(document).on("pageload",function(event,data){})

【过渡事件】

pagebeforeshow 在“去的”页面触发,在过渡动画开始前。
pageshow 在“去的”页面触发,在过渡动画完成后。
pagebeforehide 在“来的”页面触发,在过渡动画开始前。
pagehide 在“来的”页面触发,在过渡动画完成后。

$(document).on("pagebeforeshow","#pagetwo",function(){ })

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

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

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

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

相关文章

  • 选择器中含有空格在使用示例及注意事项
  • 基于jQuery的上下无缝滚动应用(单行或多行)
  • jQuery使用之设置元素样式用法实例
  • jQuery实现最简单实用的分秒倒计时
  • 跨帧结构无限级菜单
  • jQuery使用unlock.js插件实现滑动解锁
  • jquery地址栏链接与a标签链接匹配之特效代码总结
  • jQuery Mobile操作HTML5的常用函数总结
  • 打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
  • jQuery移动端图片上传组件

文章分类

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

最近更新的内容

    • 全面解析DOM操作和jQuery实现选项移动操作代码分享
    • jQuery zTree树插件简单使用教程
    • jQuery根据纬度经度查看地图处理程序
    • Jquery知识点二 jquery下对数组的操作
    • jQuery实现鼠标经过提示信息的地图热点效果
    • jquery 判断selection range 是否在容器中的简单实例
    • jQuery延迟加载图片插件Lazy Load使用指南
    • jQuery EasyUI API 中文文档 - ComboBox组合框
    • thinkphp 表名 大小写 窍门
    • jQuery实现搜索页面关键字的功能

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

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