Prototype.jsとJqueryを共存して使う方法

2012/07/30 (2016/09/14更新) タグ: , ,
  • このエントリーをはてなブックマークに追加

Javascriptをかんたんに扱うことができるPrototype.jsとJquery。Webサイト制作に携わっていると色んなプラグインを使うことがあります。その際に問題になるのがコンフリクト(衝突)。Prototype.jsとJqueryは「$」を関数として使っているため、問題を起こしてしまい、そのままでは使えません。

SPONSOR

Jqueryの方が後発のライブラリのためか、回避策があります。まず、先にPrototype.jsを読み込みます。そして、その後にJqueryを読み込ませます。

<script type="text/JavaScript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;

var j$ = jQuery;
    j$(function(){
        j$("ul.sub_list").hide();
            j$("ul#ul_menu>li").hover(function(){
                j$("ul:not(:animated)",this).slideDown("fast")
            },
            function(){
                j$("ul",this).slideUp("fast");
            })
     });
</script>
<script type="text/javascript" src="jqueryプラグイン.js"></script>

こうして、この後にjqueryのプラグインを読み込ませます。
その際、jqueryプラグイン内で使用している「$」を「j$」に置き換えます。
こうすることで、Prototype.jsとJqueryの共存が可能です。

この記事もおすすめ
記事を書いている中の人
入江慎吾
デザインも開発もやっているフリーのエンジニアです。目標はプロダクトだけで生きていくこと。そのために学んだこと、実践したことをブログで発信中。朝5時に起きて午前中だけ働いています。午後からは読書と勉強にあてて自己スキルをのばし、さらに生産性を高めたいと考えてます。(もっと詳しいプロフィール
この記事をシェアする
  • このエントリーをはてなブックマークに追加
メールマガジンで新着記事をフォロー

 

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む
イリテクで開発したプロダクト
SPONSOR
こちらの記事もおすすめです