webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
プラグインを複数入れたらjQueryが動かない!-コンフリクト対策 eyecatch画像

プラグインを複数入れたらjQueryが動かない!-コンフリクト対策

rss

WEBサイトを制作している際、
jQueryとprototypeなどの別ライブラリのプラグインを1ページに複数入れると、後述のプラグインが動かない!ということがよくあります。
(あるいは、同じjQueryでもバージョン違いを共存させプラグインエラーとなる場合)
※ちなみに、Jquery等ライブラリ本体(同一Ver.)は一度だけ読み込み、ライブラリ本体の読み込み後に各プラグインが読み込まれている設置状況とします。

これは原因が色々と考えられるのですが、当方で一番多い原因はプラグイン同士の競合(コンフリクト)です。

 

原因はコンフリクト?-プラグインを複数入れたらjQueryが動かない!

例えば例として、下記のような「ドロップダウンメニュー」のプラグインスクリプトを設置したとして、

  ドロップダウンメニュー(HTML内)

<script>
$(function(){
  $('#dropmenu li').hover(function(){
    $("ul:not(:animated)", this).slideDown();
  }, function(){
    $("ul.drop_child",this).slideUp();
  });
});
</script>

上記のとおり、jQueryのスクリプトは「$」で始まっているはずです。

その後述に、別のプラグイン「スムーススクロール」を設置したとします。

  スムーススクロール(HTML内)

<script>
$(function(){
  $('a[href^=#]').click(function() {
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});
</script>

こちらも同じく、スクリプトは「$」で始まっています

ここで後述の「スムーススクロール」が動かない!っていうことがあるとします。
「$() 関数」が競合していることが原因でコンフリクトが発生している可能性があるのです。

「$() 関数」は、jQueryのほとんどのプラグインで、jQuery 以外のライブラリでも多く使用されているので、この競合(コンフリクト)は度々発生します。

 

「$() 関数」のコンフリクト回避方法

では、コンフリクトを回避する方法です。
上記「ドロップダウンメニュー」と「スムーススクロール」を例に設置していきます。
ここでは、jQueryで説明します。

まず、jQuery本体の設置から。
ページ下部や任意の場所で、jQueryライブラリ本体を読み込みます。
(※任意のバージョンを設置してください。Webcode-labではJqueryのCDN利用をしています。
jQuery本体についてはこちらの記事(ページスピードアップ施策 - 1「ブラウザのキャッシュ」)も参考に。)

  jQuery本体(HTML内)

<!-- jQuery2.1.4 CDN START -->
<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/_common/js/jquery-1.11.3.min.js"><\/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/_common/js/jquery-2.1.4.min.js"><\/script>')</script>
<!--<![endif]-->
<!-- jQuery END -->



そして、本体設置の後述にプラグインを設置していきます。
プラグインは、ページ上部で使用する「ドロップダウンメニュー」から設置してみます。

  ドロップダウンメニュー(HTML内 jQuery本体より後述

<script>
var $d = jQuery.noConflict(); // ← 関数「$d」定義
$d(function(){ // ← 以降全ての「$」を「$d」に置換 ↓
  $d('#dropmenu li').hover(function(){
    $d("ul:not(:animated)", this).slideDown();
  }, function(){
    $d("ul.drop_child",this).slideUp();
  });
});
</script>

先ほどの競合していたスクリプトとの違いは、
まず、「$() 関数」の代わりに別の関数「$d」(なんでも構いません)を定義し、

var $d = jQuery.noConflict();

そして、スクリプトの「$」を全て「$d」に書き換えています。
これで終わりです。


もう片方の「スムーススクロール」も、
もし、もっと複数のプラグインを設置する場合は同じように全てのプラグインで、「$」を定義し直し書き換えます。
では、「スムーススクロール」の方も書き換えてみます。

  スムーススクロール(HTML内 jQuery本体より後述

<script>
var $s = jQuery.noConflict(); // 関数「$s」定義
$s(function(){ // ← 以降全ての「$」を「$s」に置換 ↓
  $s('a[href^=#]').click(function() {
    var speed = 500;
    var href= $s(this).attr("href");
    var target = $s(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $s('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});
</script>



 

このように「$() 関数」を書き換えることで、「$() 関数」競合が原因のコンフリクトを回避できます。
この方法で、注意すべきは、全てのプラグインの「$」を書き換える必要があることです。
他にも方法がありますので、一例としてご紹介しました。

回避方法とは別問題として、あまりたくさんのプラグインを1ページに設置すると重くなるので考慮が必要ですが。


 


ページの先頭へ

rss
1件目 (1件中)