jQuery与MooTools发生冲突

时间:2013-04-05 15:04:04

标签: javascript jquery mootools conflict

  1. 如果我使用MooTools:// MooTools,http://mootools.net,My Object Oriented(JavaScript)工具触摸它/不使用光标,我创建了弹出的幻灯片菜单。版权所有(c)2006-2009 Valerio Proietti,http://mad4milk.net,MIT Style License。 //核心+ FX.Scroll +资产+事件委托
  2. 我的剧本的一部分:

    window.addEvent('domready', function() {
    new SlideoutMenu();
    
    
    
    initialize: function()
    {
        // FF2 Mac screws up the menu display. give the m the basic menu
        if (Browser.Platform.mac && Browser.Engine.gecko && Browser.Engine.version == 18) {
            $('menu').removeClass('js_live');
            return;
        }
    
        // iPhone should have normal menu
        if (Browser.Platform.ipod) {
            $('menu').removeClass('js_live');
            return;
        }
    
        this.bg_div = $('menu');
        this.menu_div = $$('#menu #opts')[0];
    
        this.logo_lnk = $$('#logo a')[0];
        if (this.logo_lnk.hasClass('home')) {
            this.is_homepage = true;
        }
    
        var rbsEasing = new Fx.Transition(Fx.Transitions.Expo, 4);      
    
        this.is_open = false;
    
        this.bgEffect = new Fx.Tween(this.bg_div, {
            unit: '%',
            property: 'width',
            duration: 650,
            transition: rbsEasing.easeOut,
            onComplete:this.bgEffectComplete.bind(this)
        });
    
        this.menuEffect = new Fx.Tween(this.menu_div, {
            property: 'left',
            transition: rbsEasing.easeOut,
            duration: 650
        });
    
        $('logo').addEvent('mouseenter', this.showMenu.bind(this));
    
        this.mouseBindCallback = this.moveMoveCallback.bind(this);
    },
    
    bgEffectComplete: function()
    {
        if (this.is_open === false) {
            document.addEvent('mousemove', this.mouseBindCallback);
        }
        this.is_open = !this.is_open;
    },
    
    showMenu: function()
    {
        if (this.is_open === true) {
            return;
        }
    
        this.bgEffect.start(70);
        this.menuEffect.start(600, $('logo').getPosition().x);
    
        this.logo_lnk.addClass('active');
    
        if (this.is_homepage) {
            this.logo_lnk.removeClass('home');
        }
    },
    
    hideMenu: function()
    {
        this.bgEffect.start(0);
        this.menuEffect.start(600);
    
        this.logo_lnk.removeClass('active');
    
        if (this.is_homepage) {
            this.logo_lnk.addClass('home');
        }
    },
    
    moveMoveCallback: function(e)
    {
        var close_right = this.menu_div.getPosition().x + 370;
        if (e.page.x > close_right && e.page.y > 80 && this.is_open === true) {
            document.removeEvent('mousemove', this.mouseBindCallback);
            this.hideMenu();
        }
    }
    

    菜单没有任何问题,然后

    1. 我使用jquery创建了一个照片幻灯片库,当然菜单停止了工作。 当我删除jquery时,它再次正常工作。 有许多网站表示javascript和jquery之间存在冲突,并且不会重新使用它们,尽管有一个解决方案

      jQuery.noConflict();应在

    2. 之后添加

      此外,我在mooTools文件jsc.js和我自己创建的文件中用$ j更改了$。最后它工作但非常奇怪,菜单会弹出,但它的元素不再对齐,当我移开光标时它不会消失... 我觉得这有一个简单的解决方案,因为我在这里缺乏知识,我正在寻求你的帮助

2 个答案:

答案 0 :(得分:1)

尝试在您的mootools脚本中替换所有$(一美元!不是2 $$)到document.id

答案 1 :(得分:1)

没关系,用

解决了

(function($){/ *你的类文件在这里* /})(document.id);