閱讀557 返回首頁    go 阿裏雲 go 技術社區[雲棲]

jQuery Mobile的學習時間botton按鈕的事件學習

程序員都很懶，你懂的！

生命的絕唱來機隻爭朝夕，如詩的年華更需惜時如金。不要讓今天的懈怠成為一生的痛。

每天都在進步。最近在學習jquery mobile開發，使用的button，綁定事件，和大家一起學習，一起分享！

直接上代碼：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" >
  <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" >我綁定事件了</a>
    <a href="#" data-role="button" >方法2綁定事件</a>
    <a href="#" data-role="button" >按鈕 3  blur</a>
    </div><br>
    <div data-role="controlgroup" data-type="vertical">
    <p>垂直組合按鈕 (默認):</p>
    <a href="#" data-role="button">按鈕 1</a>
    <a href="#" data-role="button">按鈕 2</a>
    <a href="#" data-role="button">按鈕 3</a>
    </div>
  <p>內聯按鈕且不帶圓角:</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>內聯按鈕：普通與迷你</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直接綁定失去焦點的事件
		$('#btn3').on('blur', function() {
			alert('on直接綁定失去焦點的事件了');
		});

</script>
</body>
</html>
看看運行效果：

事件 描述

hashchange 啟用可標記 #hash 曆史，哈希值會在一次獨立的點擊時發生時變化，比如一個用戶點擊後退按鈕，會通過 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 事件處理器
點擊下載學習資料：https://download.csdn.net/download/xmt1139057136/7422831
如果你還有不懂，請加qq群：135430763共同學習！

最後更新：2017-04-03 08:26:19

  上一篇：go “治理”微信們：國家“專項行動”的商業反響
  下一篇：go 設計模式六大原則——合成/聚合複用原則(CARP)