弹出菜单上的JavaScript计时器延迟无法正常工作

时间:2013-03-19 23:55:25

标签: javascript

我使用了Superfish jQuery弹出菜单,并将其转换为我公司当前框架的JavaScript。

您可以在此处查看Superfish实施: http://ddeloy.com/rsx_menu/Dropdown.html

和Superish js在页面中。

我的菜单类似:我的问题是我正在尝试实施像Superfish这样的计时器延迟 - 所以当你将鼠标悬停在弹出按钮上时会有一段延迟关闭,点击打开后我的菜单 - 悬停在那里的弹出窗口没有延迟。延迟仅适用于根菜单。 我的收件箱 我的批准等

rsx.defClass('rsx.controls.Menu', rsx.controls.Control);
rsx.controls.registerClass(rsx.controls.Menu);
rsx.controls.registerProps([]);

/*** Global document properties and factory/access functions ***/

with(rsx.controls) {

    Menu.onLeaveDelay = 400;



    Menu.prototype.init = function (props, parentCtrl) {
        if (typeof props != "object") props = {};
        Menu.superclass.init.call(this, props, parentCtrl);

        // private attributes

        this._defaultLabel = (props.label) ? props.label : '';
        this._command = rsx.getFunctionReference(props.command);

        this._label = null;
        this._menu = null;
        this._items = null;
        this._timer = null;
        this._isActive = false;
        this._onEnterMenu = this.closure(this.onEnterMenu);
        this._onLeaveMenu = this.closure(this.onLeaveMenu);
    }


    Menu.prototype.initHtml = function (node, raiseInit, raiseContentLoad) {
        Menu.superclass.initHtml.call(this, node, true, false);
        jQuery(node).click(this.closure(this.showMenu));
    }

    Menu.prototype.setLabel = function (newLabel) {
        this._label.innerText = newLabel;
    }

    Menu.prototype.showMenu = function () {
        if (!this._isActive) {
            this._isActive = true;
            jQuery(this._menu).show();
        }
    }

    Menu.prototype.hideMenu = function () {
        this._isActive = false;
        jQuery(this._menu).hide();
    }

    Menu.prototype.doCommand = function (menuItem) {

        if (this._enabled && this._command) this._command(jQuery(menuItem).data("command"), this);
    }

    Menu.prototype.setItems = function (items) {
        this._items = items;
        if (this.domNode) {
            jQuery(this.domNode).hover(rsx.controls.Menu.onEnter, rsx.controls.Menu.onLeave);
            this._label = jQuery('<span class="rsxMenuLabel"></span>')
                .text(this._defaultLabel)
                .appendTo(this.domNode)
                .get(0);
            this._menu = jQuery("<ul class='rsxMenuRoot'></ul>")
                .hover(this._onEnterMenu, this._onLeaveMenu)
                .appendTo(this.domNode)
                .hide()
                .get(0);
            this._setItems(items);
        }
    }

    Menu.prototype._setItems = function (items, parent) {
        var menu = (!parent) ? this._menu : jQuery("<ul></ul>").appendTo(parent).get(0);
        var self = this;
        for (var i = 0, len = items.length; i < len; i++) {
            var $li = $("<li></li>")
                .hover(rsx.controls.Menu.onEnter, rsx.controls.Menu.onLeave)
                .appendTo(menu);

            var $a = $('<a href="javascript:void(0)"></a>')
                .text(items[i].label)
                .data("command", items[i].command || '')
                .appendTo($li);


            if (items[i].items) {
                $a.addClass("rsxMenuNode").prepend('<span class="rsxMenuArrow"> &#187;</span>');
                this._setItems(items[i].items, $li.get(0));
            } else {
                $a.bind("click", function () {
                    self.doCommand(this);
                    return false;
                });
            }
        }
    }


    Menu.prototype.onEnterMenu = function () {
        if (this._timer) {
            clearTimeout(this._timer);
            this._timer = null;
        }
    }
    Menu.prototype.onLeaveMenu = function () {
        var self = this;
        this._timer = setTimeout(function () {
            self.hideMenu();
        },
        rsx.controls.Menu.onLeaveDelay);
    }
    Menu.onEnter = function () {
        jQuery(this).addClass('rsxHover');
    }
    Menu.onLeave = function () {
        jQuery(this).removeClass('rsxHover');
    }

}

0 个答案:

没有答案