Как решить конфликт jQuery и mootoools? - PullRequest
Новая
       16

Как решить конфликт jQuery и mootoools?

1 голос
/ 26 октября 2009

Я использую 

<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>

чтобы загрузить jquery, а затем загрузить внешний скрипт, который содержит эти данные: 

var jkpanel={
    controltext: 'menu',
    $mainpanel: null, contentdivheight: 0,
    openclose:function($, speed){
    this.$mainpanel.stop() //stop any animation
    if (this.$mainpanel.attr('openstate')=='closed')
        this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
    else
        this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},

init:function(file, height, speed){
    jQuery(document).ready(function($){
        jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
        var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
        var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
        $contentdiv.load(file, '', function($){
                var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
                $contentdiv.css({height: heightattr})
                jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
                jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
                $controldiv.css({cursor:'hand', cursor:'pointer'})
        })
        jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})       
    })
}
}

//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('1', '80px', 1000)

, а также, конечно, используйте плагин mootools.

МОЙ ВОПРОС ТАК как мне использовать var $j = jQuery.noConflict(); в приведенном выше сценарии, чтобы предотвратить конфликт

Ответы [ 2 ]

5 голосов
/ 26 октября 2009

Оберните весь JavaScript, который опирается на jQuery, в замыкание, чтобы предотвратить конфликты пространства имен, например: 

// Start closure to prevent namespace conflicts
;(function($) {

  // Whatever code you want that relies on $ as the jQuery object

// End closure
})(jQuery);

Это выглядит странно, но синтаксис правильный (да, первая строка начинается с точки с запятой). Это автоматически заменяет jQuery на $ объект, который используют jQuery и mootools. Поскольку вы используете оба, вы должны обернуть весь свой код jQuery в замыкание, подобное этому (по одному на каждый файл .js или тег script).

2 голосов
/ 26 октября 2009

Если проблема в том, что вы загружаете MooTools, а затем загружаете jQuery, а затем MooTools не работает, потому что jQuery взял на себя функцию доллара, тогда вам, вероятно, просто нужен код, подобный этому: 

<script type="text/javascript" src="mootools.js"> </script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

Это должно заставить jQuery отказаться от $(). Код, который у вас есть в вашем вопросе, уже делает другую полезную вещь: использование параметра готового обработчика событий как способ локально использовать более короткое имя для объекта jQuery.

Я настоятельно рекомендую прочитать страницу jQuery по работе с другими библиотеками и, возможно, документацию по функции noConflict().

...