- ベストアンサー
複数のバージョンのjQueryを同時に使用する方法
- バージョンの違うjQueryライブラリを同時に使いたい場合、正常に動作しないことがあります。
- バージョンの違うjqueryライブラリを同時に使うにはどのように設定すればいいのでしょうか。
- 複数のバージョンのjQueryを同時に使用する方法についての参考情報が記載されているサイトがあります。
- minami963852741
- お礼率91% (22/24)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> 「jQuery1131.js」「jQuery132.js」という名前でファイルを作成し、 > <script type="text/javascript" src="jquery/1.1.3.1/jQuery1131.js"></script> > <script type="text/javascript" src="jquery/1.3.2/jQuery132.js"></script> > ↑このような形で読み込み、 これはやり方を間違えてます。jQuery1131.js/jQUery132.jsという名前のファイルを作る必要はありません。 あとは、1.1.3.1 と1.3.2 の使い分けですが、 > jquery_autoが「1.1.3.1」で、 > 残りの二つを「1.3.2」で動作させたいのですが、 jquery_auto_j.js は、読み込むだけで動作して、特に設定は要らないスクリプトのようですね。 だとすると、利用コード部では1.3.2の$だけあればよく、1.1.3.1の$は不要で1.3.2の$と使い分ける必要がないので、jQuery132を作る必要はありません。 回答1は、 ・スクリプト読み込み部は、後半の変数jQuery132を作る部分は不要 ・スクリプト実行部の小細工は不要 ということになります。 あとは、スクリプトの読み込みだけの問題で、それに従って回答1のやり方で書き換えると、 ---ここから--- <script type="text/javascript" src="jquery/1.1.3.1/jquery.min.js"></script> <!-- ▼jquery_auto --> <script type="text/javascript" src="jquery/jquery_auto_j.js"></script> <script type="text/javascript"> var jQuery1131 = $.noConflict(true); </script> <script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script> <!-- ▼animatedcollapse.js --> <script type="text/javascript" src="jquery/animatedcollapse.js"></script> <script type="text/javascript" src="jquery/animatedcollapse-settings.js"></script> <!-- ▼Feature List --> <script type="text/javascript" src="jquery/jquery.featureList-1.0.0.js"></script> <script language="javascript"> $(document).ready(function() { $.featureList( $("#tabs li a"), $("#output li"), { start_item:0 } ); /* // Alternative $('#tabs li a').featureList({ output:'#output li', start_item:1 }); */ }); </script> ---ここまで--- になるかと思います。
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
jQueryよく知らないので、そもそもそのプラグインの実行に古いバージョンのjQueryが本当に必要かどうかは解りませんが、参考サイトにある方法を使って見やすく全角空白文字でインデントして書くと↓ <script type="text/javascript" src="jquery/1.1.3.1/jquery.min.js"></script> <script type="text/javascript"> var j11 = $.noConflict(true); </script> <script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> var j13 = $.noConflict(true); </script> (function ($){ $.function(){ //ここに、jQuery 1.1が必須なプラグインの処理を書く }); })(j11); <script type="text/javascript" src="jquery/jquery.featureList-1.0.0.js"></script> <script type="text/javascript"> (function ($){ $.function(){ //ここに、jQuery 1.3以上が必須なプラグイン(featureList)の処理を書く $.featureList($("#tabs li a"),$("#output li"),{start_item:0}); // Alternative /* $('#tabs li a').featureList({output:'#output li',start_item:1}); */ }); })(j13); </script> で、出来るんじゃない...
お礼
ご回答ありがとうございます。 jquery_autoは古いバージョンが必要だったような気がします。
- mtaka2
- ベストアンサー率73% (867/1179)
jQuery は、基本的には $ を通してアクセスしますが、prototype.js などの $ を使うライブラリと共存するために noConflict というしくみがあります。 これを使えば、複数の jQuery を共存させることも可能になります。 まずはjQuery の読み込み部で、単に読み込むのではなく、 ---ここから--- <script type="text/javascript" src="jquery/1.1.3.1/jquery.min.js"></script> <script type="text/javascript"> var jQuery1131 = $.noConflict(true); </script> <script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> var jQuery132 = $.noConflict(true); </script> ---ここまで--- のようにします。 これで、jQuery 1.1.3.1 の $ は変数 jQuery1131 に、jQuery 1.3.2 の $ は変数 jQuery132 に置き換えられます。 あとは、実際にプラグインなどを使うところで、使いたいバージョンのjQuery変数 を $ で使えるようにします。 どのプラグインがどちらのjQueryに依存しているのかわかりませんので具体的には記述できませんが、 ---ここから--- (function ($) { $(document).ready(function() { // ここに jQuery 1.1.3.1 に依存したコードを書く }); })(jQuery1131); (function ($) { $(document).ready(function() { // ここに jQuery 1.3.2 に依存したコードを書く }); })(jQuery132); ---ここまで--- のようにします。
お礼
ご回答ありがとうございます jquery_autoが「1.1.3.1」で、 残りの二つを「1.3.2」で動作させたいのですが、 「jQuery1131.js」「jQuery132.js」という名前でファイルを作成し、 <script type="text/javascript" src="jquery/1.1.3.1/jQuery1131.js"></script> <script type="text/javascript" src="jquery/1.3.2/jQuery132.js"></script> ↑このような形で読み込み、 --------------------- (function ($) { $(document).ready(function() { // ここに jQuery 1.1.3.1 に依存したコードを書く }); })(jQuery1131); --------------------- 「// ここに jQuery 1.1.3.1 に依存したコードを書く」の部分に、 jquery_auto_j.jsをそのまま貼り付けたのですが動作しません。 jquery.featureList-1.0.0.jsもそのまま貼り付けただけだと動作しなかったのですが、 先頭の【 ;(function($) { 】と、 末尾の【 })(jQuery); 】を外して、 残りを【// ここに jQuery 1.1.3.1 に依存したコードを書く】に貼り付けたら動作するようになりました。 featureList-1.0.0.jsは 【 $.fn.featureList = function(options) { 】や、 【 $.featureList = function(tabs, output, options) { 】のように書かれているのですが、 animatedcollapse.jsの場合は、 以下のように記述されています。 「// ここに jQuery 1.1.3.1 に依存したコードを書く」の部分に、貼り付けするだけでは動作しないのでしょうか。 よろしくお願いします。 --------------------- var animatedcollapse={ divholders: {}, //structure: {div.id, div.attrs, div.$divref} divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid} lastactiveingroup: {}, //structure: {lastactivediv.id} show:function(divids){ //public method if (typeof divids=="object"){ for (var i=0; i<divids.length; i++) this.showhide(divids[i], "show") } else this.showhide(divids, "show") }, hide:function(divids){ //public method if (typeof divids=="object"){ for (var i=0; i<divids.length; i++) this.showhide(divids[i], "hide") } else this.showhide(divids, "hide") }, toggle:function(divid){ //public method this.showhide(divid, "toggle") }, ---------------------（一部抜粋）
お礼
ご回答ありがとうございます。 「---ここから---」から「---ここまで---」の部分を記述しましたが、 何故かIE以外のブラウザで全く機能しませんでした。（IEもjquery_auto以外は駄目でした） また、jquery_autoは1.1.3でなくても動作するようでした。 以下のようにして、 //Feature List の部分にFeature Listを記述したら3つとも動作するようになりました。 <script type="text/javascript" src="jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var jQuery132 = $.noConflict(true); </script> <script type="text/javascript"> (function ($) { //Feature List })(jQuery132); </script> jQuery の複数バージョンの同時使用例 http://stacktrace.jp/jquery/with_other_lib.html#other_version こちらのサイトも参照してみましたがよくわかりません。 以下の記述の「=> 1.2.6」でバージョンを指定しているということでしょうか。 よろしくお願いいたします <head> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> // $ 関数および jQuery関数の上書きを元に戻します。 var $j = jQuery.noConflict(true); // $ は jQuery ver1.2.6を参照します。 alert($.fn.jquery); // => 1.2.6 // jQuery は jQuery ver1.2.6を参照します。 alert(jQuery.fn.jquery); // => 1.2.6 // $j は jQuery ver1.4.2を参照します。 alert($j.fn.jquery); // => 1.4.2 </script> </head>