10の便利なJQuery iPadコードスニペットとプラグイン

iPadデバイス用に、使いやすいトリック、コードスニペット、プラグインのいくつかをまとめました 。あなたが有用であると見つけたスニペットやプラグイン、そしてあなたが知っている他の人のことが役に立つことができるコメントで私たちに知らせてください。

キーテイクアウト

• この記事では、iPad用のいくつかの便利なjQueryコードスニペットとプラグインを共有しています。たとえば、サファリのiPadオリエンテーションの検出、ドラッグ/タッチサポートの追加、ダブルタップイベントの有効化など。
各スニペットまたはプラグインのコード例を提供します。これには、それらを実装する方法の指示を含め、開発者がiPadアプリケーションに特定の機能を簡単に追加できるようにします。
• この記事には、jQuery iPadコードスニペットとプラグインに関する質問に対処する簡単なFAQセクション、WordPressでの使用、およびオンラインで見つける場所が含まれています。
著者は、読者がコメントで独自の便利なスニペットとプラグインを共有することを奨励し、開発者の間でコミュニティの感覚と共有学習を促進することを奨励しています。
1。 JavaScriptを使用してSafariのiPadオリエンテーションを検出します メディア定義を使用して、CSSスタイルシートを使用することもできます。 ソース

2。 jQuery iPad

のドラッグ/タッチサポートを追加します jQueryコードスニペットで、iPadとタッチサポートを備えたデバイスにドラッグ/タッチサポートを適用します。

ソース

What<span>'s my Orientation?
</span><span>
</span><span> window.onorientationchange = detectIPadOrientation;
</span><span> function detectIPadOrientation () {
</span><span>
</span><span>	if ( orientation == 0 ) {
</span><span>	 alert ('Portrait Mode, Home Button bottom');
</span><span>	}
</span><span>	else if ( orientation == 90 ) {
</span><span>	 alert ('Landscape Mode, Home Button right');
</span><span>	}
</span><span>	else if ( orientation == -90 ) {
</span><span>	 alert ('Landscape Mode, Home Button left');
</span><span>	}
</span><span>	else if ( orientation == 180 ) {
</span><span>	 alert ('Portrait Mode, Home Button top');
</span>	<span>}
</span> <span>}
</span>

3。 iPad、iPhone、AndroidのTouchswipe jQueryプラグイン

<link rel="<span">"stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>
<link rel="<span">"stylesheet" media="all and (orientation:portrait)" href="landscape.css"/>

iPad、iPhoneなどのタッチ入力デバイスでjQueryで使用されるjQueryプラグイン。

sourcedemo

<span>//iPAD Support
</span>$<span>.fn.addTouch = function(){
</span>  this<span>.each(function(i,el){
</span>    $<span>(el).bind('touchstart touchmove touchend touchcancel',function(){
</span>      <span>//we pass the original event object because the jQuery event
</span>      <span>//object is normalized to w3c specs and does not provide the TouchList
</span>      <span>handleTouch(event);
</span>    <span>});
</span>  <span>});
</span> 
  <span>var handleTouch = function(event)
</span>  <span>{
</span>    <span>var touches = event.changedTouches,
</span>            first <span>= touches[0],
</span>            type <span>= '';
</span> 
    <span>switch(event.type)
</span>    <span>{
</span>      <span>case 'touchstart':
</span>        type <span>= 'mousedown';
</span>        <span>break;
</span> 
      <span>case 'touchmove':
</span>        type <span>= 'mousemove';
</span>        event<span>.preventDefault();
</span>        <span>break;
</span> 
      <span>case 'touchend':
</span>        type <span>= 'mouseup';
</span>        <span>break;
</span> 
      <span>default:
</span>        <span>return;
</span>    <span>}
</span> 
    <span>var simulatedEvent = document.createEvent('MouseEvent');
</span>    simulatedEvent<span>.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);
</span>    first<span>.target.dispatchEvent(simulatedEvent);
</span>  <span>};
</span><span>};</span>

4。 jQuery iPad 1本の指スクロール

タッチデバイス（iPad、iPhone、Androidなど）には、オーバーフロー：自動要素をスクロールするための非常に奇妙な動作があります。 iPadには2本の指スクロールが必要であり、それを明確にするために巻物バーを追加しません。このプラグインを使用すると、1本の指でオーバーフロー：自動要素をスクロールできます。

