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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
javascript中的new使用
Mar 20 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
js实现照片墙功能实例
Feb 05 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
vue.js中npm安装教程图解
Apr 10 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 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
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
python如何编写win程序
2020/06/08 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
降低python版本的操作方法
2020/09/11 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
打架检讨书300字
2014/02/02 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
环保建议书600字
2014/05/14 职场文书
赤壁观后感(2)
2015/06/15 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL