我使用了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"> »</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');
}
}