jQuery Mobile组件:按钮(button)

移动开发
button是jQuery Mobile中的核心部件,在其他插件中也被广为使用。(译注:以下条目的译文当中button和按钮在大多数情况下是同义词,请读者注意区分作为代码的button和按钮的区别)

按钮在用作导航时应该被编码成a标记的链接,而提交表单的按钮则被编码成 button元素 — 它们会被框架提供相同的样式。

为链接应用button样式

在一个页面的的主要内容区域,你可以把任何a标记都转变成button样式,只需要添加data-role="button"属性即可。 即可会自动添加所有必须的样式class来把a标记都转变成button样式。例如:

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

链接按钮表单按钮

为了简化编写样式代码,框架自动把任何带有type="submit"/"reset"/"button"/"image" 的 button 元素或者input元素转换为基于连接的button样式 — 不需要添加data-role="button" 属性。

基于表单(form-based)的按钮的原始按钮(input)是隐藏的,但是依然保留其标记。 当一个按钮的点击事件触发时,也会在原始的表单按钮上触发点击事件。#p#

 

默认情况下,在正文内容所有按钮都自称为块级元素,所以他们会充满整个屏幕的宽度:

Button但是,如果你想要一个更紧凑的按钮,让其只和它包含的文字和图标的宽度相适应,添加data-inline="true" 即可。

Button如果您有多个按钮,并想使它们排成一排,那么包含按钮的容器也需要有一个data-inline="true" 属性。 这会使按钮排成一排并向左浮动。

  1. <div data-inline="true">  
  2.     <a href="index.html" data-role="button">Cancel</a>  
  3.     <a href="index.html" data-role="button" data-theme="b">Save</a>  
  4. </div> 

Cancel Save如果你想要按钮排成一排的同时也充满整个屏幕,你可以使用内容网格系统来把普通按钮排列成2或3列。#p#

有时候,你可能要把某组按钮设置在一起,形成一个单独的块,看起来像导航组件。要获得这种效果,把这组按钮包裹在一个含有data-role="controlgroup" 属性的容器里 — 框架会创建一个垂直排列的按钮组,并去掉它们之间所有的填白和阴影,并只给第一个和最后一个按钮添加圆角。

  1. <div data-role="controlgroup">  
  2. <a href="index.html" data-role="button">Yes</a>  
  3. <a href="index.html" data-role="button">No</a>  
  4. <a href="index.html" data-role="button">Maybe</a>  
  5. </div>

通过为controlgroup容器添加data-type="horizontal" 属性使得分组按钮能水平排布 (请注意,如果对于屏幕来说它们的宽度太宽了,它们则会折行)。#p#

主题化

jQuery Mobile拥有丰富的 主题化系统 ,让您完全控制按钮的风格。 当链接被添加到一个容器时,它会自动被分配一个和其父级(工具条或者内容框)容器相匹配的主题调板,就像变色龙。 所以一个按钮在一个a调板的容器里就会自动被分配为a的调板。

分配主题调板

按钮也可以手工添加主题调板(使用 data-theme属性) 。

  1. <a href="index.html" data-role="button" data-theme="a">Theme a</a>    

 

 

责任编辑:佚名 来源: filod
相关推荐

2011-07-26 08:40:31

jQuery Mobi组件内容格式

2011-07-21 16:10:48

jQuery Mobi工具栏

2011-07-21 15:50:42

jQuery Mobi页面对话框

2012-11-15 10:18:51

IBMdw

2011-09-02 10:41:51

2011-07-19 14:51:54

jQuery Mobi特性

2010-08-13 09:21:12

FlexButton组件

2011-09-05 16:43:00

jQuery Mobi

2011-09-01 10:21:52

jQuery Mobi元素

2011-05-26 16:28:08

Android jQuery

2011-07-19 17:09:44

jQuery Mobi事件

2011-07-21 14:57:34

jQuery Mobi

2011-07-20 14:11:24

响应布局jQuery Mobi

2009-07-28 10:23:19

button按钮ASP.NET

2011-09-06 16:16:48

jQuery Mobi

2011-09-01 10:27:42

jQuery Mobi

2011-09-01 15:00:48

jQuery MobiDemo

2011-07-19 15:01:16

jQuery Mobi易用性

2011-09-05 16:47:49

jQuery Mobi

2012-04-17 22:43:46

jQuery Mobi
点赞
收藏

51CTO技术栈公众号