W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery Mobile 按钮



Mobile 应用程序是建立在您想要显示的简单的点击事物上。




在 jQuery Mobile 中创建按钮

在 jQuery Mobile 中,按钮可通过三种方式创建:

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用带有 data-role="button" 的 <a> 元素

<input>

<input type="button" value="Button">
尝试一下 »

<button>

<button class="ui-btn">Button</button>
尝试一下 »

<a>

<a href="#anylink" class="ui-btn">Button</a>
尝试一下 »



注意:
在版本1.4之前,我们使用data-role =“button”属性在jQuery Mobile中创建一个按钮。 从1.4开始,框架使用CSS类来设置按钮(除了<input>按钮)。
Note 在 jQuery Mobile 中,按钮会自动样式化,让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 class="ui-btn" 的 <a> 元素在页面间进行链接,使用 <input> 或 <button> 元素进行表单提交。

导航按钮

要通过按钮链接页面,请使用 class="ui-btn" 的 <a> 元素:

Example

<a href="#pagetwo" class="ui-btn">Go to Page Two</a>
尝试一下 »

组合按钮

jQuery Mobile提供了一种将按钮分组在一起的简单方法。

在容器元素中使用 data-role="controlgroup" 属性和 data-type="horizontal|vertical",以指定是水平还是垂直对按钮进行分组:

Example

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" class="ui-btn">Button 1</a>
  <a href="#" class="ui-btn">Button 2</a>
  <a href="#" class="ui-btn">Button 3</a>
</div>
尝试一下 »

Note 默认情况下,分组按钮是垂直分组的,它们之间没有边距和空格。 只有第一个和最后一个按钮都有圆角,这样在组合在一起时会产生漂亮的外观。

后退按钮

如需创建后退按钮,请使用 data-rel="back" 属性(这会忽略锚的 href 值):

Example

<a href="#" class="ui-btn" data-rel="back">Go Back</a>
尝试一下 »

内联按钮

默认情况下,按钮占据屏幕的整个宽度。如果你想要一个只是内容一样宽的按钮,或者如果你想要两个或更多按钮并排出现,添加“ui-btn-inline”类:

Example

<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>
尝试一下 »

更多链接按钮实例

描述 实例
ui-btn-b 修改按钮颜色为黑色,字体为白色(默认为灰色背景,黑色字体)。 尝试
ui-corner-all 为按钮添加圆角。 尝试
ui-mini 制作小按钮。 尝试
ui-shadow 为按钮添加阴影。 尝试

Note 如果你需要使用更多的样式,每个样式类使用空格隔开,如: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

默认情况下 <input> 按钮有圆角及阴影效果。<a> 和 <button> 元素没有。

更完整的CSS类,请查看我们的 jQuery Mobile CSS 类参考手册

下一章演示如何在按钮上加上图标。