jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程

更新時(shí)間：2016年05月23日 16:00:55 作者：Kayo Lee

jQuery Mobile中的button默認(rèn)提供了很多用于制作移動(dòng)Web頁面按鈕的屬性,這里我們來整理一下jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程,需要的朋友可以參考下

一.Button 組件及 jQuery Mobile 如何豐富組件樣式
在 jQuery Mobile 里，可以通過給任意鏈接添加 data-role=“button” 來產(chǎn)生一個(gè) button 組件，jQuery Mobile 會(huì)追加一定的樣式到鏈接，值得注意的是，jQuery Mobile 在給組件元素追加樣式時(shí)不一定只在原有的元素上添加 CSS 和 Javascript 響應(yīng)，一般還會(huì)追加一些新的元素使到組件的樣式更接近于原生的 App 組件樣式。下面給出一個(gè)例子：
這是一個(gè)添加了 data-role=“button” 屬性的鏈接，原 HTML 如下

<a href="#page2" data-role="button">Link button</a>

在瀏覽器上顯示的樣式如下：

2016523154917109.png (1024×80)

這時(shí)用 DOM 查看工具查看實(shí)際得到的 HTML ，可以發(fā)現(xiàn) jQuery Mobile 不僅給原來的 a 元素添加了 CSS 以豐富按鈕樣式，還另外追加了一些 HTML 使到樣式更加豐富，當(dāng)然這個(gè)部分由 jQuery Mobile 自動(dòng)完成，并不需要開發(fā)者操心太多。

2016523155005379.png (786×86)

注：帶鏈接的按鈕元素和表單中的 button 元素會(huì)被自動(dòng)渲染，無需另外添加 data-role="button" 屬性。
二.帶圖標(biāo)按鈕
jQuery Mobile 允許開發(fā)者通過在鏈接中添加 data-icon="" 屬性來為 button 組件添加一個(gè)標(biāo)準(zhǔn)的 Web 圖標(biāo)，并且支持通過 data-iconpos="" 屬性設(shè)置圖標(biāo)相對(duì)于文字的位置（ top, bottom, right ，默認(rèn)為 left ）。

<a href="#page2" data-role="button" data-icon="check">Check</a>

2016523155045704.png (561×61)

<a href="#page2" data-role="button" data-icon="check" data-iconpos="top">Check</a>

2016523155101105.png (570×90)

data-icon 屬性的可取值（來源于 jQuery Mobile 中文手冊）

2016523155123600.png (513×664)

.按鈕組
如果你希望把一些按鈕放到一個(gè)容器內(nèi)，構(gòu)建一個(gè)導(dǎo)航之類的獨(dú)立部件（按鈕組），可以將按鈕放到一個(gè)容器內(nèi)并給容器設(shè)置 data-role="controlgroup" 屬性，如果希望得到水平式的按鈕組，則添加 data-type="horizontal" 屬性到容器里。

<div data-role="controlgroup">
  <a href="#page2" data-role="button">是</a>
  <a href="#page2" data-role="button">否</a>
  <a href="#page2" data-role="button">取消</a>
</div>

2016523155147674.png (1024×112)

四.其他按鈕組件可用屬性
1. data-theme=“” ，所有的 jQuery Mobile 組件均支持該屬性，用于設(shè)置組件的顏色，該屬性默認(rèn)有五個(gè)值 a, b, c, d, e，分別代表由深到淺五種顏色，另外開發(fā)者還可以通過在 CSS 里添加相應(yīng)的 Class 來自定義顏色。
2. data-inline="" ，內(nèi)聯(lián)按鈕，button 組件添加該屬性后會(huì)自動(dòng)改成內(nèi)聯(lián)的形式， jQuery Mobile 會(huì)給鏈接添加 display: inline-block 的 CSS ，讓鏈接按照文字的長度來控制自身長度，并且可以與其他內(nèi)聯(lián)元素共行。
五.按鈕綁定事件
我們以例子來講，直接上代碼：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
 <div data-role="header">
 <h1>組合按鈕</h1>
 </div>
 <div data-role="content">
  <div data-role="controlgroup" data-type="horizontal">
  <p>水平組合按鈕:</p>
  <a href="#" data-role="button" id="btn1">我綁定事件了</a>
  <a href="#" data-role="button" id="btn2">方法2綁定事件</a>
  <a href="#" data-role="button" id="btn3">按鈕 3 blur</a>
  </div><br>
  <div data-role="controlgroup" data-type="vertical">
  <p>垂直組合按鈕 (默認(rèn)):</p>
  <a href="#" data-role="button">按鈕 1</a>
  <a href="#" data-role="button">按鈕 2</a>
  <a href="#" data-role="button">按鈕 3</a>
  </div>
 <p>內(nèi)聯(lián)按鈕且不帶圓角:</p>
 <a href="#" data-role="button" data-inline="true">按鈕 1</a>
 <a href="#" data-role="button" data-inline="true">按鈕 2</a>
 <br>
 <a href="#" data-role="button" data-inline="true" data-corners="false">按鈕 1</a>
 <a href="#" data-role="button" data-inline="true" data-corners="false">按鈕 2</a>
 <p>內(nèi)聯(lián)按鈕：普通與迷你</p>
 <a href="#" data-role="button" data-inline="true">按鈕 1</a>
 <a href="#" data-role="button" data-inline="true">按鈕 2</a>
 <br>
 <a href="#" data-role="button" data-inline="true" data-mini="true">按鈕 1</a>
 <a href="#" data-role="button" data-inline="true" data-mini="true">按鈕 2</a>
 <div data-role="footer">
 <h1>底部文本</h1>
 </div>
