jQuery-mobileのイベント監視と使い方の詳細説明

この記事の例では、jQuery モバイル イベントの監視と使用法について説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

Touch イベント - ユーザーが画面に触れたときにトリガーされます (タップとスライド)
Scroll イベント - 上下にスクロールしたときにトリガーされます
Orientation イベント - デバイスが回転したときにトリガーされます垂直方向または水平方向
ページ イベント - ページの表示、非表示、作成、ロードおよび/またはアンロード時にトリガーされます

1. 初期化イベント

1. 準備完了イベント ページの読み込み完了

$(document).ready(function(){
  //your code here...
});

2. ページの読み込み完了イベント 2. pageinit

$(document).on('pageinit','#pageone',function(){
  //your code here...
});

3. イベント形式

$(元素).on('事件',funciton(){
  //code here...
})

2. タッチイベント

tap ユーザーが要素をタップするとイベントがトリガーされます
taphold ユーザーが要素をタップして 1 秒間押し続けるとイベントがトリガーされます
swipe ユーザーが要素をタップするとイベントがトリガーされます。 swipeleft イベントは、ユーザーが要素上で左から 30 ピクセルを超えてスライドするとトリガーされます。 swiperight イベントは、ユーザーが要素上で右から 30 ピクセルを超えてスライドするとトリガーされます。

三、スクロールイベント

ユーザーがページのスクロールを開始するとscrollstartイベントがトリガーされます

(スクロールイベントが発生するとiOSデバイスはDOM操作をフリーズします)

scrollstopイベントはユーザーがページのスクロールを停止するとトリガーされます

4. (水平および垂直の画面回転)

ユーザーがモバイルデバイスを垂直または水平に回転すると、orientationchange イベントがトリガーされます。

window.orientation を通じて水平および垂直の画面を検出できます

$(window).on("orientationchange",function(){
 if(window.orientation == 0) // Portrait
 {
  $("p").css({"background-color":"yellow","font-size":"300%"});
 }
 else // Landscape
 {
  $("p").css({"background-color":"pink","font-size":"200%"});
 }
});

5. ページイベント

ページの初期化 - ページの作成前、ページの作成時、およびページの初期化後

ページのロード/アンロード - 外部ページのロード、アンロード、または失敗時

ページ遷移 - ページ遷移の前後
ページ変更 - ページが変更されたとき、または失敗したとき

【初期化イベント】

pagebeforecreate このイベントは、ページが初期化されようとしているとき、および jQuery Mobile がページの拡張を開始する前にトリガーされます。

pagecreate このイベントは、ページが作成されたとき、拡張が完了する前にトリガーされます。

pageinit このイベントは、ページが初期化されたとき、および jQuery Mobile がページの拡張を完了した後に発生します。

$(document).on("pagebeforecreate",function(event){})

【Loadingイベント】

pagebeforeloadは、ページ読み込みリクエストが行われる前にトリガーされます。

pageload は、ページが正常にロードされて DOM に挿入された後に起動されます。

pageloadfailed このイベントは、ページの読み込みリクエストが失敗した場合にトリガーされます。デフォルトでは、「ページの読み込みエラー」メッセージが表示されます。

$(document).on("pageload",function(event,data){})

【トランジションイベント】

pagebeforeshow は、トランジションアニメーションが開始する前に、「Go」ページでトリガーされます。

pageshow は、遷移アニメーションが完了した後、「to」ページでトリガーされます。

pagebeforehide は、遷移アニメーションが開始する前に、「次の」ページでトリガーされます。
pagehide は、遷移アニメーションが完了した後、「次の」ページでトリガーされます。

$(document).on("pagebeforeshow","#pagetwo",function(){ })

jQuery モバイル イベントの監視と使用方法の詳細については、PHP 中国語 Web サイトに注目してください。