Orientierungsänderungsereignis (Orientierungsänderung)
Dieses Ereignis wird ausgelöst, wenn sich die Ausrichtung des Geräts ändert (das Gerät wird horizontal oder vertikal gehalten). Wenn Sie dieses Ereignis binden, kann Ihre Rückruffunktion einen zweiten Parameter hinzufügen, der zur Beschreibung der horizontalen oder vertikalen Attribute des Geräts verwendet wird: „Hochformat“ oder „Querformat“. Diese Werte werden auch als Klasse zu HTML-Elementen hinzugefügt Werte, damit Sie ihre Stile über Selektoren in CSS ändern können. Beachten Sie, dass wir jetzt das Resize-Ereignis binden, wenn der Browser das OrientationChange-Ereignis nicht unterstützt.
$(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' );
});
});
Für die Bindung an das Orientierungsänderungsereignis müssen Sie das Körperelement positionieren und dann die Bindungsmethode verwenden, um das Ereignis zu binden. Es ist auch wichtig, das Orientierungsänderungsereignis an den Textkörper zu binden. Warten Sie jedoch, bis das Element im Dokument bereit ist, bevor Sie das Ereignis binden. Andernfalls erhalten Sie inkonsistente Ergebnisse, da das Körperelement zum Bindungszeitpunkt möglicherweise nicht verfügbar ist. Sie können diesen Code auch weiter erweitern, um das Orientierungsänderungsereignis auszulösen, wenn das Dokument fertig ist.
Das Ausrichtungsänderungsereignis wird ausgelöst, wenn das Dokument fertig ist
<!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);
});
});
Scroll-Ereignisse (Scrollstart, Scrollstop)
scrollstart: Wird ausgelöst, wenn das Scrollen des Bildschirms beginnt. Apple-Geräte frieren DOM-Vorgänge während des Scrollens ein und führen diese DOM-Vorgänge in einer Warteschlange aus, wenn der Scrollvorgang endet. Wir untersuchen derzeit Methoden, die es Apple-Geräten ermöglichen, DOM-Vorgänge auszuführen, bevor der Scrollvorgang beginnt.
$(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>
