方向改變事件(orientationchange)
當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時，你的回調函數可以加入第二個參數，作用為描述設備橫或縱向的屬性，"portrait"或;landscape"。這些值也會作為class值加入到html的元素中，使你可以通過css中的選擇器改變他們的樣式。注意現在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。
手持設備方向改變時執行
$(window).bind( 'orientationchange', function(e){ var height=document.body.clientHeight - 195; $("#content").css("min-height",height); $("#thumb").css("margin",height/4.2 + "px auto"); });以上示例是本人用于在手持設備改變方向時填充整個頁面，避免出現空白，可以根據自己的需求擴展。
$(function(){ $('a').click(function(){ $(window).trigger('orientationchange' ); });});在智能手機和平板設備上，只有一個名稱為orientationchange 的方向事件。該事件在設備被垂直或水平旋轉時觸發。要確定設備按哪個方向旋轉，您可以訪問方向屬性，它提供一個只讀值portrait 或 landscape。
綁定到 orientationchange 事件要求您定位 body 元素，然后使用 bind 方法來綁定事件。將orientationchange 事件綁定到body，但是要等待元素在文檔就緒后，再綁定事件，這也很重要。否則，您會獲得不一致的結果，因為body 元素可能在綁定時不可用。您也可以進一步增強該代碼，當文檔就緒時觸發orientationchange 事件。
當文檔就緒時觸發orientationchange 事件
<!DOCTYPE HTML><html><head><title>Understanding the jQuery Mobile API</title><link rel="stylesheet" href="jquery.mobile.css" /><script src="jquery.js"></script><script type="text/java script">$(document).ready(function(){ $(".tap-hold-test").bind("taphold", function(event) { $(this).html("Tapped and held"); });});</script><script src="jquery.mobile.js"></script></head><body><div data-role="page" id="my-page"><div data-role="header"><h1>Header</h1></div><div data-role="content"><ul data-role="listview" id="my-list"><li class="tap-hold-test">Tap and hold test</li></ul></div></div></body></html>$(document).ready(function(){ $('body').bind('orientationchange', function(event) { alert('orientationchange: '+ event.orientation); });});當文檔就緒時觸發事件，這使您可以確定 Web 頁面初始加載時的方向。當您需要 在用設備的當前方向顯示內容時，這特別有用。您也可以通過CSS 訪問方向值，因為它們被添加到 Web 頁面中的 HTML 元素。這些強大的特性使您可以 設備的方向修改內容布局。
滾屏事件(scrollstart、scrollstop)
scrollstart：當屏幕滾動開始的時候觸發。蘋果的設備會在滾屏時凍結DOM的操作，當滾屏結束時按隊列執行這些dom操作，我們現在正在研究方法讓蘋果的設備在滾屏開始前執行dom操作。
$(document).ready(function(){ $('body').bind('scrollstart', function(event) { // Add scroll start code here });});scrollstop：滾屏結束時觸發。
$(document).ready(function(){ $('body').bind('scrollstop', function(event) { // Add scroll stop code here });});<!DOCTYPE html><html> <head> <title>Ajax測試</title> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/> <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/> <script src="jquery-mobile/jquery-1.8.2.min.js"></script> <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" data-theme="b"> <div data-role="header"></div> <div data-role="content"> <script> //scrollstart事件 function scrollstartFunc(evt) { try { var target = $(evt.target); while (target.attr("id") == undefined) { target = target.parent(); } //獲取觸點目標id屬性值 var targetId = target.attr("id"); alert("targetId: " + targetId); } catch (e) { alert('myscrollfunc：' + e.message); } } function myinit() { //綁定上下滑動事件 $("#myul").bind('scrollstart', function () { scrollstartFunc(event); }); } window.onload = myinit; </script> <!-- listview測試 --> <ul id="myul" data-role="listview" data-inset="true"> <li data-role="list-divider">信息列表</li> <li id="li1" data-role="fieldcontain">信息1</li> <li id="li2" data-role="fieldcontain">信息2</li> <li id="li3" data-role="fieldcontain">信息3</li> <li id="li4" data-role="fieldcontain">信息4</li> <li id="li5" data-role="fieldcontain">信息5</li> <li id="li6" data-role="fieldcontain">信息6</li> <li id="li7" data-role="fieldcontain">信息7</li> <li id="li8" data-role="fieldcontain">信息8</li> <li id="li9" data-role="fieldcontain">信息9</li> <li id="li10" data-role="fieldcontain">信息10</li> </ul> </div> </body></html>新聞熱點
疑難解答
