欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)相對于文字的位置（ 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 在加載請求發(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 如果頁面請求失敗觸發(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 事件處理器

相關(guān)文章

最新評論