使用 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

25款 jQuery图表开源软件

转载地址:http://www.oschina.net/project/tag/275/jquery-chart Query图表插件 jQchart jQchart 是...
  • terry_water
  • terry_water
  • 2014年06月05日 17:05
  • 1610

使用 jQuery Mobile 与 HTML5 开发 Web App(二) —— jQuery Mobile 基础

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础 时间:2012年2月20日分类:JavaScript标签:HTML5‚ jQuery ...
  • lxl20052051
  • lxl20052051
  • 2015年02月27日 16:29
  • 907

使用 jQuery Mobile 与 HTML5 开发 Web App(一) 系列文章目录

“使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新。 ...
  • lxl20052051
  • lxl20052051
  • 2015年02月27日 16:24
  • 1590

使用jQuery Mobile框架开发移动端Web App的入门教程

jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使...
  • slqgenius
  • slqgenius
  • 2016年12月06日 12:47
  • 1989

Android原始应用与web app集成:内嵌jquery mobile为html5框架

前言:    很长时间一直思考什么时候需要原生应用于html5开发的web app结合去开发一个App;终于做了一个《立波育儿百科》的应用,才尝试了这种方式做一个App; 本文作者:心有灵...
  • chaishen10000
  • chaishen10000
  • 2015年04月25日 09:42
  • 6274

jquery mobile开发手机webapp页面(二)上传功能

uploadifive上传插件在项目中的应用
  • z21102
  • z21102
  • 2016年03月08日 17:38
  • 2114

jquery mobile开发手机webapp页面

jquery mobile开发webapp(一)
  • z21102
  • z21102
  • 2016年06月23日 13:40
  • 1144

jquery mobile简单开发总结

jquery mobile可以说是前端人员最容易上手的移动开发框架了,基本上会使用jquery的,都可以轻松的使用jQuery mobile去开发webapp或者是Hybrid app。像我之前就是使...
  • zhengzebinhao
  • zhengzebinhao
  • 2016年12月14日 02:14
  • 580

移动WebApp开发-jQuery Mobile入门

移动互联网的发展,促生了各种各样的移动Web框架。jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏...
  • cwb1128
  • cwb1128
  • 2014年01月10日 00:09
  • 6489

使用 jQuery Mobile 及 ASP.NET 开发跨行动装置网站 (Mobile Web)

转:http://msdn.microsoft.com/zh-tw/hh875190.aspx 在行動式裝置普及化的現在,要開發一個能夠跨行動式裝置的原生應用程式 (Native A...
  • xd43100678
  • xd43100678
  • 2014年01月21日 09:58
  • 5594
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用 jQuery Mobile 与 HTML5 开发 Web App —— 03 jQuery Mobile 按钮
举报原因:
原因补充:

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