prototype.jsとJQueryを共存させるには

Ruby on Railsで開発していると、たいていの場合prototype.jsが組み込まれてしまう。

Rails3ではprototype.jsを使わない方法も取れるかもしれないが、まだまだprototype.jsは使う機会が多い。

そんな中で、JQueryのエフェクトやプラグインには魅力を感じてしまう。

そこで、prototype.jsとJQueryを共存させる事が出来れば問題は解決するはず。

JQueryには、コンフリクトを避けるためのメソッドがあるので、これを指定すれば

ほとんどの場合、エラーが出ずに共存させることが出来る。

まず、prototype.jsを読み込む

その次に、JQueryを読み込む

かならず、prototype.jsの次にJQueryを読み込む。

JQueryを読み込んだ直後に

というメソッドを実行してやることで、共存できる。

このnoConflictも、直後に無いとIEなどでエラーが出たりする。

また、JQueryの方の呼び出し方が少し変わり

JQuery(‘def#content’)

という形で、$ではなく、JQueryと指定する必要がある。

JQueryの処理が長く、JQueryと書くのが面倒な場合

JQuery用のスコープとして、以下のような書き方も可能

prototype.jsで、ページが読み込まれた後に発動するイベントを定義

prototype.jsで、ページが読み込まれた後に発動するイベントを定義する場合

DOMツリーの構築が終わっていても描画が終わっていない場合があるので、このイベント内で$(‘test’).style.height のようなプロパティを見ても0やnullが入っている場合がある。

prototype.jsのイベント

prototype.jsで、エレメントにイベントを設定する

このタグにクリックイベントを付ける時は

prototype.jsのイベントとして指定出来るイベント

  • ページのイベント
    • load
      ページが読み込まれた時
    • dom:loaded
      ページが読み込まれた時(イメージなどは読み込み完了していなくても発動)
      ※DOMツリーの構築が終わっていても描画が終わっていない場合があるので、このイベント内で$(‘test’).style.height のようなプロパティを見ても0やnullが入っている場合がある。
    • unload
      ページが閉じられる時
    • resize
      ページのサイズが変更された時
    • abort
      ページの読み込みが中止された時
    • error
      エラーが発生した時
  • マウスのイベント
    • mouseover
      ある領域上にマウス・カーソルが移動された時
    • mouseout
      ある領域上からマウス・カーソルが移動された時
    • mousedown
      マウス・ボタンが押された時
    • mouseup
      マウス・ボタンが解放された時
    • mousemove
      マウス・カーソルが移動された時
    • click
      マウスがクリックされた時
    • dblclick
      マウスがダブルクリックされた時
  • キーのイベント
    • keydown
      キーボードのキーが押された時
    • keypress
      キーボードのキーが押されている時
    • keyup
      キーボードのキーが解放された時
  • 選択イベント
    • focus
      ある領域が選択された時
    • blur
      ある領域の選択が解除された時
    • select
      入力領域の文字列が選択された時
  • 変更イベント
    • change
      フォームの値が変更された時
  • 命令イベント
    • submit
      submit(送信)命令が出された時
    • reset
      reset(初期化)命令が出された時

dom:loadedについての検証をしているページ

http://hisasann.com/housetect/2008/11/prototypejsdomloadedie.html