jQuery Mobile的学习时间bottonbutton的事件学习

https://blog.csdn.net/xmt1139057136/article/details/27700521

程序猿都非常懒，你懂的！

生命的绝唱来机仅仅争朝夕，如诗的年华更需惜时如金。不要让今天的懈怠成为一生的痛。

每天都在进步。

近期在学习jquery mobile开发，使用的button，绑定事件。和大家一起学习。一起分享！

直接上代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone"><div data-role="header"><h1>组合button</h1></div><div data-role="content"><div data-role="controlgroup" data-type="horizontal"><p>水平组合button:</p><a href="#" data-role="button" id="btn1">我绑定事件了</a><a href="#" data-role="button" id="btn2">方法2绑定事件</a><a href="#" data-role="button" id="btn3">button 3  blur</a></div><br><div data-role="controlgroup" data-type="vertical"><p>垂直组合button (默认):</p><a href="#" data-role="button">button 1</a><a href="#" data-role="button">button 2</a><a href="#" data-role="button">button 3</a></div><p>内联button且不带圆角:</p><a href="#" data-role="button" data-inline="true">button 1</a><a href="#" data-role="button" data-inline="true">button 2</a><br><a href="#" data-role="button" data-inline="true" data-corners="false">button 1</a><a href="#" data-role="button" data-inline="true" data-corners="false">button 2</a><p>内联button：普通与迷你</p><a href="#" data-role="button" data-inline="true">button 1</a><a href="#" data-role="button" data-inline="true">button 2</a><br><a href="#" data-role="button" data-inline="true" data-mini="true">button 1</a><a href="#" data-role="button" data-inline="true" data-mini="true">button 2</a><div data-role="footer"><h1>底部文本</h1></div>
</div>
<script type="text/javascript">//先解绑，再绑定$('#btn1').unbind().bind('click', function() {alert('我绑定事件了');});//on直接绑定$('#btn2').on('click', function() {alert('on直接绑定事件了');});//on直接绑定失去焦点的事件$('#btn3').on('blur', function() {alert('on直接绑定失去焦点的事件了');});</script>
</body>
</html>

看看执行效果：

事件描写叙述

hashchange 启用可标记 #hash 历史。哈希值会在一次独立的点击时发生时变化。比方一个用户点击后退button，会通过 hashchange事件进行处理。

navigate 包裹了 hashchange 和 popstate 的事件 orientationchange 方向改变事件,在用户垂直或者水平旋转移动设备时触发。 pagebeforechange 在页面切换之前，触发的事件。

使用$.mobile.changePage()来切换页面，此方法触发2个事件。切换之前的pagebeforechange事件，和切换完毕后pagechange（成功）或者pagechangefailed（失败）。 pagebeforecreate 页面初始化时，初始化之前触发。 pagebeforehide 在页面切换后旧页面隐藏之前。触发的事件。 pagebeforeload 在载入请求发出之前触发 pagebeforeshow 在页面切换后显示之前。触发的事件。 pagechange 在页面切换成功后，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完毕后pagechange（成功）或者pagechangefailed（失败）。 pagechangefailed 在页面切换失败时。触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件。切换之前的pagebeforechange事件，和切换完毕后pagechange（成功）或者pagechangefailed（失败）。

pagecreate 在页面创建成功之后。触发的事件,但增强完毕之前。 pagehide 在页面切换后老页面隐藏之后，触发的事件。 pageinit 在页面页面初始化时。触发的事件。

pageload 在页面全然载入成功后触发。 pageloadfailed 假设页面请求失败触发。 pageremove 在窗体视图从 DOM 中移除外部页面之前触发。 pageshow 在过渡动画完毕后。在"到达"页面触发。 scrollstart 当用户開始滚动页面时触发。

scrollstop 当用户停止滚动页面时触发。 swipe 当用户在元素上水平滑动时触发。 swipeleft 当用户从左划过元素超过 30px 时触发。

swiperight 当用户从右划过元素超过 30px 时触发。

tap 当用户敲击某元素时触发。

taphold 当元素敲击某元素并保持一秒时触发。 throttledresize 启用可标记 #hash 历史记录 updatelayout 由动态显示/隐藏内容的 jQuery Mobile 组件触发。 vclick 虚拟化的 click 事件处理器 vmousecancel 虚拟化的 mousecancel 事件处理器 vmousedown 虚拟化的 mousedown 事件处理器 vmousemove 虚拟化的 mousemove 事件处理器 vmouseout 虚拟化的 mouseout 事件处理器 vmouseover 虚拟化的 mouseover 事件处理器 vmouseup 虚拟化的 mouseup 事件处理器

点击下载学习资料：http://download.csdn.net/download/xmt1139057136/7422831
假设你还有不懂，请加qq群：135430763共同学习！

转载于:https://www.cnblogs.com/mqxnongmin/p/10932523.html

jQuery Mobile的学习时间bottonbutton的事件学习相关推荐

jQuery Mobile里xxx怎么用呀? (事件篇)
http://app-framework-software.intel.com/ http://app-framework-software.intel.com/api2/#$_proxy jQuer ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十一) —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
JQuery Mobile 学习
手机端JQuery: http://www.w3school.com.cn/jquerymobile/ 1.JQuery mobile库引用: <link rel="styleshee ...
w3cschool的jQuery Mobile教程总结
w3cschool的jQuery Mobile教程总结 jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架. jQuery Mobile 工作于所有主流的智能手机和平板电脑上. 一 ...
为什么有些人除了上课时间以外都没有学习，成绩却还是很好？
新高二学生,成绩在班级10~12名左右. 有两个女生特别6. 第一个,我室友,上课以外的时间都是看漫画,看小说,画画,睡觉,吃零食.但是成绩就是很好,她化学进了学校的竞赛培训班,数学也很好,但是平时完 ...
HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件即可. 最基础的jQuery Mobile文件的结构代码如下: <body> ...
jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础
使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础时间:2012年9月25日分类:JavaScript 标签:HTML5‚ ...

jQuery Mobile的学习时间bottonbutton的事件学习

jQuery Mobile的学习时间bottonbutton的事件学习相关推荐

最新文章

热门文章