web-dev-qa-db-ja.com

jQueryとMooToolsの競合

さて、jQueryスクリプトの先頭にこれを追加することで、1つのスクリプトでMooToolsとうまくやっていくようにjQueryを取得しました。

var $j = jQuery.noConflict();

そして、すべてを置き換えます：

$(

と

$j(

しかし、どのようにしてMooToolsにjQueryを使用する次のスクリプトを気に入ってもらうのでしょうか？

ご意見をお寄せいただきありがとうございます。

トレーシー

//Fade In Content Viewer: By JavaScript Kit: http://www.javascriptkit.com

var fadecontentviewer={
 csszindex: 100,
 fade:function($allcontents, togglerid, selected, speed){
  var selected=parseInt(selected)
  var $togglerdiv=$("#"+togglerid)
  var $target=$allcontents.eq(selected)
  if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link)
   alert("No content exists at page number "+selected+"!")
   return 
  }
  if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){
   var $toc=$("#"+togglerid+" .toc")
   var $selectedlink=$toc.eq(selected)
   $("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg')
   $("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg')
   $target.css({zIndex: this.csszindex++, visibility: 'visible'})
   $target.hide()
   $target.fadeIn(speed)
   $toc.removeClass('selected')
   $selectedlink.addClass('selected')
   $togglerdiv.attr('lastselected', selected+'pg')
  }
 },

 setuptoggler:function($allcontents, togglerid, speed){
  var $toc=$("#"+togglerid+" .toc")
  $toc.each(function(index){
    $(this).attr('pagenumber', index+'pg')
  })

  var $next=$("#"+togglerid+" .next")
  var $prev=$("#"+togglerid+" .prev")
  $next.click(function(){
   fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
   return false
  })
  $prev.click(function(){
   fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
   return false
  })
  $toc.click(function(){
   fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
   return false
  })
 },

 init:function(fadeid, contentclass, togglerid, selected, speed){
  $(document).ready(function(){
   var faderheight=$("#"+fadeid).height()
   var $fadecontents=$("#"+fadeid+" ."+contentclass)
   $fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
   fadecontentviewer.setuptoggler($fadecontents, togglerid, speed)
   setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100)
   $(window).bind('unload', function(){ //clean up
    $("#"+togglerid+" .toc").unbind('click')
    $("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click')
   })
  })
 }
}
jquerymootoolsconflict
20
flipflopmedia

$を使用しているjQuery固有のコードがある場合、最も簡単な方法は、コードを次のようにラップすることです。

// Disable the $ global alias completely
jQuery.noConflict();

// For jQuery scripts
(function($){

// set a local $ variable only available in this block as an alias to jQuery
... here is your jQuery specific code ...

})(jQuery);

// For Mootols scripts
(function($){

// set a local $ variable only available in this block as an alias 
// to Mootools document.id
... here is your Mootools specific code ...

})(document.id);

noConflictドキュメント の2番目の例を参照してください。

29
Vincent Robert

MooToolsが提供する互換モードについてはわかりませんが、スクリプト内の$(のすべての出現箇所を$j(またはjQuery(に置き換えるのが簡単な方法です。

6
Raphael Michel

$を$jQueryに置き換えると、機能するはずです。

1
rampatel