jQuery Mobile中的button按钮组件基础使用教程


Posted in Javascript onMay 23, 2016

一.Button 组件及 jQuery Mobile 如何丰富组件样式
在 jQuery Mobile 里,可以通过给任意链接添加 data-role=“button” 来产生一个 button 组件,jQuery Mobile 会追加一定的样式到链接,值得注意的是,jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应,一般还会追加一些新的元素使到组件的样式更接近于原生的 App 组件样式。下面给出一个例子:
这是一个添加了 data-role=“button” 属性的链接,原 HTML 如下

<a href="#page2" data-role="button">Link button</a>

在浏览器上显示的样式如下:

jQuery Mobile中的button按钮组件基础使用教程

这时用 DOM 查看工具查看实际得到的 HTML ,可以发现 jQuery Mobile 不仅给原来的 a 元素添加了 CSS 以丰富按钮样式,还另外追加了一些 HTML 使到样式更加丰富,当然这个部分由 jQuery Mobile 自动完成,并不需要开发者操心太多。

jQuery Mobile中的button按钮组件基础使用教程

注:带链接的按钮元素和表单中的 button 元素会被自动渲染,无需另外添加 data-role="button" 属性。
二.带图标按钮
jQuery Mobile 允许开发者通过在链接中添加 data-icon="" 属性来为 button 组件添加一个标准的 Web 图标,并且支持通过 data-iconpos="" 属性设置图标相对于文字的位置( top, bottom, right ,默认为 left )。

<a href="#page2" data-role="button" data-icon="check">Check</a>

jQuery Mobile中的button按钮组件基础使用教程

<a href="#page2" data-role="button" data-icon="check" data-iconpos="top">Check</a>

jQuery Mobile中的button按钮组件基础使用教程

data-icon 属性的可取值(来源于 jQuery Mobile 中文手册)

jQuery Mobile中的button按钮组件基础使用教程

.按钮组
如果你希望把一些按钮放到一个容器内,构建一个导航之类的独立部件(按钮组),可以将按钮放到一个容器内并给容器设置 data-role="controlgroup" 属性,如果希望得到水平式的按钮组,则添加 data-type="horizontal" 属性到容器里。

<div data-role="controlgroup">
  <a href="#page2" data-role="button">是</a>
  <a href="#page2" data-role="button">否</a>
  <a href="#page2" data-role="button">取消</a>
</div>

jQuery Mobile中的button按钮组件基础使用教程

四.其他按钮组件可用属性
1. data-theme=“” , 所有的 jQuery Mobile 组件均支持该属性,用于设置组件的颜色, 该属性默认有五个值 a, b, c, d, e,分别代表由深到浅五种颜色,另外开发者还可以通过在 CSS 里添加相应的 Class 来自定义颜色。
2. data-inline="" ,内联按钮,button 组件添加该属性后会自动改成内联的形式, jQuery Mobile 会给链接添加 display: inline-block 的 CSS ,让链接按照文字的长度来控制自身长度,并且可以与其他内联元素共行。
五.按钮绑定事件
我们以例子来讲,直接上代码:

<!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>

看看运行效果:

jQuery Mobile中的button按钮组件基础使用教程

  • 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 事件处理器
Javascript 相关文章推荐
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
详解vue axios二次封装
Jul 22 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 #Javascript
jQuery插件formValidator实现表单验证
May 23 #Javascript
超链接怎么正确调用javascript函数
May 23 #Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 #Javascript
jQuery中选择器的基础使用教程
May 23 #Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 #Javascript
AngularJS上拉加载问题解决方法
May 23 #Javascript
You might like
老照片 - 几十年前的收音机与人
2021/03/02 无线电
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python如何通过protobuf实现rpc
2016/03/06 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python实现的config文件读写功能示例
2019/09/24 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
银行求职推荐信范文
2013/11/30 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
英语教研活动总结
2014/07/02 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书