jQuery Mobile的學習時間bottonbutton的事件學習
程式猿都非常懶，你懂的！
生命的絕唱來機僅僅爭朝夕，如詩的年華更需惜時如金。不要讓今天的懈怠成為一生的痛。
每天都在進步。近期在學習jquery mobile開發，使用的button，繫結事件，和大家一起學習，一起分享！
直接上程式碼：
看看執行效果：<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <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>組合button</h1> </div> <div data-role="content"> <div data-role="controlgroup" data-type="horizontal"> <p>水平組合button:</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">button 3 blur</a> </div><br> <div data-role="controlgroup" data-type="vertical"> <p>垂直組合button (預設):</p> <a href="#" data-role="button">button 1</a> <a href="#" data-role="button">button 2</a> <a href="#" data-role="button">button 3</a> </div> <p>內聯button且不帶圓角:</p> <a href="#" data-role="button" data-inline="true">button 1</a> <a href="#" data-role="button" data-inline="true">button 2</a> <br> <a href="#" data-role="button" data-inline="true" data-corners="false">button 1</a> <a href="#" data-role="button" data-inline="true" data-corners="false">button 2</a> <p>內聯button：普通與迷你</p> <a href="#" data-role="button" data-inline="true">button 1</a> <a href="#" data-role="button" data-inline="true">button 2</a> <br> <a href="#" data-role="button" data-inline="true" data-mini="true">button 1</a> <a href="#" data-role="button" data-inline="true" data-mini="true">button 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直接繫結失去焦點的事件 $('#btn3').on('blur', function() { alert('on直接繫結失去焦點的事件了'); }); </script> </body> </html>
事件 描寫敘述
點選下載學習資料：http://download.csdn.net/download/xmt1139057136/7422831hashchange 啟用可標記 #hash 歷史，雜湊值會在一次獨立的點選時發生時變化，比方一個使用者點選後退button，會通過 hashchange事件進行處理。navigate 包裹了 hashchange 和 popstate 的事件 orientationchange 方向改變事件,在使用者垂直或者水平旋轉移動裝置時觸發。 pagebeforechange 在頁面切換之前，觸發的事件。使用$.mobile.changePage()來切換頁面。此方法觸發2個事件，切換之前的pagebeforechange事件。和切換完畢後pagechange（成功）或者pagechangefailed（失敗）。 pagebeforecreate 頁面初始化時。初始化之前觸發。 pagebeforehide 在頁面切換後舊頁面隱藏之前，觸發的事件。 pagebeforeload 在載入請求發出之前觸發 pagebeforeshow 在頁面切換後顯示之前，觸發的事件。 pagechange 在頁面切換成功後，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換之前的pagebeforechange事件，和切換完畢後pagechange（成功）或者pagechangefailed（失敗）。 pagechangefailed 在頁面切換失敗時，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換之前的pagebeforechange事件。和切換完畢後pagechange（成功）或者pagechangefailed（失敗）。 pagecreate 在頁面建立成功之後，觸發的事件,但增強完畢之前。 pagehide 在頁面切換後老頁面隱藏之後，觸發的事件。
pageinit 在頁面頁面初始化時。觸發的事件。 pageload 在頁面全然載入成功後觸發。 pageloadfailed 假設頁面請求失敗觸發。 pageremove 在窗體檢視從 DOM 中移除外部頁面之前觸發。
pageshow 在過渡動畫完畢後，在"到達"頁面觸發。 scrollstart 當用戶開始滾動頁面時觸發。 scrollstop 當用戶停止滾動頁面時觸發。 swipe 當用戶在元素上水平滑動時觸發。 swipeleft 當用戶從左劃過元素超過 30px 時觸發。 swiperight 當用戶從右劃過元素超過 30px 時觸發。
tap 當用戶敲擊某元素時觸發。 taphold 當元素敲擊某元素並保持一秒時觸發。 throttledresize 啟用可標記 #hash 歷史記錄 updatelayout 由動態顯示/隱藏內容的 jQuery Mobile 元件觸發。
vclick 虛擬化的 click 事件處理器 vmousecancel 虛擬化的 mousecancel 事件處理器 vmousedown 虛擬化的 mousedown 事件處理器 vmousemove 虛擬化的 mousemove 事件處理器 vmouseout 虛擬化的 mouseout 事件處理器 vmouseover 虛擬化的 mouseover 事件處理器 vmouseup 虛擬化的 mouseup 事件處理器
假設你還有不懂，請加qq群： 135430763共同學習！