使用 jQuery Mobile 与 HTML5 开发 Web App(三)—— jQuery Mobile 按钮
2015-02-27 17:05
387 查看
一.Button 组件及 jQuery Mobile 如何丰富组件样式
在 jQuery Mobile 里,可以通过给任意链接添加 data-role=“button” 来产生一个 button 组件,jQuery Mobile 会追加一定的样式到链接,值得注意的是,jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应,一般还会追加一些新的元素使到组件的样式更接近于原生的 App 组件样式。下面给出一个例子:这是一个添加了 data-role=“button” 属性的链接,原 HTML 如下
这时用 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 )。data-icon 属性的可取值(来源于 jQuery Mobile 中文手册)
三.按钮组
如果你希望把一些按钮放到一个容器内,构建一个导航之类的独立部件(按钮组),可以将按钮放到一个容器内并给容器设置 data-role="controlgroup" 属性,如果希望得到水平式的按钮组,则添加 data-type="horizontal" 属性到容器里。四.其他按钮组件可用属性
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 —— 03 jQuery Mobile 按钮
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 13 jQuery Mobile 方法上
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 10 jQuery Mobile 默认配置与事件基础
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 14 jQuery Mobile 方法下
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 12 jQuery Mobile 页面事件与 deferred
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 17 HTML5 离线缓存
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 02 jQuery Mobile 基础
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 11 jQuery Mobile 事件详解
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 18 HTML5 Web Workers
- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 01 开发原则
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 08 jQuery Mobile 工具栏
- 使用 jQuery Mobile 与 HTML5 开发 Web App 推荐文章
- 使用 jQuery Mobile 与 HTML5 开发 Web App(十八) —— HTML5 Web Workers
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 15 jQuery Mobile 与响应式
- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 16 HTML5 Web Storage
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 09 jQuery Mobile 页面与对话框
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 07 jQuery Mobile 列表