代码之家 › 专栏 › 技术社区 › niux

jQuery与MooTools冲突

conflict mootools jquery javascript

niux · 技术社区 · 11 年前

我已经创建了slideout菜单,如果我使用MooTools://MooTools用光标触摸它,它就会弹出/弹出, http://mootools.net ,我的面向对象(JavaScript)工具。版权所有(c)2006-2009 Valerio Proietti, http://mad4milk.net ,麻省理工学院风格的许可证。 //核心+FX.Scroll+资产+活动委托

我剧本的一部分:

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();
    }
}

菜单工作正常,然后

我用jquery创建了一个照片幻灯片库,当然菜单已经停止工作了。当我删除jquery时,它又可以正常工作了。在许多网站上,它说javascript和jquery之间存在冲突,因此不建议将它们一起使用,尽管有一个解决方案

jQuery.noConflict();应在之后添加

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

2 回复 | 直到 11 年前

Adidi 11 年前

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

toblerone_country niux 2 年前

没关系,用

(function($){ /* your class files here */ })(document.id);