源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-03-11 10:58 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery-mobile事件监听与用法详解
本文实例讲述了jQuery-mobile事件监听与用法。分享给大家供大家参考,具体如下: 触摸事件 - 当用户触摸屏幕时触发(敲击和滑动) 滚动事件 - 当上下滚动时触发 方向事件 - 当设备垂直或水平旋转时触发 页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发 [b]一、初始化事件[/b] 1. ready 事件 页面加载完成
$(document).ready(function(){
  //your code here...
});

2. 页面加载完成事件二 pageinit
$(document).on('pageinit','#pageone',function(){
  //your code here...
});

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

[b]二、触摸事件[/b] tap          事件在用户敲击某个元素时触发 taphold      事件在用户敲击某个元素并保持一秒时被触发 swipe        事件在用户在某个元素上水平滑动超过 30px 时被触发 swipeleft    事件在用户在某个元素上从左滑动超过 30px 时被触发 swiperight   事件在用户在某个元素上从右滑动超过 30px 时被触发 [b]三、滚动事件[/b] scrollstart 事件在用户开始滚动页面时被触发 (iOS 设备会在滚动事件发生时冻结 DOM 操作) scrollstop 事件在用户停止滚动页面时被触发 [b]四、方向(横竖屏转动)[/b] 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%"});
 }
});

[b]五、页面事件[/b] 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相关内容感兴趣的读者可查看本站专题:《[url=http://www.1sucai.cn/Special/200.htm]jQuery常用插件及用法总结[/url]》、《[url=http://www.1sucai.cn/Special/451.htm]jQuery扩展技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/514.htm]jQuery切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/628.htm]jQuery遍历算法与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》、《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》及《[url=http://www.1sucai.cn/Special/75.htm]jquery选择器用法总结[/url]》 希望本文所述对大家jQuery程序设计有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部