JQueryモバイルページでの画面の向き変更とスクロールの実装development

JQueryモバイルページでの画面の向き変更とスクロールの実装development_jquery

WBOY

リリース： 2016-05-16 15:27:45

オリジナル

1118 人が閲覧しました

方向変更イベント(orientationchange)
このイベントは、デバイスの向きが変わると (デバイスが水平または垂直に保持されると) トリガーされます。このイベントをバインドするとき、コールバック関数は、デバイスの水平または垂直属性、「ポートレート」または「ランドスケープ」を記述するために使用される 2 番目のパラメータを追加できます。これらの値は、クラスとして 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 という名前のオリエンテーションイベントが 1 つだけあります。このイベントは、デバイスが垂直または水平に回転するとトリガーされます。デバイスがどの方向に回転するかを決定するには、読み取り専用の値である縦方向または横方向を提供する方向プロパティにアクセスできます。

orientationchange イベントにバインドするには、body 要素を配置し、bind メソッドを使用してイベントをバインドする必要があります。 orientationchange イベントを本文にバインドすることも重要ですが、ドキュメント内で要素の準備ができるまで待ってからイベントをバインドします。そうしないと、バインド時に 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 ページの方向を決定できます。これは、デバイスの現在の向きを使用してコンテンツを表示する必要がある場合に特に便利です。 Web ページの HTML 要素に追加される方向の値に CSS を介してアクセスすることもできます。これらの強力な機能を使用すると、デバイスの向きに合わせてコンテンツのレイアウトを変更できます。

スクロールイベント (scrollstart、scrollstop)
scrollstart: 画面のスクロールが開始されるときにトリガーされます。 Apple のデバイスはスクロール中に DOM 操作をフリーズし、スクロールが終了したときにこれらの DOM 操作をキューで実行します。現在、Apple のデバイスがスクロールを開始する前に 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>

ログイン後にコピー