動的な応答性の高い Web サイトを作成する場合、開発者はピンチ、タップ、スワイプなどのモバイル ジェスチャを処理する必要があります。これらのジェスチャは、次のようなモバイル開発言語によって処理されます。 はためく ' または ' リアクトネイティブ 」とJavaScript。他の Web プログラミングでは、この種のイベントは処理されません。幸いなことに！ jQuery の助けを借りて、「 タッチイベント 」プラグインを使用すると、これらのイベントやジェスチャーも処理できます。
このブログでは、モバイル用の jQuery タッチ イベント プラグインを使用するプロセスを説明します。
モバイル用の jQuery Touch Events プラグインの使用方法?
jQuery はタッチ イベントとモバイル イベントの違いを抽象化し、「」のような一貫した API またはプラグインを使用します。 タッチイベント ”。このプラグインによって提供されるイベントがいくつかあり、以下に表形式で説明します。
| アヒルの鞭打ち | 要素上でのスワイプの終了時に特定の関数を呼び出します。 |
| スクロールスタート | 選択した要素のスクロールの開始時に特定の関数を呼び出します。 |
| スクロールエンド | 要素のスクロールの最後に特定の関数を呼び出します。 |
| 方向変更 | 横向きレイアウトから縦向きに移動するなど、デバイスまたはモバイルの向きが変更されたときに関数を起動します。 |
構文
jQuery タッチ イベントの構文は次のとおりです。
$ ( 'これ' ） .touchEvent ( 機能 ( ） {
// あなたのコード
} ）
上記の構文では次のようになります。
-
- ” これ 」はアクションの呼び出し元または選択された要素としてのアクションであるセレクターです。
- ” タッチイベント 」は使用されている特定のイベント名であり、上記の表からイベントを取得できます。
- ” 関数() 」は、提供されたタッチイベントによって実行されるカスタム関数です。
ここで、タッチ イベントをより深く理解するために、いくつかの例を見てみましょう。
例 1: タップとダブルタップの使用
この例では、「 タッチイベント ' イベント ' タップ ' そして ' ダブルタップ ” は、選択した要素に対して何らかの機能を呼び出したり実行したりするために使用されます。
< html >< 頭 >
< スクリプトソース = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > 脚本 >
< 脚本 送信元 = 「https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js」 >
脚本 >
頭 >
< 体 >
< h3 スタイル = 「色: カデットブルー;」 > Linux h3 >
< ボタン ID = 「て」 > タップ ボタン >
< ボタン ID = 「dt」 > ダブルタップ ボタン >
< p ID = '目標' > DoubleTap および Tap Touch イベントの例。 p >
< 脚本 >
$ ( 「#t」 ） .タップ ( 関数 ( ） {
$ ( '＃目標' ） 。隠れる ( ） ;
} ）
$ ( '#dt' ） 。ダブルタップ ( 関数 ( ） {
$ ( '＃目標' ） 。見せる ( ） ;
} ）
脚本 >
体 >
html >
上記のコードの説明:
-
- まずはCDN「 コンテンツ配信ネットワーク jQuery と touch イベントの「」は「」内に挿入されます。 <頭> ” タグを付けてアクセスできるようにします。 CDN は公式で見つけることができます。 jQuery の、cdnjs へのアクセス経由 それぞれ。
- 次に、ID が「」の 2 つのボタン要素が作成されます。 t ' そして ' dt ”。また、「」を作成します。 p ” という ID を持つ要素 目標 ”。タッチイベントによるアクションはこの要素に対して実行されます。
- 「」の中 <スクリプト> ” タグで、ID が「」の要素を選択します t 」を添付してください。 タップ 」タッチイベントを使用してください。このイベントは、ID が「」の別の HTML 要素を選択します。 目標 ” を適用し、” 隠れる（） 」メソッドを使用します。
- さらに、「」を選択します。 dt ” 要素を追加し、” を適用します。 ダブルタップ ” タッチイベントをタッチし、同様に” 見せる（） 「」のメソッド 目標 ” id要素。
コードのコンパイル後に生成される出力を以下に示します。
上記の出力は、「タップ」および「ダブルタップ」タッチ イベントに対してアクションが実行されたことを示しています。
例 2: スワイプおよびスワイプエンド タッチ イベントの使用
この例では、「 スワイプ ' そして ' アヒルの鞭打ち 」タッチイベントがデモンストレーションされます。
< 脚本 >$ ( 「#t」 ） .スワイプ ( 関数 ( ） {
$ ( '＃目標' ） 。隠れる ( ） ;
} ）
$ ( 「#t」 ） .スワイプアヒル ( 関数 ( ） {
$ ( '＃目標' ） 。隠れる ( ） ;
} ）
脚本 >
上記の jQuery コードの説明は次のとおりです。
-
- まず、選択した要素がその ID によって選択されます。 t ' そしてその ' スワイプ 』イベントが付属しております。このイベントは関数を起動し、起動された関数は ID を介してターゲットの要素を選択します。 目標 ” を適用し、” 隠れる（） 」メソッドを使用して、コンテンツを非表示にします。
- 次に、「 アヒルの鞭打ち ” イベントが同じ要素に適用され、その関数が「 見せる（） ” メソッドを、ID が「」の選択された要素に対して実行します。 目標 」を選択すると、スワイプ イベントが終了したときにコンテンツが表示されるようになります。
上記のコードの出力は次のように生成されます。
出力は、ターゲット要素のコンテンツがスワイプ時に非表示になり、スワイプ イベントが終了すると表示されることを示しています。
例 3: スクロールスタートおよびスクロールエンドタッチイベントの使用
この場合、「 スクロールスタート ' そして ' スクロールエンド 」タッチイベントが実装されます:
< 脚本 >$ ( 「#t」 ) .scrollstart ( 関数 ( ) {
$ ( '＃目標' ) 。隠れる ( ) ;
} )
$ ( 「#t」 ) .scrollend ( 関数 ( ) {
$ ( '＃目標' ) 。見せる ( ) ;
} )
脚本 >
上記のコードの説明は次のようになります。
-
- この例の唯一の変更点は、「」を使用していることです。 スクロールスタート ' そして ' スクロールエンド 「出演するイベント」 隠れる（） ' そして ' 見せる（） 要素に対する ” メソッドとコードの残りの部分は、上記の例と同じままになります。
- 対象のテキストはスクロールの開始時またはスクロール中に非表示になり、スクロールが終了すると表示されます。
上記のコードのコンパイル後に生成される出力を以下に示します。
出力には、スクロール時には要素のコンテンツが非表示であり、スクロールが終了すると表示されることが示されています。
このブログでは、モバイル デバイス用の jQuery タッチ イベント プラグインについて説明しました。
結論
jQuery 」 タッチイベント モバイル用プラグインを使用すると、スワイプ、タップ、向きの変更などのタッチ モバイルで発生するイベントを特に処理するイベントを jQuery で追加できます。このプラグインによって提供されるイベントは、従来の「 クリック時 』などのイベント。このプラグインを使用すると、開発者はモバイルとのユーザー操作に応じて特定の機能を簡単に適用できます。このブログでは、モバイル向けの jQuery タッチ イベント プラグインについて説明しました。