jQueryMobile中的button按鈕組件基礎使用教程_jquery_第1頁
jQueryMobile中的button按鈕組件基礎使用教程_jquery_第2頁
jQueryMobile中的button按鈕組件基礎使用教程_jquery_第3頁
jQueryMobile中的button按鈕組件基礎使用教程_jquery_第4頁
jQueryMobile中的button按鈕組件基礎使用教程_jquery_第5頁
已閱讀5頁，還剩1頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、jquery mobile中的button按鈕組件基 礎使用教程一.button組件及jquery mob訂e如何豐富組件樣式在jquery mob訂c里，可以通過給任意鏈接添加data-role= ubutton來產 生一個button組件,jquery mobile會追加一定的樣式到鏈接，值得注意的足, jquery mob訂e在給組件元素追加樣式時不一定只在原有的元素上添加css和 javascript響應，一般還會追加一些新的元素使到組件的樣式更接近于原生的 app組件樣式。下面給出一個例子：這是一個添加了 data-role二"button"屬性的鏈接，原h(huán)tml

2、如下 <a href=，/#page2z，data-role=zzbutton/z>link button</a>在瀏覽器上顯示的樣式如下：link button這吋用dom查看工具查看實際得到的html ,可以發(fā)現jquery mobile不僅給 原來的a元索添加了 css以豐富按鈕樣式，還另外追加了一些html使到樣式 更加豐富，當然這個部分由jquery mobile 口動完成，并不需要開發(fā)者操心太 多。<h3> 攝按鈕 </h3> vadata role=”birtt:on” datn uibtncornershadow <span

3、 class="uinner ui-btncornir-all" aria-hidde門二”七 rueh> <span class= "uibtn-text11 >link buttonv/spana</span»</a>注：帶鏈接的按鈕元素和表單中的button元素會被口動渲染，無需另外添加 data-role=，zbutton/，屬性。二帶圖標按鈕jquery mob訂e允許開發(fā)者通過在鏈接中添加data-icon二"屬性來為button 組件添加一個標準的web圖標，并且支持通過data-iconpos

4、二"屬性設置圖標 相對于文字的位置（top, bottom, right ,默認為left ）。check<a href二#page2 data-role=，/button data-iconfcheck data-iconpos=z，top，z>check</a>checkdata-icon屬性的可取值（來源于jquery mob訂e中文手冊）arrow-1oarrow-roarrow-ugarrow-dodclclcplusominusechecko艸rorefreshgpirwardgt»ack0gridostaroalertoinfoohom

5、eosearcho按鈕組如果你希望把一些按鈕放到一個容器內，構建一個導航之類的獨立部件（按鈕 組），可以將按鈕放到一個容器內并給容器設置data-role=，controlgroup，z屬 性，如果希望得到水平式的按鈕組，則添加data-type二horizontal"屈性到容 器里。<div dat a-role 二 co nt rolgroupzz><a href二#peige2 delta-role二button"是/a><a href=，#page2，/ deitarole=，button">否</且><

6、;a href二#page2 data-role二button"取消/a></div>否取消四其他按鈕組件可用屬性1. data-theme二“”,所有的jquery mob訂e組件均支持該屬性，用于設置 組件的顏色，該屬性默認有五個值a, b, c, d, e,分別代表曲深到淺五種顏 色，另外開發(fā)者還可以通過在css里添加相應的class來口定義顏色。2. data-inline二",內聯按鈕button組件添加該屈性后會自動改成內聯的 形式,jquery mob訂e會給鏈接添加display: inline-block的css ,讓鏈 接按照文字的長度

7、來控制自身長度，并且可以與其他內聯元素共行。五按鈕綁定事件我們以例了來講，直接上代碼：<!doctype html><html><head>link rcl二"stylesheet"href二http:/code jquery. com/mobile/1. 4. 2/jquery. mobile-1. 4. 2. min css ><script srehttp:/code, jquery. com/jquery-1. 10. 2. min. jsx/script> <scriptsre二http:/codc. j

8、query. com/mobile/1. 4. 2/jquery. mobile一1. 4. 2. min. js"> </script></head><body><div data-role二page" id二pageone><div data-role=/zhcadcr/，>hl組合按鈕</hl></div><div data-role=zzcontent><di v data-role二control group" data-type二horizont

