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

プロフィール

入江 慎吾/サービス開発だけで生きていく
15年続けた受託開発をやめ、自分が作ったサービスだけで生きていくことを決意。同じゴールを目指す仲間が集まる入江開発室を運営 / 師弟関係がつくれるサービス「MENTA」をつくりました。
(詳しいプロフィール)

PRODUCT

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

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす