专栏首页业余草jQuery Mobile的学习时间botton按钮的事件学习

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5的data-*自定义属性

    HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我...

    业余草
  • jQuery Mobile开发的新闻阅读器,适应iphone和android手机

    程序员都很赖,你懂的! 我们经常上新浪,腾讯,雅虎等各大网站上面看新闻,他们也都各自推出了自家的手机新闻阅读器。今天我自...

    业余草
  • 面试官:Tomcat 的调优怎么做?你的最佳实践有哪些?

    Tomcat作为Web应用的服务器,目前绝大多数公司都是用其作为应用服务器的,应用服务器的执行效率会影响系统执行,这里会讲Tomcat怎样进行配置能提高处理性能...

    业余草
  • 搭建简易的物联网服务端和客户端-DCloud手机端(十)

    1)介绍 官方介绍:最接近原生APP体验的高性能前端框架 网址:http://dev.dcloud.net.cn/mui/

    治电小白菜
  • jquery mobile 移动web(1)

    轻量级框架jQuery Mobile   所需文件     <link rel="stylesheet" href="jquery.mobile-1.1.2/...

    用户1197315
  • 「R」绘制分组排序点图

    我在看过的一些 Nature 文章和 COSMIC 数据库中看到用点图来展示不同癌症类型下 TMB 的分布差异。在 R 包中,我有看到过 maftools 中可...

    王诗翔呀
  • Python3选择排序

    选择排序 概述 选择排序(Selection sort)是一种简单直观的排序算法。 它的工作原理是每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在...

    苦叶子
  • BootstrapTable,选中某几行,获取其数据并进行后台处理。以及其他的属性使用。

    1、首先将复选框搞出来,<table data-single-select="true"> 属性,限制了只能单选。去除以后添加<th data-checkbox...

    别先生
  • [Python3 开发技巧]·如何打乱字典中多个对应数组

    当我们把数个对应数组保存到字典中,在我们读取的时候这些数据会按照我们保存的顺序读取出来。如果我们需要打乱顺序,但不改变对应数组的关系时,例如原先位置0对应的各个...

    小宋是呢
  • 译文 | 在使用过采样或欠采样处理类别不均衡数据后,如何正确做交叉验证?

    最近读的一篇英文博客,讲的很不错,于是便抽空翻译成了中文。 [关于我在这篇文章中使用的术语可以在 Physionet (http://www.physionet...

    用户1332428

扫码关注云+社区

领取腾讯云代金券