jQuery Mobile的学习时间botton按钮的事件学习

程序员都很懒，你懂的！
生命的绝唱来机只争朝夕，如诗的年华更需惜时如金。不要让今天的懈怠成为一生的痛。
每天都在进步。最近在学习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>组合按钮</h1>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<p>水平组合按钮:</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">按钮 3 blur</a>
</div><br>
<div data-role="controlgroup" data-type="vertical">
<p>垂直组合按钮 (默认):</p>
<a href="#" data-role="button">按钮 1</a>
<a href="#" data-role="button">按钮 2</a>
<a href="#" data-role="button">按钮 3</a>
</div>
<p>内联按钮且不带圆角:</p>
<a href="#" data-role="button" data-inline="true">按钮 1</a>
<a href="#" data-role="button" data-inline="true">按钮 2</a>
<br>
<a href="#" data-role="button" data-inline="true" data-corners="false">按钮 1</a>
<a href="#" data-role="button" data-inline="true" data-corners="false">按钮 2</a>
<p>内联按钮：普通与迷你</p>
<a href="#" data-role="button" data-inline="true">按钮 1</a>
<a href="#" data-role="button" data-inline="true">按钮 2</a>
<br>
<a href="#" data-role="button" data-inline="true" data-mini="true">按钮 1</a>
<a href="#" data-role="button" data-inline="true" data-mini="true">按钮 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 历史，哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 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共同学习！

jQuery Mobile的学习时间botton按钮的事件学习相关推荐

Android学习之为按钮添加事件监听器的两种方法
为按钮(包括普通按钮和图片按钮等)添加单击事件监听器有两种方法,第一种是利用匿名内部类来实现,第二种是使用onClick属性来实现 1.匿名内部类使用匿名内部类,我们首先需要在布局文件中给按钮设置i ...
使用 jQuery Mobile 与 HTML5 开发 Web App (三) —— jQuery Mobile 按钮
一.Button 组件及 jQuery Mobile 如何丰富组件样式在 jQuery Mobile 里,可以通过给任意链接添加 data-role="button" 来产生一个 ...
jquery mobile android浏览器,我们怎样使用jQuery Mobile实现手机新闻浏览器
大家是否还对这部分知识存在疑问呀,让我来为大家详细解答一下. Mobile项目是jQuery项目下的在方面的又一力作.swift 教程在本文中,笔者将带你一步步更深入学习使用jQuery Mobile ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...
w3cschool的jQuery Mobile教程总结
w3cschool的jQuery Mobile教程总结 jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架. jQuery Mobile 工作于所有主流的智能手机和平板电脑上. 一 ...
jQuery Mobile页面返回无需重新get
jquery mobile新版中没有返回按钮的解决方案 1. 需要在页面源代码的 page 中加上 data-add-back-btn="true" . 2.同时页面的代码中加上一 ...
jquery html data属性,jQuery Mobile Data 属性
jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观. 在下面的参考列 ...
jQuery Mobile Data 属性
按钮带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...
jQuery Mobile 1.1 : 更流畅，更快捷，更实用
最新版本的jQuery Mobile 1.1本月13号刚刚发布,带给我们了最新的强大特和代码提升.在这篇文章中,我们将要快速的介绍jQuery mobile的新特性及其移动开发人员需要了解的所有内容. ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十一) —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

jQuery Mobile的学习时间botton按钮的事件学习

jQuery Mobile的学习时间botton按钮的事件学习相关推荐

最新文章

热门文章