jQuery Mobile组件 ：按钮(button)(转)

 

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

Button标记

为链接应用button样式

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

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

链接按钮表单按钮

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

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

 

 

内置Button

 

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

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

Button如果您有多个按钮，并想使它们排成一排，那么包含按钮的容器也需要有一个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>

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

 

 

  分组Button

 

有时候，你可能要把某组按钮设置在一起，形成一个单独的块，看起来像导航组件。要获得这种效果，把这组按钮包裹在一个含有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>

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

 

 

主题化Button

 

主题化

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

分配主题调板

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

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