protocalendar.jsとjQueryを同時に動かすためにやったことメモ

java

prototypeとjQueryは同時には動かない!時はこれ!
今回もいつも「あれっ!?」ってなるprototypeとjQueryの共存の方法を覚書します。

protocalendar.js(prototype全般)とjQueryを同時に動かす方法

prototype&jQueryを同時に動かすための方法を調べて以下のサイトが非常にわかりやすく参考にさせて頂きました。(いっつも忘れてはこのサイト様にお世話になってました・・・。)

prototypeとjQueryを同時に動かすためには読み込む順番と専用のコードの記述とjQueryで定義されているコードの変更で可能となります。ここではタイトルどおりprotocalendar.jsとjQueryドロップダウンメニューを例に書き残したいと思います。

作業の順序は以下のとおりです。

  • 1:prototype.jsを読み込む
  • 2:prototypeを動かす記述
  • 3:jQueryを読み込み
  • 4:専用のコードを記述
  • 5:jQueryを動かす記述
  • 6:jQueryライブラリで定義されている$をすべてj$に変更

1:prototype.jsを読み込む

//1:protocalendarに必要なものをはじめに読み込みます
<script src="/lib/prototype.js" type="text/javascript"></script>
<script src="/lib/effects.js" type="text/javascript"></script>
<script src="/javascripts/protocalendar.js" type="text/javascript"></script>
<script src="/javascripts/lang_ja.js" type="text/javascript"></script>

まずprotocalendarを動かすためのファイルをすべて読み込みます。

2:prototypeを動かすための記述を書き込む

//2:protocalendarを動かすための記述を書き込みます

<script type="text/javascript">
  function changeStyle() {
	var cssName = $('calendar_style_select').options[$('calendar_style_select').selectedIndex].value;
//        alert('style changed [' + cssName + '].');
	$('calendar_style').href = '<?php bloginfo('template_directory'); ?>/stylesheets/' + cssName + '.css';
  }
  Event.observe(window, 'load', function() {
	Event.observe($('calendar_style_select'), 'change', changeStyle);
	changeStyle();
  });
</script>

3:jQueryを読み込み

//3:jQueryに必要なものを読み込む ここではグーグルより読み込んでいます
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript">

次にjqueryを動かすために必要なものを記述します。

4:同時に動かすための専用のコードを記述

//4:同時に動かすための専用のコードを記述
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>

ここでprototypeとjQueryを同時に動かすための専用コードを書き込みます。

5:jQueryを動かすプラグインの記述

//5:jQueryを動かすプラグインの記述
<script type="text/javascript">
$(function() {
$("#menu li").hover(function() {
	$(this).children('ul').show();
}, function() {
	$(this).children('ul').hide();
});
});
</script>

次にjQueryプラグインを記述します。

6:jQueryライブラリで定義されている$をすべてj$に変更

//6:jQueryライブラリで定義されている$をすべてj$に変更
<script type="text/javascript">
j$(function() {
j$("#menu li").hover(function() {
	j$(this).children('ul').show();
}, function() {
	j$(this).children('ul').hide();
});
});
</script>

最後にすべての定義されている$をj$に変更する

サンプルコード

//1:protocalendarに必要なものをはじめに読み込みます
<script src="/lib/prototype.js" type="text/javascript"></script>
<script src="/lib/effects.js" type="text/javascript"></script>
<script src="/javascripts/protocalendar.js" type="text/javascript"></script>
<script src="/javascripts/lang_ja.js" type="text/javascript"></script>

//2:protocalendarを動かすための記述を書き込みます

<script type="text/javascript">
  function changeStyle() {
	var cssName = $('calendar_style_select').options[$('calendar_style_select').selectedIndex].value;
//        alert('style changed [' + cssName + '].');
	$('calendar_style').href = '<?php bloginfo('template_directory'); ?>/stylesheets/' + cssName + '.css';
  }
  Event.observe(window, 'load', function() {
	Event.observe($('calendar_style_select'), 'change', changeStyle);
	changeStyle();
  });
</script>

//3:jQueryに必要なものを読み込む ここではグーグルより読み込んでいます
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript">

//4:同時に動かすための専用のコードを記述
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script> 

//5:jQueryを動かすプラグインの記述
<script type="text/javascript">
$(function() {
$("#menu li").hover(function() {
	$(this).children('ul').show();
}, function() {
	$(this).children('ul').hide();
});
});
</script>

//6:jQueryライブラリで定義されている$をすべてj$に変更
<script type="text/javascript">
j$(function() {
j$("#menu li").hover(function() {
	j$(this).children('ul').show();
}, function() {
	j$(this).children('ul').hide();
});
});
</script>

今日の選択理由

いつも作業中に「あれっ!あっそっかぁ~!」という具合に順序忘れて、調べて記述しなおしてという感じになっているのがこのjQueryとの共存です。今後自分で「あれっ!?」と思ったときに自分で書いたもので確認できるようにと覚書です。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/jquery/760/trackback/