sourcedemo

5。 jQueryモバイルデバイスを検出します - iPhone iPod iPad

jQueryコードスニペットユーザーがモバイルデバイス、特にiPhone iPodまたはiPadを使用してWebサイトを表示しているかどうかを検出します。

What<span>'s my Orientation?
</span><span>
</span><span> window.onorientationchange = detectIPadOrientation;
</span><span> function detectIPadOrientation () {
</span><span>
</span><span>	if ( orientation == 0 ) {
</span><span>	 alert ('Portrait Mode, Home Button bottom');
</span><span>	}
</span><span>	else if ( orientation == 90 ) {
</span><span>	 alert ('Landscape Mode, Home Button right');
</span><span>	}
</span><span>	else if ( orientation == -90 ) {
</span><span>	 alert ('Landscape Mode, Home Button left');
</span><span>	}
</span><span>	else if ( orientation == 180 ) {
</span><span>	 alert ('Portrait Mode, Home Button top');
</span>	<span>}
</span> <span>}
</span>

ソース

6。 iPadおよびデスクトップブラウザ用のMultiselect PickList jQueryプラグイン

デスクトップブラウザーとiPadブラウザーの両方で似ているマルチロー/マルチセレクトピックリスト。 このように、目的のために、通常のVisualforceタグ、つまりを簡単に使用できたはずです。

<link rel="<span">"stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>
<link rel="<span">"stylesheet" media="all and (orientation:portrait)" href="landscape.css"/>

ソース

7。 jQueryはiPadのイベントをクリックします

それを修正するためのソリューション。これは、Apple.comの開発者ドキュメントで与えられたアドバイスでした。これは基本的に、ユーザーエイジェント文字列（ケースの非感受性）でiPadを検索します。ユーザーがiPadにいる場合は、TouchStartを使用し、そうでない場合は標準クリックに戻ります。 必要なコードは次のとおりです。

<span>//iPAD Support
</span>$<span>.fn.addTouch = function(){
</span>  this<span>.each(function(i,el){
</span>    $<span>(el).bind('touchstart touchmove touchend touchcancel',function(){
</span>      <span>//we pass the original event object because the jQuery event
</span>      <span>//object is normalized to w3c specs and does not provide the TouchList
</span>      <span>handleTouch(event);
</span>    <span>});
</span>  <span>});
</span> 
  <span>var handleTouch = function(event)
</span>  <span>{
</span>    <span>var touches = event.changedTouches,
</span>            first <span>= touches[0],
</span>            type <span>= '';
</span> 
    <span>switch(event.type)
</span>    <span>{
</span>      <span>case 'touchstart':
</span>        type <span>= 'mousedown';
</span>        <span>break;
</span> 
      <span>case 'touchmove':
</span>        type <span>= 'mousemove';
</span>        event<span>.preventDefault();
</span>        <span>break;
</span> 
      <span>case 'touchend':
</span>        type <span>= 'mouseup';
</span>        <span>break;
</span> 
      <span>default:
</span>        <span>return;
</span>    <span>}
</span> 
    <span>var simulatedEvent = document.createEvent('MouseEvent');
</span>    simulatedEvent<span>.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);
</span>    first<span>.target.dispatchEvent(simulatedEvent);
</span>  <span>};
</span><span>};</span>

ソース

8。 jquery

を使用して、ウェブサイトで簡単なiPadジェスチャー jQueryはこれを非常に簡単に統合して使用しているので、私はそれをだまさずにはいられませんでした。 まず、サイトに最新のjQueryライブラリが含まれていることを確認してください。このようなサイトから直接含める：

<span>jQuery(document).ready(function($){
</span>	<span>var deviceAgent = navigator.userAgent.toLowerCase();
</span>	<span>var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
</span>	<span>if (agentID) {
</span>
        <span>// mobile code here
</span> 
	<span>}
</span><span>});</span>

2番目のステップ、著者のWebサイトからTouchWipeライブラリをダウンロードするか、TouchWipeをにバインドできます。 タグの前にtouchwipeライブラリを含めてください。元：

次に、TouchWipeをBodyタグに初期化し、実行する選択したアクションをジェスチャーに与えます。この例では、アラートを使用しました。