</div> 
<script type="text/javascript">
  //先解綁，再綁定
  $('#btn1').unbind().bind('click', function() {
   alert('我綁定事件了');
  });
  //on直接綁定
  $('#btn2').on('click', function() {
   alert('on直接綁定事件了');
  });
  //on直接綁定失去焦點(diǎn)的事件
  $('#btn3').on('blur', function() {
   alert('on直接綁定失去焦點(diǎn)的事件了');
  });

</script>
</body>
</html>

看看運(yùn)行效果：

2016523155228276.png (252×65)

hashchange 啟用可標(biāo)記 #hash 歷史，哈希值會(huì)在一次獨(dú)立的點(diǎn)擊時(shí)發(fā)生時(shí)變化，比如一個(gè)用戶點(diǎn)擊后退按鈕，會(huì)通過 hashchange事件進(jìn)行處理。
navigate 包裹了 hashchange 和 popstate 的事件
orientationchange 方向改變事件,在用戶垂直或者水平旋轉(zhuǎn)移動(dòng)設(shè)備時(shí)觸發(fā)。
pagebeforechange 在頁面切換之前，觸發(fā)的事件。使用$.mobile.changePage()來切換頁面，此方法觸發(fā)2個(gè)事件，切換之前的pagebeforechange事件，和切換完成后pagechange（成功）或者pagechangefailed（失?。?。
pagebeforecreate 頁面初始化時(shí)，初始化之前觸發(fā)。
pagebeforehide 在頁面切換后舊頁面隱藏之前，觸發(fā)的事件。
pagebeforeload 在加載請(qǐng)求發(fā)出之前觸發(fā)
pagebeforeshow 在頁面切換后顯示之前，觸發(fā)的事件。
pagechange 在頁面切換成功后，觸發(fā)的事件。使用$.mobile.changePage()來切換頁面，此方法觸發(fā)2個(gè)事件，切換之前的pagebeforechange事件，和切換完成后pagechange（成功）或者pagechangefailed（失?。?。
pagechangefailed 在頁面切換失敗時(shí)，觸發(fā)的事件。使用$.mobile.changePage()來切換頁面，此方法觸發(fā)2個(gè)事件，切換之前的pagebeforechange事件，和切換完成后pagechange（成功）或者pagechangefailed（失敗）。
pagecreate 在頁面創(chuàng)建成功之后，觸發(fā)的事件,但增強(qiáng)完成之前。
pagehide 在頁面切換后老頁面隱藏之后，觸發(fā)的事件。
pageinit 在頁面頁面初始化時(shí)，觸發(fā)的事件。
pageload 在頁面完全加載成功后觸發(fā)。
pageloadfailed 如果頁面請(qǐng)求失敗觸發(fā)。
pageremove 在窗口視圖從 DOM 中移除外部頁面之前觸發(fā)。
pageshow 在過渡動(dòng)畫完成后，在"到達(dá)"頁面觸發(fā)。
scrollstart 當(dāng)用戶開始滾動(dòng)頁面時(shí)觸發(fā)。
scrollstop 當(dāng)用戶停止?jié)L動(dòng)頁面時(shí)觸發(fā)。
swipe 當(dāng)用戶在元素上水平滑動(dòng)時(shí)觸發(fā)。
swipeleft 當(dāng)用戶從左劃過元素超過 30px 時(shí)觸發(fā)。
swiperight 當(dāng)用戶從右劃過元素超過 30px 時(shí)觸發(fā)。
tap 當(dāng)用戶敲擊某元素時(shí)觸發(fā)。
taphold 當(dāng)元素敲擊某元素并保持一秒時(shí)觸發(fā)。
throttledresize 啟用可標(biāo)記 #hash 歷史記錄
updatelayout 由動(dòng)態(tài)顯示/隱藏內(nèi)容的 jQuery Mobile 組件觸發(fā)。
vclick 虛擬化的 click 事件處理器
vmousecancel 虛擬化的 mousecancel 事件處理器
vmousedown 虛擬化的 mousedown 事件處理器
vmousemove 虛擬化的 mousemove 事件處理器
vmouseout 虛擬化的 mouseout 事件處理器
vmouseover 虛擬化的 mouseover 事件處理器
vmouseup 虛擬化的 mouseup 事件處理器