jQuery Mobile教程:jQuery Mobile基本事件

本文我们来认识一下jQuery Mobile的几个比较重要的基本事件

1、mobileinit

可以利用它来扩展$.mobile或者修改默认配置

示例：

<script type="text/javascript">

//方式1:绑定mobileinit

$(document).bind("mobileinit",function(e){

//修改activePageClass

$.mobile.activePageClass = "custom-ui-page-active";

//增加一个自定义属性

$.mobile.version_inner = "zhang01"; });

//方式2:绑定mobileinit

$(document).bind("mobileinit",function(e){

//增加一个自定义属性

$.extend(

$.mobile,{ activePageClass:"custom-ui-page-active",version_inner:"zhang01";}); }

);

</script>

//自定义脚本需要在依赖前面 <script src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/jqm/../js/jquery.mobile-1.1.0.js" type="text/javascript"></script>

说明：
1、对mobileinit的绑定事件需要在引入jquery.mobile.js之前
2、扩展的方式有两种哦

2、$.mobile.loadPage(url,[options])

将某个页面加载到当前页面中，并自动对其增强

示例：

//给按钮绑定tap事件 //调用loadPage，载入contact.html

$("#loadContact").live("tap",function(){ $.mobile.loadPage("contact.html"); });

关于loadPage的默认参数如图：

说明：
1、loadPage只是载入到DOM中，不会显示

3、$.mobile.changePage(toPage,[options])

替换当前页面

参数toPage:文件URL或者内部的ID

示例：

//给按钮绑定tap事件

$("#loadCopyright").live("tap",function(){

//调用changePage，显示一个已经在DOM的id为copyright的page

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

//调用changePage，显示一个contact.html

$.mobile.changePage("contact.html"); });

关于changePage的默认参数如图：

说明：
1、changePage的第一个参数可以使

4、$.mobile.showPageLoadingMsg(theme,msgText,textonly)

弹出提示信息

参数theme:主题
参数msgText:提示文案内容
参数textonly:是否只显示文案

示例：

//给按钮绑定tap事件

$("#showPageLoadingMsg").live("tap",function(){

$.mobile.showPageLoadingMsg("e","自定义提示，主题e",true);

});

5、$.mobile.hidePageLoadingMsg()

关闭提示信息

示例：

//hidePageLoadingMsg

$("#hidePageLoadingMsg").live("tap",function(){

$.mobile.hidePageLoadingMsg();

});

6、$.mobile.silentScroll(number)

垂直滚动number，不会触发scrollstart和scrollstop

示例：

//给按钮绑定tap事件 //silentScroll

$("#silentScroll").live("tap",function(){ $.mobile.silentScroll(300); });

7、滚动事件：

1、给window绑定scrollstart事件：

示例：

$(window).scrollstart(function(e){

var scrollTop = $(e.target).scrollTop();

$("#scrollinfo").text("scrollstart:"+scrollTop);

});

2、给window绑定scrollstop事件：

示例：

$(window).scrollstop(function(e){

var scrollTop = $(e.target).scrollTop();

$("#scrollinfo").text("scrollstop:"+scrollTop);

});

demo

jQuery Mobile教程:jQuery Mobile基本事件相关推荐

php jquery实例教程,jQuery效果实例分享
jQuery效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置.本文将对此详细介绍.具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 效果操作一共分五类:1.基 ...
w3cschool的jQuery Mobile教程总结
w3cschool的jQuery Mobile教程总结 jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架. jQuery Mobile 工作于所有主流的智能手机和平板电脑上. 一 ...
jQuery Mobile 教程
http://www.w3school.com.cn/jquerymobile/jquerymobile_icons.asp jQuery Mobile 教程 jQuery Mobile 教程 jQu ...
jQuery学习教程
jQuery学习教程 jQuery API文档安装jQuery 引用jquery 查看jQuery版本信息 jQuery语法 jQuery选择器元素选择器 #id 选择器 .class 选择器 j ...
20 个很棒的 jQuery Mobile 教程
转载请注明:文章转载自:开源中国社区 [http://www.oschina.net] 本文标题:20 个很棒的 jQuery Mobile 教程本文地址:http://www.oschina.ne ...
html5 jquery mobile,html5 jquery mobile
html5 jquery mobile [2021-02-11 11:50:41] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(& ...
视频教程-跨平台APP JQuery Mobile开发-jQuery
跨平台APP JQuery Mobile开发主要研究方向为J2EE..net .数据库 .前端.Android,曾经服务过大型上市国企IT部门,软件企业联合创始人,对软件研发管理.市场营销有自己独特 ...
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17　技巧：使用多个列
本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第9章,第9.17节,作者:[荷]Adriaan de Jonge , [美]Phil ...
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.3　技巧：生成类名
本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第3章,第3.3节,作者:[荷]Adriaan de Jonge , [美]Phil ...