ホームページ > 記事 > ウェブフロントエンド > JQueryモバイルページでの画面の向き変更とスクロールの実装development_jquery
JQueryモバイルページでの画面の向き変更とスクロールの実装development_jquery
- WBOYオリジナル
- 2016-05-16 15:27:451078ブラウズ
方向変更イベント(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 イベントにバインドするには、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);
});
});
スクロールイベント (scrollstart、scrollstop)
scrollstart: 画面のスクロールが開始されるときにトリガーされます。 Apple のデバイスはスクロール中に DOM 操作をフリーズし、スクロールが終了したときにこれらの DOM 操作をキューで実行します。現在、Apple のデバイスがスクロールを開始する前に DOM 操作を実行できるようにする方法を検討しています。
$(document).ready(function(){
$('body').bind('scrollstart', function(event) {
// Add scroll start code here
});
});
$(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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。