在這篇文章中咱們將詳細介紹 jQuery Mobile 的按鈕。在 jQuery Mobile 中全部按鈕的樣式通常都是文本居中，圓角，有陰影的效果，還包括一個可選的圖標。javascript
讓咱們來看看這些按鈕是如何工做的。css
Step 1: 首先建立一個 .html 頁面來演示 jQuery Mobile 的按鈕圖標html
Step 2: .html 的頁面內容以下，這裏咱們使用了 Microsoft CDNjava
03 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
05 |
<meta charset="utf-8" /> |
06 |
<meta name="viewport" content="width=device-width, initial-scale=1"/> |
08 |
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script> |
09 |
<scriptsrc="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.js" type="text/javascript"></script> |
10 |
<linkhref="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" /> |
11 |
<linkhref="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css" /> |
Step 3: 而後將下列代碼放在 .html 頁面的 body 塊中jquery
03 |
<a href="javascript:void(0)" data-role="button" data-icon="delete">Delete</a> |
04 |
<a href="javascript:void(0)" data-role="button" data-icon="plus">Plus</a> |
05 |
<a href="javascript:void(0)" data-role="button" data-icon="minus">Minus</a> |
06 |
<a href="javascript:void(0)" data-role="button" data-icon="check">Check</a> |
07 |
<a href="javascript:void(0)" data-role="button" data-icon="grid">Grid</a> |
08 |
<a href="javascript:void(0)" data-role="button" data-icon="forward">Foward</a> |
09 |
<a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a> <a href="javascript:void(0)" data-role="button" data-icon="gear">Gear</a> |
10 |
<a href="javascript:void(0)" data-role="button" data-icon="arrow-l">Left Arrow</a> |
11 |
<a href="javascript:void(0)" data-role="button" data-icon="arrow-r">Right Arrow</a> |
12 |
<a href="javascript:void(0)" data-role="button" data-icon="arrow-u">Up Arrow</a> <a href="javascript:void(0)" data-role="button" data-icon="arrow-d">Down Arrow</a> |
13 |
<a href="javascript:void(0)" data-role="button" data-icon="home">Home</a> |
14 |
<a href="javascript:void(0)" data-role="button" data-icon="alert">Alert</a> |
15 |
<a href="javascript:void(0)" data-role="button" data-icon="star">Star</a> |
16 |
<a href="javascript:void(0)" data-role="button" data-icon="info">Info</a> |
17 |
<a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a> |
18 |
<a href="javascript:void(0)" data-role="button" data-icon="back">Back</a> |
Step 4: 頁面執行的效果以下，下圖是在 Windows Phone 手機上看到的效果：ajax
你也能夠在手機中打開以下地址來查看實際效果：asp.net
http://www.osctools.net/jsbin/awlwhydj/1.net
Step 5: 建立另一個 html 文件，重複上面第二個步驟來演示不帶文本的按鈕翻譯
Step 6: 將下列代碼放在 body 塊中code
1 |
<li>Icons with no text</li> |
3 |
<a href="javascript:void(0)" data-role="button" data-icon="delete"data-iconpos="notext">Delete</a> |
4 |
<a href="javascript:void(0)" data-role="button" data-icon="plus" data-iconpos="notext">Plus</a> |
5 |
<a href="javascript:void(0)" data-role="button" data-icon="minus"data-iconpos="notext">Minus</a> |
6 |
<a href="javascript:void(0)" data-role="button" data-icon="check"data-iconpos="notext">Check</a> |
Step 7: 下圖是頁面執行的效果：
點擊下面地址查看效果：
http://www.osctools.net/jsbin/whbvelkj/1
Step 8: 再建立另外的 html 頁面，重複第二個步驟來暗示 Inline 按鈕和按鈕分組
Step 9: 將下列代碼放在上一步 html 文件中的 body 標籤內
02 |
<a href="javascript:void(0)" data-role="button" data-icon="delete"data-inline="true">Delete</a> |
03 |
<a href="javascript:void(0)" data-role="button" data-icon="plus" data-inline="true">Plus</a> |
04 |
<a href="javascript:void(0)" data-role="button" data-icon="minus"data-inline="true">Minus</a> |
05 |
<a href="javascript:void(0)" data-role="button" data-icon="check"data-inline="true">Check</a> |
07 |
<li>Horizontal Grouping</li> |
09 |
<div data-role="controlgroup" data-type="horizontal"> |
10 |
<a href="javascript:void(0)" data-role="button" data-inline="true">Button 1</a> |
11 |
<a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a> |
12 |
<a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a> |
15 |
<li>Normal Grouping</li> |
17 |
<div data-role="controlgroup"> |
18 |
<a href="javascript:void(0)" data-role="button">Button 1</a> |
19 |
<a href="javascript:void(0)" data-role="button">Button 2</a> |
20 |
<a href="javascript:void(0)" data-role="button">Button 2</a> |
Step 10: 執行效果以下：
在線演示：http://www.osctools.net/jsbin/gyjslcfi/1
Step 11: 演示無陰影、無圓角的圖標定位按鈕
Step 12: 代碼以下
03 |
<a href="javascript:void(0)" data-role="button" data-shadow="false"data-icon="delete" data-inline="true">Delete</a> |
04 |
<a href="javascript:void(0)" data-role="button" data-shadow="false"data-icon="plus" data-inline="true">Plus</a> |
08 |
<a href="javascript:void(0)" data-role="button" data-corners="false"data-icon="minus" data-inline="true">Minus</a> |
09 |
<a href="javascript:void(0)" data-role="button" data-corners="false"data-icon="check" data-inline="true">Check</a> |
11 |
<li>Icon Position</li> |
13 |
<a href="javascript:void(0)" data-role="button" data-iconpos="right"data-icon="grid" data-inline="true">Grid</a> |
14 |
<a href="javascript:void(0)" data-role="button" data-iconpos="left"data-icon="forward" data-inline="true">Foward</a> |
15 |
<a href="javascript:void(0)" data-role="button" data-iconpos="bottom"data-icon="refresh" data-inline="true">Refresh</a> |
16 |
<a href="javascript:void(0)" data-role="button" data-iconpos="top"data-icon="gear" data-inline="true">Gear</a> |
Step 12: 運行效果
在線演示：http://www.osctools.net/jsbin/tikgjhgb/1
全文完！
英文原文，OSCHINA原創翻譯
