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

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の共存が可能です。

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は1ヶ月と10日で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす