JQueryMolibe事件
来源：互联网 发布：针对接口编程 编辑：程序博客网 时间：2024/06/10 16:49
页面事件：
1.初始化事件
2.外部页面加载事件
3.页面切换事件
初始换事件：
将函数绑定在mobileinit事件，可以更改JQuery Mobile的一些默认设置值，该事件在JQuery Molile开始执行之前触发
$(doucument).on("mobileinit",function()
{
$.mobile.ajaxEnabled=false;
});
Pagebeforecreate事件在页面DOM加载后，正在初始化时触发
$(document).on("pagebeforecreate",function(){});
pagecreate事件在DOM加载后，初始化完成时触发
$(doucument).on("pagecreate",function(){});
pageinit事件在DOM加载后，初始化完成后触发
$(document).on("pageinit",function(){});
JQuery用$(document).ready()判断DOM进程，JQuery Molibe使用pageinit来判断
$().on()和$().one()
---one只触发一次，而on没有限制
绑定事件需要放在Pagebeforecreate，pagecreate，pageinit之间。
外部页面加载事件：
pagebeforeload 是在任何加载之前触发的事件。
pageload事件，页面加载成功
pageloadfailed事件，页面加载失败触发
$("document").on("pageload",function(event,data){...})
事件对象 - 包括任何jQuery事件属性 ( event.target, event.type 等)
数据对象 - 包含以下类型:
url (string) - 通过回调传到$.mobile.loadPage()的绝对或者相对地址
absUrl (string) - 包含URL的绝对引用
dataUrl (string) - 包含浏览器的URL 位置
options (object) - 包含可选项发送到 $.mobile.loadPage()
xhr (object) - 包含 XMLHttpRequest 对象 (作为第三个参数发送到 $.ajax() 成功回调)
textStatus (string 或者 null) - 包含请求状态 ("success" 或 "null") (作为第二个参数发送到 $.ajax() 失败回调)
页面切换事件：
$(":mobile-pagecontainer").pagecontainer("change",to,[options]);
to ---切换的页面链接或者地址
—— 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 时可用。
transition属性的转场动画效果：
slide ---从右到左
slideup ---从下到上
slidedown ---从上到下
pop ---从小点到全屏幕
fade ---淡入淡出
flip ---2d或3d旋转动画
触摸事件：
$().("tap",function(){});
长按事件：
$().("taphold",function(){});
默认时间是750毫秒 ，可以使用$event.special.tap.tapholdThreshold来改变触发的时间长短
$event.special.tap.tapholdThreshold=3000
滑动事件：
$().("swipe",function(){});
swipeleft ---左滑动事件
swiperight ---右滑动事件
滚动事件：
$().("scrollstart",function(){});
屏幕方向改变事件：（最好绑定到window组件）
1.初始化事件
2.外部页面加载事件
3.页面切换事件
初始换事件：
将函数绑定在mobileinit事件，可以更改JQuery Mobile的一些默认设置值，该事件在JQuery Molile开始执行之前触发
$(doucument).on("mobileinit",function()
{
$.mobile.ajaxEnabled=false;
});
Pagebeforecreate事件在页面DOM加载后，正在初始化时触发
$(document).on("pagebeforecreate",function(){});
pagecreate事件在DOM加载后，初始化完成时触发
$(doucument).on("pagecreate",function(){});
pageinit事件在DOM加载后，初始化完成后触发
$(document).on("pageinit",function(){});
JQuery用$(document).ready()判断DOM进程，JQuery Molibe使用pageinit来判断
$().on()和$().one()
---one只触发一次，而on没有限制
绑定事件需要放在Pagebeforecreate，pagecreate，pageinit之间。
外部页面加载事件：
pagebeforeload 是在任何加载之前触发的事件。
pageload事件，页面加载成功
pageloadfailed事件，页面加载失败触发
$("document").on("pageload",function(event,data){...})
事件对象 - 包括任何jQuery事件属性 ( event.target, event.type 等)
数据对象 - 包含以下类型:
url (string) - 通过回调传到$.mobile.loadPage()的绝对或者相对地址
absUrl (string) - 包含URL的绝对引用
dataUrl (string) - 包含浏览器的URL 位置
options (object) - 包含可选项发送到 $.mobile.loadPage()
xhr (object) - 包含 XMLHttpRequest 对象 (作为第三个参数发送到 $.ajax() 成功回调)
textStatus (string 或者 null) - 包含请求状态 ("success" 或 "null") (作为第二个参数发送到 $.ajax() 失败回调)
页面切换事件：
$(":mobile-pagecontainer").pagecontainer("change",to,[options]);
to ---切换的页面链接或者地址
—— 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 时可用。
transition属性的转场动画效果：
slide ---从右到左
slideup ---从下到上
slidedown ---从上到下
pop ---从小点到全屏幕
fade ---淡入淡出
flip ---2d或3d旋转动画
触摸事件：
$().("tap",function(){});
长按事件：
$().("taphold",function(){});
默认时间是750毫秒 ，可以使用$event.special.tap.tapholdThreshold来改变触发的时间长短
$event.special.tap.tapholdThreshold=3000
滑动事件：
$().("swipe",function(){});
swipeleft ---左滑动事件
swiperight ---右滑动事件
滚动事件：
$().("scrollstart",function(){});
屏幕方向改变事件：（最好绑定到window组件）
$(window).("orientationchange",function(){});
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>zyy</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><style type="text/css">#content{ text-align:center;}</style><link rel="stylesheet" href="themes/zyy001.min.css" /><link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script type="text/javascript"> $(document).on("mobileinit",function(){$.mobile.ajaxEnabled=false;}); $(document).on("pagebeforecreate",function(){alert("pagebeforecreate触发了")}); $(document).on("pagecreate",function(){alert("pagecreate触发了")});$(document).on("pageinit",function(){alert("pageinit触发了")});$("#aaa").one("click",function(){alert("呵呵！")});</script></head><body> <div data-role="page" data-title="第一页" id="first" data-theme="zyy001"> <a href="#" data-role="button" id="aaa">第二页</a> <fieldset data-role="controlgroup"> <legend id="content">最喜欢的水果</legend> <input type="radio" name="radio1" id="radio-a" value="choice-1" checked="checked"/> <label for="radio-a">苹果</label> <input type="radio" name="radio1" id="radio-b" value="choice-2" /> <label for="radio-b">香蕉</label> <input type="radio" name="radio1" id="radio-c" value="choice-3" /> <label for="radio-c">樱桃</label> </fieldset> <div data-role="header"> <h1>第一页</h1> </div> <div data-role="content" id="content"> <a href="#second" data-rel="dialog" id="aaa">按我到第二页</a> <input type="text" name="uname" id="uid" value="hehe" /> </div> <div data-role="footer"> <h4>页脚</h4> <input type="range" name="ranger" id="rangerer" value="25" max="50" min="0" data-highlight="true"/> </div></div><div data-role="page" data-title="第二页" id="second"><a href="#first" data-role="button">第一页</a> <label>每天上网时间</label> <select name="select-1" id="select-a" data-mini="true"> <option value="1">少于1小时</option> <option value="2">1小时</option> <option value="3">2小时</option> <option value="4">3小时</option> <option value="5">3小时以上</option> </select><div data-role="header"><a data-rel="back">返回上一页</a> <h1>第二页</h1> </div> <div data-role="content" id="content"> <a href="#first">回到第一页</a> <div data-role="controlgroud" > <input type="button" value="这是个按钮" data-icon="gear" data-iconpos="top" data-inline="true" / > <input type="submit" value="申请" data-icon="forward" data-iconpos="bottom" data-inline="true" / > <input type="reset" value="撤销" data-icon="delete" data-inline="true" / > </div> </div> <div data-role="footer"> <h4>页脚</h4> <label><Input type="checkbox" name="check1" id="checkbox-1"/>我同意</label> <label><Input type="checkbox" name="check1" id="checkbox-2"/>我拒绝</label> <ol id="htm" data-role="listview" data-inset="true"> <li><a href="https://www.baidu.com/"> <img src="001.jpg"/> <h3>百度</h3> <span class="ui-li-count">11</span> </a></li> <li><a href="https://www.taobao.com/"> <img src="002.jpg"/> <h3>淘宝</h3> </a></li> <li><a href="https://www.jd.com/"> <img src="003.jpg"/> <h3>京东</h3> </a></li> </ol> </div></div></body></html><!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>zyy</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><style type="text/css">#content{ text-align:center;}</style><script type="text/javascript">$(document).on("pageinit",function(){$("#aaa").one("click",function(){alert("fuck the shit");});});</script></head><body><div data-role="header"><a data-rel="back">返回上一页</a> <h1>第二页</h1> </div> <div data-role="content" id="content"> <a href="#first">回到第一页</a> <div data-role="controlgroud" > <input type="button" value="这是个按钮" data-icon="gear" data-iconpos="top" data-inline="true" id="aaa"/ > <input type="submit" value="申请" data-icon="forward" data-iconpos="bottom" data-inline="true" / > <input type="reset" value="撤销" data-icon="delete" data-inline="true" / > </div> </div></body></html>阅读全文
0 0
- JQueryMolibe事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 事件
- 【个人笔记重点，不作为参考】主题：立即执行函数
- httpClient学习整理
- Scala学习一：基础
- Java命令学习系列
- RecyclerView实现查看更多及收起
- JQueryMolibe事件
- 如何寻找出微信官方的微信指数API ？
- maven项目添加jar包
- linux建站安装
- SharePoint Framework 企业向导（二）
- JAVA如何判断字符串编码
- CSU---D: Simple Line Editor
- SpringMVC架构与Mybatis整合
- 【转】模仿绘画风格的算法：A Neural Algorithm of Artistic Style
