天使と悪魔選手権

複数のバージョンのjQueryを同時に使用

解決済

  • 質問者：minami963852741
  • 質問日時：
  • 回答数：3件

複数のjQueryライブラリを同時に使用するには
http://jsajax.com/articles/jQueryUsingMultipleVe …

上記サイトを参照しましたがわからなかったので質問いたします。

「1.3.2と1.1.3.1」のようにバージョンの違うjQueryライブラリを同時に使いたいのですが、
以下のように記述した場合、Feature Listが正常に動作しません。
バージョンの違うjqueryライブラリを同時に使うにはどのように設定すればいいのでしょうか
よろしくお願いいたしします

<script type="text/javascript" src="jquery/1.1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script>

<!-- ▼jquery_auto -->
<script type="text/javascript" src="jquery/jquery_auto_j.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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： mtaka2
  • 回答日時：

> 「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>
---ここまで---
になるかと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

「---ここから---」から「---ここまで---」の部分を記述しましたが、
何故か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# …

こちらのサイトも参照してみましたがよくわかりません。
以下の記述の「=> 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>

通報する
お礼日時：2011/03/11 17:34

No.2

  • 回答者： yyr446
  • 回答日時：

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>

で、出来るんじゃない...
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
jquery_autoは古いバージョンが必要だったような気がします。

通報する
お礼日時：2011/03/10 21:24

No.1

  • 回答者： mtaka2
  • 回答日時：

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);
---ここまで---

のようにします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます

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")
},
---------------------（一部抜粋）

通報する
お礼日時：2011/03/10 21:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報