使用 jQuery Mobile 与 HTML5 开发 Web App —— 03 jQuery Mobile 按钮

转载 2014年08月08日 14:30:43

一.Button 组件及 jQuery Mobile 如何丰富组件样式

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

 

这是一个添加了 data-role=“button” 属性的链接,原 HTML 如下

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

 

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

 

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

 

注:带链接的按钮元素和表单中的 button 元素会被自动渲染,无需另外添加 data-role="button" 属性。

 

二.带图标按钮

jQuery Mobile 允许开发者通过在链接中添加 data-icon="" 属性来为 button 组件添加一个标准的 Web 图标,并且支持通过 data-iconpos="" 属性设置图标相对于文字的位置( top, bottom, right ,默认为 left )。

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

 

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

 

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

 

三.按钮组

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

1
2
3
4
5
<divdata-role="controlgroup">
    <ahref="#page2"data-role="button">是</a>
    <ahref="#page2"data-role="button">否</a>
    <ahref="#page2"data-role="button">取消</a>
</div>

 

 

四.其他按钮组件可用属性

1. data-theme=“” , 所有的 jQuery Mobile 组件均支持该属性,用于设置组件的颜色, 该属性默认有五个值 a, b, c, d, e,分别代表由深到浅五种颜色,另外开发者还可以通过在 CSS 里添加相应的 Class 来自定义颜色。

 

2. data-inline="" ,内联按钮,button 组件添加该属性后会自动改成内联的形式, jQuery Mobile 会给链接添加 display: inline-block 的 CSS ,让链接按照文字的长度来控制自身长度,并且可以与其他内联元素共行。

 

五.完整 Demo

完整实例 Demo(建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览)

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/web-app-by-jquery-mobile-and-html5-button.html

使用 jQuery Mobile 与 HTML5 开发 Web App —— 15 jQuery Mobile 与响应式

jQuery Mobile 在刚推出的时候,曾经宣传了几个重要的特点,除了 Kayo 在本系列文章中多次介绍的“触摸屏优化”外,另外一个最直接的特点就是“响应式设计”,关于响应式设计,Kayo 已经写...
  • sqzhao
  • sqzhao
  • 2014-08-10 00:26:15
  • 704

webSocket通信

WebSocket 机制 以下简要介绍一下 WebSocket 的原理及运行机制。WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达...
  • osdfhv
  • osdfhv
  • 2017-01-08 17:58:04
  • 997

jquery mobile手机端MVC模式C#

  • 2017年10月18日 13:52
  • 26.49MB
  • 下载

HTML5+JQuery Mobile 移动端WebApp案例

  • 2015年11月02日 11:08
  • 630KB
  • 下载

ASP.NET MVC 4 Mobile 介绍

 这篇文章我们将介绍 ASP.NET MVC 的移动特性。 你需要先 安装 ASP.NET MVC 4 现在开始。 Step 1: 创建 ASP.NET MVC 4 Web 应用项目...
  • Andrewniu
  • Andrewniu
  • 2016-12-27 10:21:07
  • 742

移动端的客户端MVC设计模式思考

关于MVC 设计模式的思考,记录于此,与君共勉。 首先,我们大家都非常的熟悉MVC模式,Module,View,Control.绝大多数的人都是很理解他们的含义的,并且也都经常的使用这样的开发模型。...
  • fp196391196391
  • fp196391196391
  • 2013-12-19 17:06:59
  • 1930

博客园的手机版(非官方) MVC+jQuery.Mobile

目录      1.前言      2.演示地址      3.效果图      4.相关技术      5.实现功能      6.需要完善和增加的功能      7.流量测试   ...
  • dyllove98
  • dyllove98
  • 2013-06-17 21:49:54
  • 978

HTML5+JS手机web开发之jQuery Mobile初涉

一、起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好。因为,Android系统一套...
  • ful1021
  • ful1021
  • 2014-04-18 22:30:07
  • 805

WebSocket使用教程-带完整实例

摘要: WebSocket使用教程 - 带完整实例 什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服...
  • dj0379
  • dj0379
  • 2016-10-21 15:11:26
  • 28124

android WebView结合jQuery mobile之基础:整合篇

先将jQuery,jQueryMobile库文件,css文件copy入assets中,结构如下: 创建assets/index.html,注意jQuery库和css路径千万不要搞错了。 ...
  • gundumw100
  • gundumw100
  • 2017-04-10 18:45:44
  • 254
收藏助手
不良信息举报
您举报文章:使用 jQuery Mobile 与 HTML5 开发 Web App —— 03 jQuery Mobile 按钮
举报原因:
原因补充:

(最多只允许输入30个字)