コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 10の便利なJQuery iPadコードスニペットとプラグイン

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

Joseph Gordon-Levitt
リリース： 2025-02-24 08:55:12
オリジナル
504 人が閲覧しました

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"/>
</span><link rel=<span>"stylesheet" media="all and (orientation:portrait)" href="landscape.css"/></span>
ログイン後にコピー
ログイン後にコピー
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 10の便利なJQuery iPadコードスニペットとプラグイン

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"/>
</span><link rel=<span>"stylesheet" media="all and (orientation:portrait)" href="landscape.css"/></span>
ログイン後にコピー
ログイン後にコピー
ソース

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」イベントを使用できるようにします。プラグインがデスクトップブラウザーで使用される場合でも、機能は利用できます。これは、プラグインが使用される環境について心配する必要がないことを意味します。 10の便利なJQuery iPadコードスニペットとプラグイン 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 サイトの他の関連記事を参照してください。
                

            

            

                
                
            

            

                                    
                        前の記事：node.jsでのWebスクレイピング
                    
                                    
                        次の記事：10 jQueryスティッキースクロールプラグイン
                    
                            

            

       
                
このウェブサイトの声明

                
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

            

            

            

                
著者別の最新記事

                
    
                                    

            

            

                
最新の問題

                

                                        

                        

                            function_exists() はカスタム関数を決定できません
                            Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
                            

                                

                                     から 2024-04-29 11:01:01
                                

                                

                                    
  0 

                                    
3

                                    
2927

                                

                            

                        

                    

                    

                                        

                        

                            Google Chromeのモバイル版を表示する方法
                            こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
                            

                                

                                     から 2024-04-23 00:22:19
                                

                                

                                    
  0 

                                    
11

                                    
3119

                                

                            

                        

                    

                    

                                        

                        

                            子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。
                            最初の 2 つの文は実行可能ですが、最後の文は実装できません。
                            

                                

                                     から 2024-04-19 15:37:47
                                

                                

                                    
  0 

                                    
1

                                    
2548

                                

                            

                        

                    

                    

                                        

                        

                            親ウィンドウには出力がありません
                            document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
                            

                                

                                     から 2024-04-18 23:52:34
                                

                                

                                    
  0 

                                    
1

                                    
2494

                                

                            

                        

                    

                    

                                        

                        

                            CSS マインド マッピングに関するコースウェアはどこにありますか?
                            コースウェア
                            

                                

                                     から 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
2524

                                

                            

                        

                    

                    

                                    

            


            

                

                    
関連トピック

                    詳細>
                    
                

                

                    
                

            

        

    


    

    
    
        

            
人気のおすすめ

            

                
            

        

        
        

            

                
人気のチュートリアル

                詳細>
                
            

            

                

                    
関連するチュートリアル 

                    
人気のおすすめ

                    
最新のコース

                

                
                
                
            

            
        


        

            

                
最新のダウンロード

                詳細>
                
            

                        
            

                

                    
ウェブエフェクト 

                    
公式サイト

                    
サイト素材

                    
フロントエンドテンプレート