JQuery移動(dòng)頁(yè)面開(kāi)發(fā)之屏幕方向改變與滾屏的實(shí)現(xiàn)

更新時(shí)間：2015年12月03日 15:44:33 投稿：goldensun

這篇文章主要介紹了JQuery移動(dòng)頁(yè)面開(kāi)發(fā)之隨屏幕方向改變與滾屏的實(shí)現(xiàn),通過(guò)相關(guān)兩個(gè)事件的添加來(lái)達(dá)到響應(yīng)移動(dòng)設(shè)備上操作的效果,需要的朋友可以參考下

方向改變事件(orientationchange)
當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)。綁定此事件時(shí)，你的回調(diào)函數(shù)可以加入第二個(gè)參數(shù)，作用為描述設(shè)備橫或縱向的屬性，"portrait"或;landscape"。這些值也會(huì)作為class值加入到html的元素中，使你可以通過(guò)css中的選擇器改變他們的樣式。注意現(xiàn)在當(dāng)瀏覽器不支持orientationChange事件的時(shí)候我們綁定了resize 事件。

手持設(shè)備方向改變時(shí)執(zhí)行

 $(window).bind( 'orientationchange', function(e){
 var height=document.body.clientHeight - 195;
 $("#content").css("min-height",height);
 $("#thumb").css("margin",height/4.2 + "px auto");
 });

以上示例是本人用于在手持設(shè)備改變方向時(shí)填充整個(gè)頁(yè)面，避免出現(xiàn)空白，可以根據(jù)自己的需求擴(kuò)展。

$(function(){
 $('a').click(function(){
 $(window).trigger('orientationchange' );
 });
});

在智能手機(jī)和平板設(shè)備上，只有一個(gè)名稱(chēng)為orientationchange 的方向事件。該事件在設(shè)備被垂直或水平旋轉(zhuǎn)時(shí)觸發(fā)。要確定設(shè)備按哪個(gè)方向旋轉(zhuǎn)，您可以訪問(wèn)方向?qū)傩?，它提供一個(gè)只讀值portrait 或 landscape。

綁定到 orientationchange 事件要求您定位 body 元素，然后使用 bind 方法來(lái)綁定事件。將orientationchange 事件綁定到body，但是要等待元素在文檔就緒后，再綁定事件，這也很重要。否則，您會(huì)獲得不一致的結(jié)果，因?yàn)閎ody 元素可能在綁定時(shí)不可用。您也可以進(jìn)一步增強(qiáng)該代碼，當(dāng)文檔就緒時(shí)觸發(fā)orientationchange 事件。

當(dāng)文檔就緒時(shí)觸發(fā)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);
 });
});

當(dāng)文檔就緒時(shí)觸發(fā)事件，這使您可以確定 Web 頁(yè)面初始加載時(shí)的方向。當(dāng)您需要在用設(shè)備的當(dāng)前方向顯示內(nèi)容時(shí)，這特別有用。您也可以通過(guò)CSS 訪問(wèn)方向值，因?yàn)樗鼈儽惶砑拥?Web 頁(yè)面中的 HTML 元素。這些強(qiáng)大的特性使您可以設(shè)備的方向修改內(nèi)容布局。

滾屏事件(scrollstart、scrollstop)
scrollstart：當(dāng)屏幕滾動(dòng)開(kāi)始的時(shí)候觸發(fā)。蘋(píng)果的設(shè)備會(huì)在滾屏?xí)r凍結(jié)DOM的操作，當(dāng)滾屏結(jié)束時(shí)按隊(duì)列執(zhí)行這些dom操作，我們現(xiàn)在正在研究方法讓蘋(píng)果的設(shè)備在滾屏開(kāi)始前執(zhí)行dom操作。

$(document).ready(function(){

 $('body').bind('scrollstart', function(event) {
 // Add scroll start code here
 });

});

scrollstop：滾屏結(jié)束時(shí)觸發(fā)。

$(document).ready(function(){

 $('body').bind('scrollstop', function(event) {
 // Add scroll stop code here
 });

});

<!DOCTYPE html>
<html>
 <head>
  <title>Ajax測(cè)試</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();
  }
  //獲取觸點(diǎn)目標(biāo)id屬性值
  var targetId = target.attr("id");
  alert("targetId: " + targetId);
  }
  catch (e) {
  alert('myscrollfunc：' + e.message);
  }
 }
 function myinit() {
  //綁定上下滑動(dòng)事件
  $("#myul").bind('scrollstart', function () { scrollstartFunc(event); });
 }
 window.onload = myinit;
 </script>
 <!-- listview測(cè)試 -->
 <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>

您可能感興趣的文章: