jQueryとprototype.jsを共存させる方法

jQueryとPrototypeを共存させる方法

prototype.jsとjQueryは実は競合(コンフリクト)します。

今さら...って記事なのですが、自分の紹介しているjQueryのプラグインを導入したが動かない...
こういう質問がいくつか寄せられ、実際みてみた所、prototype.jsが使われていたりしていたので、今さらですが紹介しておきたいと思います。

…ここからが続き

jQueryとprototype.js共存させる為にする事

1. 最初にprototype.jsを読み込ませます。
※prototype.jsで動かすプラグインも先に記述。

2. jQueryを読み込ませます。

3. jQueryの次に下記javascriptを記述

<script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>

4. 最後にjQueryのプラグインを読みこます。

※この時プラグイン内に記述されている
$() となっている部分を $j() に置換しないと駄目です。

jQueryでの開閉式のアコーディオンの動きいろいろで使ったスクリプトで例をあげてみると

変更前

$(document).ready(function() {
	$(".navi dt").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
		});
	$(".navi dd").css("display","none");
	$(".navi dt").click(function(){
		$(this).next().slideToggle("fast");
		});
});

変更後

j$(document).ready(function() {
	j$(".navi dt").hover(function(){
		j$(this).css("cursor","pointer"); 
	},function(){
		j$(this).css("cursor","default"); 
		});
	j$(".navi dd").css("display","none");
	j$(".navi dt").click(function(){
		j$(this).next().slideToggle("fast");
		});
});

$をj$に一斉置換すれば良いかと思います。

最終的にhead内に記述内容をまとめてみますよ下記のようになります。

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
<script type="text/javascript" src="js/accordion.js"></script>

これは個人的な意見なんですが、jQueryとprototype.jsを一緒に使うって事は極力避けた方がよいと思いますよ。

Domo Page

追記:2/20

cyokodogさんからもっと簡単に出来る方法を教えて貰いました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
</script>
<script type="text/javascript" src="js/accordion.js"></script>

この記述ですとjQueryの$をj$に書き換えなくて大丈夫です。

Track Back

[Mi]みたいなもの

[11.開発日記][JavaScript][jQuery][prototype.js]jQueryとprototype.jsを簡単に共存

jQueryとprototype.jsの両方を使うと衝突(コンフリクト)を起こします。 で、動作しません。 この場合、どのように対処すればいいのでしょう...

by [Mi]みたいなもの  

ダリの雑記:WEBプログラム版

jQueryとprototype.jsを同時に使用する場合

メモ 少々手間ですが、以下のサイトのようにするとうまくいきます。 jQueryとprototype.jsを共存させる方法 | CSS Lecture...

by ダリの雑記:WEBプログラム版  

Comments

いけてるカッシー

いけてるカッシー

※この時プラグイン内に記述されている$() となっている部分を $j() に置換しないと駄目です。

↑赤文字の上記の部分
$j() に置換しないと駄目です。
 ではなく、
j$() に置換しないと駄目です。

だと思います。

2010年06月30日 15:35

MIYA

MIYA

その記述の仕方が分からなかったです…

いつもいつも教えて頂きありがとうございます^^

2009年02月21日 20:27

cyokodog

cyokodog

j$(document).ready(function() {

jQuery.noConflict()(function($){

って書き換えれば
$は置き換えなくても大丈夫かと

2009年02月20日 21:02

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article