<span>var ua = navigator.userAgent, 
</span>    event <span>= (ua.match(/iPad/i)) ? "touchstart" : "click";
</span>
$<span>("#theElement").bind(event, function() {
</span>     <span>// jquery code
</span><span>}</span>

TouchWipeは、ボディタグではなく、特定のDIVにも追加できます。そしてそこに行きます。それを任意のHTMLページに追加して、スワイプジェスチャーを追加できます。 ソース

9。 iPhone/iPad doubletapイベントハンドラー

iPhoneおよびiPadデバイスで「DoubleTap」イベントを使用できるようにします。プラグインがデスクトップブラウザーで使用される場合でも、機能は利用できます。これは、プラグインが使用される環境について心配する必要がないことを意味します。 sourcedemo

10。 jquery.ui.ipadプラグイン

jquery UIインターフェイス要素にタッチイベントをマップするインターフェイスレイヤーを提供します。

ソース

jquery iPadコードスニペットとプラグインに関するよくある質問（FAQ）

jQuery iPadコードのスニペットとプラグインとは何ですか？

jQuery iPadコードスニペットとプラグインは、iPadアプリケーションに特定の機能を追加するために使用できる事前に書かれたコードの断片です。それらは、コーディングのプロセスを簡素化するように設計されており、開発者が複雑な機能を簡単に構築できるようにします。これらのスニペットとプラグインは、アニメーションやトランジションなどの単純な効果から、タッチイベントやジェスチャー認識などのより複雑な機能にまで及びます。iPadのSafariでjQueryを使用してタッチイベントを認識するにはどうすればよいですか？

​​ iPadのSafariでJQueryを使用してタッチイベントを認識するには、TouchStart、TouchMove、およびTouchEndイベントを使用します。これらのイベントは、ユーザーが画面に触れ、画面に触れながら指を動かし、それぞれ画面から指を持ち上げたときにトリガーされます。これらのイベントを使用して、ユーザータッチ入力に応答するインタラクティブな機能を作成できます。プラグイン。このプラグインを使用すると、テーマファイルを編集することなく、WordPressサイトにコードスニペットを追加できます。プラグインをインストールしてアクティブにするだけで、WordPressダッシュボードの「スニペット」メニューに移動してコードスニペットを追加します。イベントは、ユーザーが要素をタップするとトリガーされるユーザーインタラクションイベントです。このイベントは、モバイルデバイス向けに設計されたjQueryライブラリのタッチ最適化バージョンであるjQueryモバイルライブラリの一部です。 TAPイベントを使用して、ユーザータップに応答するインタラクティブな機能を作成できます。 、codesnippets.proおよびstackoverflowを含む。これらのサイトは、さまざまな機能のための幅広いコードスニペットを備えており、ニーズに基づいて特定のスニペットを検索できます。 .on（）メソッドを使用して、それらを要素にバインドすることで使用できます。たとえば、TouchStartイベントを次のような要素にバインドできます：$（element）.on（ 'touchstart'、function（）{// touchStartイベントがトリガーされたときに実行するコード}）;

can can WordPressを備えたjQueryプラグインを使用しますか？

はい、WordPressを使用してjQueryプラグインを使用できます。ただし、プラグインがWordPressに含まれているjQueryのバージョンと互換性があることを確認する必要があります。プラグインをテーマのjavaScriptファイルに追加するか、テーマのfunctions.phpファイルでそれをencueすることができます。 jqueryプラグインウェブサイトには、最初にjqueryライブラリをHTMLファイルに含める必要があります。次に、プラグインのJavaScriptファイルを含めます。最後に、スクリプトタグを使用してプラグインを初期化します。

iPad用の人気のあるjQueryプラグインは何ですか？

iPad用の人気のあるjQueryプラグインには、スワイプイベントを検出できます。 IsCrollは、モバイルWebアプリケーションにスムーズなスクロールを提供します

独自のjQueryプラグインを作成するにはどうすればよいですか？

独自のjQueryプラグインを作成するには、jQueryのプロトタイプオブジェクトに新しい方法を追加するJavaScript関数を作成することが含まれます。この関数には、プラグインが提供する機能を含める必要があります。機能を作成したら、jqueryオブジェクトでjqueryメソッドとして使用できます。

以上が10の便利なJQuery iPadコードスニペットとプラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。