jQuery Mobile 中文开发手册3(正在完善和撰写中)

按钮

你可以将页面中的任何一个链接通过data-role="button"来声明成为按钮的显示风格。为了风格统一,框架会在页面加载时自动将form类的按钮格式化为jQuery Mobile风格的按钮,不需要添加data-role属性。

框架中包含了一组常用的图标可以用于按钮,用data-icon属性中的参数来定义显示不同的图标效果。

例如:<a href="index.html" data-role="button" data-icon="delete">Delete</a>

data-icon原生参数列表

参数

图标

arrow-l

clip_image002

arrow-r

clip_image004

arrow-u

clip_image006

arrow-d

clip_image008

delete

clip_image010

plus

clip_image012

minus

clip_image014

check

clip_image016

gear

clip_image018

refresh

clip_image020

forward

clip_image022

back

clip_image024

grid

clip_image026

star

clip_image028

alert

clip_image030

info

clip_image032

home

clip_image034

search

clip_image036

除了可以默认显示左侧的图标之外,还可以用data-iconpos属性来定义图标与文字的位置关系。

data-iconpos参数列表:

参数

效果

right

图标在文字的右侧

top

图标在文字上面

bottom

图标在文字下面

data-iconpos="notext"属性可以让按钮隐藏文字。

内联样式

在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的,但是我们在应用的应用中经常需要在一行中显示多个按钮,这时候我们就需要知道一个新的叫做内联模式的属性了data-inline="true"。

例如:

<div data-inline="true">

<a href="index.html" data-role="button">Cancel</a>

<a href="index.html" data-role="button" data-theme="b">Save</a>

</div>

按钮组

jQuery Mobile框架可以将几个按钮以组的方式显示,data-role="controlgroup"用以展示按钮间的紧凑关系。例如:

<div data-role="controlgroup">

<a href="index.html" data-role="button">Yes</a>

<a href="index.html" data-role="button">No</a>

<a href="index.html" data-role="button">Maybe</a>

</div>

clip_image038

如果需要按钮横向排列可以增加data-type="horizontal"属性。



[本日志由 eddy 于 2011-03-12 10:26 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 1 | 引用: 0 | 查看次数: 5758
回复回复参天树[2011-07-22 10:59 AM | del]
看过了参考手册1 不错希望赶快出2.3.4.……
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