當使用行動裝置進行觸控操作時,最常用的就是輕擊、按住螢幕或手勢操作,jQuery Mobile可以透過綁定的觸控事件來回應使用者的特定觸控行為。
一、輕擊與按住
直接上程式碼(一切皆在程式碼中,細細品吧!)
<!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.6.4.js" type="text/javascript" ></script> <script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script> <script type="text/javascript"> $('#page1').live('tap', function(){ $.mobile.changePage('#page2'); }); $('#page2').live('tap', function(){ $.mobile.changePage('#page1'); }); $('#page1').live('taphold', function(){ alert('taphold事件被触发'); }); $('#page2').live('taphold', function(){ $.mobile.changePage('#about'); }); </script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"> <h1>Tap事件处理</h1> </header> <p class="content" data-role="content"> 轻击页面进入下一页<br/> 按住不放,打开关于对话框 </p> <footer data-role="footer"></footer> </section> <section id="page2" data-role="page"> <header data-role="header"> <h1>Tap事件处理</h1> </header> <p class="content" data-role="content"> 轻击页面返回前一页 </p> <footer data-role="footer"> </footer> </section> <p id="abut" data-role="dialog"> <p data-role="header"> <h1>关于本程序</h1> </p> <p data-role="content"> 演示轻击触控事件响应 </p> </p> </body> </html>
tap:輕擊事件
tap:輕擊事件
:?二、輕掃輕掃是指用手指或手寫筆快速在螢幕上向左或向右快速滑動,會觸發swipeleft事件或swiperight事件。<!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.6.4.js" type="text/javascript" ></script> <script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script> <script type="text/javascript"> $('#page1').live('swiperight', function(){ $.mobile.changePage('#page2'); }); $('#page2').live('swiperight', function(){ $.mobile.changePage('#page1'); }); $('#page1').live('swipeleft', function(){ $('#lnkDialog').click(); }); $('#page2').live('swiperleft', function(){ $.mobile.changePage('#about'); }); </script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"> <h1>swipe事件处理</h1> </header> <p class="content" data-role="content"> 向右滑动页面进入下一页<br/> 向左滑动页面,打开关于对话框 </p> <footer data-role="footer"></footer> </section> <section id="page2" data-role="page"> <header data-role="header"> <h1>swipe事件处理</h1> </header> <p class="content" data-role="content"> 向右滑动页面进入前一页br/> 向左滑动页面,打开关于对话框 </p> <footer data-role="footer"> </footer> </section> <p id="abut" data-role="dialog"> <p data-role="header"> <h1>关于本程序</h1> </p> <p data-role="content"> 演示swipeleft&swiperight触控事件响应 </p> </p> <a id="lnkDialog" href="#about" data-rel="dialog" data-transition="pop" style="display:none;"></a> </body> </html>上面程式碼中用到了一個技巧,在介面切換過程中如果需要改變切換效果,則必須使用超級連結了實現,將該連結的display屬性設為none,在監聽函數中呼叫click( )方法執行介面切換,然後在連結中加入data-transition進行切換效果設定。
含義 | oseout |
vmousedown | |
vmoseup | |
vclick vclick事件通常在vmouseup事件後300ms觸發 | |
vmousecancel | 觸控事件中啟動mousecancel事件時觸發 |
...... | ...... |
...... | ...... |
<!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.6.4.js" type="text/javascript" ></script> <script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script> <script type="text/javascript"> $('#page1').live('vmouseup', function(event, ui){ alert("当前点击位置" + "\n" + "\npageX:" + event.pageX + //当前HTML页面横坐标 "\npageY:" + event.pageY + //当前HTML页面纵坐标 "\nscreenX:" + event.screenX + //当前屏幕横坐标 "\nscreenY:" + event.screenY + //当前屏幕纵坐标 "\nclientX:" + event.clientX + //当前窗口区域横坐标 "\nclientY:" + event.clientY); //当前窗口区域纵坐标 }); </script> </head> <body> <section id="page1" data-role="page"> <header data-role = "header"> <h1>vMouse事件处理</h1> </header> <p class="content" data-role="content"> 轻击页面,显示点击位置 </p> <p style="height: 500px;"></p> 内容底部 <footer data-role="footer"></footer> </section> </body> </html> | 以上就是小強的HTML5行動開發之路(52)-jquerymobile中的觸控互動的內容,更多相關內容請關注PHP中文網(www.php.cn)! |