一.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>
在浏览器上显示的样式如下:
这时用 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 )。
<a href="#page2" data-role="button" data-icon="check">Check</a>
<a href="#page2" data-role="button" data-icon="check" data-iconpos="top">Check</a>
data-icon 属性的可取值(来源于 jQuery Mobile 中文手册)
三.按钮组
如果你希望把一些按钮放到一个容器内,构建一个导航之类的独立部件(按钮组),可以将按钮放到一个容器内并给容器设置 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>
四.其他按钮组件可用属性
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
相关推荐
第三篇是跨平台APP实战篇,介绍了6个使用jQuery Mobile开发的实际APP;第四篇是发布和推广应用篇,介绍了在开发完成之后,如何发布和推广自己的APP。本书内容详尽、实例丰富,是广大jQuery Mobile初学者、跨平台移动...
HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌.pdf
jquery mobile + html5 手机app表单跨域提交实例 详细讲解请参考 http://blog.csdn.net/lzy8395/article/details/39666027 手机app开发html5 juqery moblie phonegap系列一
jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使用jQuery Mobile框架开发移动端Web App的入门教程
《jQuery Mobile快速入门》适合想要掌握jQuery Mobile的Web开发人员阅读。具有一定开发经验的Android开发人员和iPhone/iPad开发人员在学完本书后,也可以通过一次编码,构建出可跨平台运行的app。
jQuery.Mobile的文档以及Demo 还有一个jQuery.Mobile的学习app 可以下载到手机上。
HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 陈婉凌编著_清华大学出版社_2015.01_P340_完整版 PDF电子书下载 带书签目录
本书以HTML与CSS为主,配合jQuery制作网页,并搭配jQuery Mobile制作移动网页,通过具体的范例从基础到高级循序渐进地讲解。全书首先介绍了HTML5网页开发和CSS网页美化,只要按本书的顺序学习,就能够轻松掌握网页...
《jquery mobile快速入门》适合想要掌握jquery mobile的web开发人员阅读。具有一定开发经验的android开发人员和iphone/ipad开发人员在学完本书后,也可以通过一次编码,构建出可跨平台运行的app。
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除,作者写书非常不容易,如觉得好,请购买纸质书籍,易读易懂!藏书不如读书,读书请买好书,这是好书。 第1章 jquery mobile简介 1.1 通用访问 ...
《jQuery Mobile快速入门》适合想要掌握jQuery Mobile的Web开发人员阅读。具有一定开发经验的Android开发人员和iPhone/iPad开发人员在学完本书后,也可以通过一次编码,构建出可跨平台运行的app。
《jquery mobile快速入门》适合想要掌握jquerymobile的web开发人员阅读。具有一定开发经验的android开发人员和iphone/ipad开发人员在学完本书后,也可以通过一次编码,构建出可跨平台运行的app。
jQuery Mobile和HTML5的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jqueryMobile你会立刻上手。 html5比html4多了很多的标签,...
《jQuery Mobile权威指南》由资深专家根据jQuery Mobile最新版本撰写,对jQuery Mobile的所有功能、特性、使用方法和开发技巧进行了全面而透彻的讲解,是系统学习jQuery Mobile的权威参考书。92个精心设计的经典案例...
基于HTML5和jQuery Mobile的移动学习APP设计与实现.pdf
经历了近一年时间开发的jQuery Mobile正式版1.0终于发布了。jQuery Mobile建立在jQuery Core和jQuery Ui之上,是适用于移动设备的JS框架。作用在于能为智能机,平板机,电子阅读器,台式机等众多平台,提供以HTML5...