2つのバージョン違いのjQueryを併用する

jQueryのプラグインって便利で開発にとても役立つのですが、

とあるバージョンでは動くのに最新バージョンでは動かないプラグインがあったりして、、、

 

組み合わせていろいろ使っていくとそのうちそういうのに遭遇するんですよね。

そんな時は、複数のバージョン違いのjQueryを併用するためにちょっとした処理を記述する必要があります。

方法１

jQueryの$に別名を付けて使用する方法。

＜script type="text/javascript" src="jquery-1.9.0.js" ＞＜/script＞
＜script type="text/javascript">
    var $132 = $.noConflict(true);
</script>
＜script type="text/javascript" src="jquery-1.3.2.js" ＞＜/script＞

この方法を使うと、最初に読み込んだjQueryの「$」を「$132」に変更することができます。

これで、それぞれ別のバージョンが必要な部分で「$」を使うか「$132」を使うか使い分けをすることができるというわけです。

 

方法２

jQueryをもう１つのjQueryで拡張する

<script type=”text/javascript” src=”jquery-1.9.0.js”></script>
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type=”text/javascript”>
var $ = jQuery = jQuery.noConflict().extend(true, $);

</script>

この方法を使うと、1.9.0を1.3.2で拡張することができます。

 

基本的に1.9.0のメソッドを呼び出します。

1.9.0にあって1.3.2にあるメソッドを呼んだ場合は、

ちゃんと1.3.2にあるメソッドが呼ばれます。

 

今回は、jQueryMobileとjQueryUIのタブを併用する際にこの問題が発生しました。

方法2を使って無事解決することが出来ました。

 

バージョン違いは恐ろしいですね。。。

どちらか便利な方を試してみて下さい。