首页 / JAVASCRIPT / Mobile中button按钮组件使用详解

Mobile中button按钮组件使用详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Mobile中button按钮组件使用详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5051字，纯文字阅读大概需要8分钟。

内容图文

这次给大家带来Mobile中button按钮组件使用详解，Mobile中button按钮组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。

一.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>

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

Mobile中button按钮组件使用详解 - 文章图片

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

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>

Mobile中button按钮组件使用详解 - 文章图片

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

Mobile中button按钮组件使用详解 - 文章图片

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

Mobile中button按钮组件使用详解 - 文章图片

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

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

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>
<p data-role="page" id="pageone">
 <p data-role="header">
 <h1>组合按钮</h1>
 </p>
 <p data-role="content">
  <p 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>
  </p><br>
  <p 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>
  </p>
 <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>
 <p data-role="footer">
 <h1>底部文本</h1>
 </p>
</p> 
<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>

看看运行效果：

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（失败）。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

jQuery Mobile自定义标签使用详解

jQuery Mobile与Kendo UI使用时有哪些区别

以上就是Mobile中button按钮组件使用详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的Mobile中button按钮组件使用详解全部内容，希望文章能够帮你解决Mobile中button按钮组件使用详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/291390.html

来源：【匿名】