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

生命的绝唱来机仅仅争朝夕，如诗的年华更需惜时如金。

不要让今天的懈怠成为一生的痛。

每天都在进步。

近期在学习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共同学习！

jQuery Mobile的学习时间bottonbutton的事件学习的更多相关文章

  1. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  2. jQuery Mobile里xxx怎么用呀? (事件篇)

    jQuery Mobile里$(document).ready()怎么用呀? 相关链接: http://stackoverflow.com/questions/14468659/jquery-mobi ...

  3. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  4. jQuery Mobile方向感应事件

    在现在的智能手机中,都有对方向变换的自动感知功能,比如当手机方向从水平方向切换到垂直方向时,则会触发该事件.在jQuery Mobile中,可以通过orientationchange事件进行绑定,并且 ...

  5. Jquery Mobile事件

    Jquery Mobile事件参考手册 on()方法用于添加事件处理程序 1.Touch类事件 在用户触摸屏幕时触发 1.1 tap事件 用户敲击某个元素时发生 $("p").on ...

  6. jQuery Mobile 页面事件

    jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...

  7. 利用JQuery Mobile开发web app

    什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...

  8. jquery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水 ...

  9. HTML5开发移动web应用—JQuery Mobile(1)

    JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...

随机推荐

  1. cocos2dx -- 学习笔记

    在导入 cocos-ext.h 时项目会报错. 需要在 Additional Include Directories 中增加 $(EngineRoot) 并置顶(试验,不置顶也可以) 如果找不到当前目 ...

  2. Git_期末总结

    终于到了期末总结的时刻了! 经过几天的学习,相信你对Git已经初步掌握.一开始,可能觉得Git上手比较困难,尤其是已经熟悉SVN的童鞋,没关系,多操练几次,就会越用越顺手. Git虽然极其强大,命令繁 ...

  3. 新型穿墙监控雷达Range-R：让你的隐私无所遁形(转)

    还是隐私问题,原帖地址:http://www.freebuf.com/news/57446.html 在我们的认知中,政府对民众的监控已经成为一种常态.从电话.电子邮件到通信聊天.社交网络,一切细节都 ...

  4. Maven根据不同环境打包不同配置文件

    开发项目时会遇到这个问题:开发环境,测试环境,生产环境的配置文件不同,打包时经常要手动更改配置文件,更改的少还可以接受,但是如果需要更多个配置文件,手动的方法就显得非常笨重了. 下面介绍一种方法,利用 ...

  5. 用最简单的例子理解策略模式(Strategy Pattern)

    当一个动作有多种实现方法,在实际使用时,需要根据不同情况选择某个方法执行动作,就可以考虑使用策略模式. 把动作抽象成接口,比如把玩球抽象成接口. public interface IBall { vo ...

  6. org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundaryRAYPKeHKTYSNdzc1;charset=UTF-8' not supported

    原文:https://www.cnblogs.com/yueli/p/7552888.html 最近同事在做一个图片上传功能.在入参 body 中同时传入文件和其它基本信息结果出现如题异常.在此记录下 ...

  7. 【BZOJ】【2878】【NOI2012】迷失游乐园

    树形+基环树DP/数学期望 然而我并不会做…… 题解戳这里:http://blog.csdn.net/u011265346/article/details/46328543 好吧先考虑一个简单点的,当 ...

  8. 用java查询HBase中某表的一批数据

    java代码如下: package db.query; import java.io.IOException; import org.apache.hadoop.conf.Configuration; ...

  9. scala编程第16章学习笔记（4）——List对象的方法

    通过元素创建列表:List.apply List(1, 2, 3) 等价于List.apply(1, 2, 3): scala> List.apply(1, 2, 3) res0: List[I ...

  10. 第六章 企业项目开发--cookie

    注:本章代码基于<第五章 企业项目开发--mybatis注解与xml并用>的代码,链接如下: http://www.cnblogs.com/java-zhao/p/5120792.html ...