jQuery Mobile的学习时间botton按钮的事件学习
来源:互联网 发布:圆筒的体积怎么算c语言 编辑:程序博客网 时间:2024/05/22 21:41
生命的绝唱来机只争朝夕,如诗的年华更需惜时如金。不要让今天的懈怠成为一生的痛。
每天都在进步。最近在学习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按钮的事件学习
- jQuery Mobile的学习时间botton按钮的事件学习
- jQuery-Mobile学习(按钮)
- jQuery Mobile的按钮
- JQuery Mobile 开发学习手记(二):JS绑定的按钮动作不正确的问题
- jQuery mobile 学习03 按钮基础
- JQuery Mobile 开发学习手记(一):JS批量设置按钮动作的问题
- jQuery mobile 学习10 布局的设置
- Jquery Mobile UI之列表的学习
- 对jquery mobile的学习过程一
- jQuery Mobile的API事件
- jQuery Mobile的API事件
- jQuery的Mobile事件处理
- 深入jQuery Mobile的事件
- jquery mobile 的事件测试
- jQuery mobile 学习02 页面事件
- jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
- 学习jQuery的on事件
- DICOM:fo-dicom之C-STORE再分析‘解决System.ObjectDisposedException异常’
- NDK的用法
- hdu1506一维木板动归
- servlet小知识点(1)
- HTTP报文
- jQuery Mobile的学习时间botton按钮的事件学习
- bzoj3524 区间问题
- Linux下删除低版本的Python异常
- git给自己
- 动态规划10_数位DP2
- Java学习日记(九)Collection、泛型、Map集合、Collections&Arrays、增强for语句、可变参数、静态导入
- poj 2949 Word Rings 参数搜索+负环探测
- Common Lisp-对象相等性 函数或谓词包括:eq、eql、equal、equalp、=
- Log4net不同版本在app.config和web.config的配置区别