9、al>p>水平組合按鈕:</p><a href二data-:role二button" id二btnl">我綁定事件了/a<a href二#" data-role二button" id二btn2">方法 2 綁定事件/a><a href二# data-role二button" id二btn3>按鈕 3 blur</a></div><br><div datei-role二controlgroup" data-type二&q

10、uot;vertical" 邙>垂直組合按鈕（默認）：</p><a href二#" data-role二button"按鈕 l</a><a href二# data-role=/，button，>按鈕 2</a><a href二#" data-role二button"按鈕 3</a></div>p>內聯按鈕且不帶闘角:</p><a href二#<a href二#<br><a href二#datarole=，bu

11、tto n" data-role=/，button，/data-role二buttondata-corners二fal se>按鈕 l/g><a href="#" data-role=/zbuttortdata-corners二false"按鈕 2</a> p>內聯按鈕：普通與迷你/p> <a href二# <a href二#<br><a href二if按鈕l</a><a href二#按鈕2</a>data-role二button data-role二b

12、utton"data-role=z，buttondata-:role 二 but to ndata-ini inc二"truc">按鈕 data-i nl in e 二 true> 按鈕data-inline二 truedata-ini inc二trucdata-ini ine二true>按鈕 data-ini ine二"true"按鈕l</a>2</a>l</a>2</a>data-inline=/ztrue，/ data-mini二true"data-ini ine

13、二true" data-mini二true><div data-role=zzfooter，z>hl>底部文本</hl></div></div><script type=z，text/javascriptz，>先解綁，再綁定$(' wbtnt ). unbind(). bind(' click', function() alert c我綁定事件了)；)；/on直接綁定 $c #btn2'). onc click', function() alert (' on直接綁

14、定事件了')；)；/on直接綁定失去焦點的事件$ ('#btn3') on('blur', function() alert (? on直接綁定失去焦點的事件了)；)； </script></body></html>看看運行效果:是 否 取消 hashchange啟用可標記#hash歷史，哈希值會在一次獨立的點擊吋發(fā)牛時變化，比 如一個用戶點擊后退按鈕，會通過hashchange事件進行處理。 navigate 包裹了 hashchange 和 popstate 的事件 orientationchange方向改變事件，

15、在用戶垂直或者水平旋轉移動設備時觸發(fā)。 pagebeforechange在頁面切換z前，觸發(fā)的事件。使用$.mobile.changepage（）來切換 頁面，此方法觸發(fā)2個事件，切換z前的pagcbcforcchangc事件，和切換完成后 pagechange （成功）或者 pagechangefailed （失敗）。 pagebeforecreate頁面初始化時，初始化之前觸發(fā)。 pagebeforehide在頁面切換后iii頁面隱藏之前，觸發(fā)的事件。 pagebeforeload在加載請求發(fā)出之前觸發(fā) pagebeforeshow在頁而切換后顯示之詢，觸發(fā)的事件。 pagechange在

16、頁面切換成功后，觸發(fā)的事件。使用$.inobile.changepage（）來切換頁面, 此方法觸發(fā)2個事件，切換之前的pagebeforechange事件，和切換完成后pagechange（成功）或者 pagechangefailed （失?。?。 pagechangefailed在頁面切換失敗時，觸發(fā)的事件。使用$.mobile.changepage（）來切 換頁面，此方法觸發(fā)2個事件，切換之前的pagcbcforcchangc事件，和切換完成后 pagechange （成功）或者 pagechangefailed （失?。?。 pagecreate在頁面創(chuàng)建成功之后，觸發(fā)的事件，但增強完成之

17、前。 pagehide在頁面切換后老頁面隱藏z后，觸發(fā)的事件。 pageinit在頁面頁而初始化時，觸發(fā)的事件。 pageload在頁而完全加載成功后觸發(fā)。 pageloadfailed如果頁面請求失敗觸發(fā)。 pageremove在窗口視圖從dom屮移除外部頁血之前觸發(fā)° pageshow在過渡動ifflj完成后，在倒達”頁面觸發(fā)。 scrollstart當用戶開始滾動頁而時觸發(fā)。 scrollstop當用八停止?jié)L動頁而時觸發(fā)。 swipe當用戶在元素上水平滑動時觸發(fā)。 swipeleft當用戶從左劃過元素超過30px時觸發(fā)。 swiperight當用戶從右劃過元素超過30px時觸發(fā)。 tap當用戶敲擊某元素時觸發(fā)。 taphold當元素敲擊某元素并保持一秒

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論