menu.lib.js

asp的bbs程序

/*
  By Hangring
  #2008.02.19#
  ---
  use list:
  > global.lib.js
  > node.lib.js
  > events.lib.js
  > node.lib.js
  > css.lib.js
  > function.lib.js
  > popup.lib.js
  ---
  菜单
  ---
  包含样式：
  <link rel="stylesheet" href="css/menu.lib.css" type="text/css" />
*/
function Menu () {
    this.id = 'menu_' + Global.Random();
    //Menu[this.id] = this;
    // container
    this.container = null;
    // same menu sign
    this.sign = '';

    // the button open this menu
    this.button = null;

    // parent menu item `div`
    this.menuItem = null;
    // current selected item
    this.current = null;
    // parent menu
    this.parent = null;
    // child menu
    this.child = null;

    // mouse down function
    this.mouseDown = null;
    // window resize function
    this.resize = null;

    this.dataProvider = [
        {text:'菜单级别一',css:'',link:function () {alert('执行命令');}},
        {text:'bbb',css:'',child:[
            {text:'菜单级别二',css:'',link:'#'},
            {text:'ddd',css:'',child:[
                {text:'eee',css:'',link:'#'},
                {text:'ee',css:'',link:'#'},
                {text:'fdsf',css:'',link:'#'},
                {text:'dfag',css:'',link:'#'},
                {text:'dffdsas',css:'',link:'#'},
                {text:'dsaf',css:'',link:'#'},
                {text:'fdsg',css:'',link:'#'},
                {text:'rewq',css:'',link:'#'}
            ]},
            {text:'ddd',css:'',child:[
                {text:'菜单级别三',css:'',link:'#'},
                {text:'dfs',css:'',link:'#'},
                {text:'dfs',css:'',link:'#'},
                {text:'dfs',css:'',link:'#'},
                {text:'dfs',css:'',child:[
                    {text:'111',css:'',link:'#'},
                    {text:'222',css:'',link:'#'},
                    {text:'333',css:'',link:'#'},
                    {text:'444',css:'',link:'#'},
                    {text:'555',css:'',link:'#'},
                    {text:'666',css:'',link:'#'},
                    {text:'777',css:'',link:'#'},
                    {text:'888',css:'',link:'#'}
                ]}
            ]},
            {text:'ddd',css:'',link:'#'}
        ]},
        {text:'eee',css:'',link:'http://www.bbsmax.com'}
    ];

    this.css = {
        menu:'menu',
        item_hasmenu:'item-hasmenu',
        item_over:'item-over',
        item_out:'item-out',
        item_focus:'item-focus'
    };
}

Menu.prototype.Init = function () {
};

Menu.prototype.Create = function () {
    var self = this;

    var c = this.container = PopUp.Panel('');
    PopUp.AddPopUp(c);
    CSS.AddClass(c, this.css.menu);

    var d = this.dataProvider;
    for (var i = 0, len = d.length; i < len; i++) {
        var item = oNode.CreateNode('div');
        oNode.AddNode(item, c);
        d[i].css && CSS.AddClass(item, d[i].css);
        oNode.AddNode(d[i].text, item);

        Events.AttachEvent(item, 'mouseover', function (e, th) {
            th = th || this;
            CSS.ReplaceClass(th, self.css.item_out, self.css.item_over);

            if (self.parent) {
                self.parent.current = self.menuItem;
                if (self.parent.current) CSS.AddClass(self.parent.current, self.parent.css.item_focus);
            }
        });
        Events.AttachEvent(item, 'mouseout', function (e, th) {
            th = th || this;
            CSS.ReplaceClass(th, self.css.item_over, self.css.item_out);
        });

        if (d[i].link) {
            item.link = d[i].link
            Events.AttachEvent(item, 'click', function (e, th) {
                th = th || this;
                self._Change();
                if (typeof th.link == 'function')
                    th.link();
                else 
                    location.href = th.link;
                self._Hide();
                self.RemoveAll();
                Events.CancelAll(e);
            });
            Events.AttachEvent(item, 'mouseover', function (e, th) {
                clearTimeout(Menu[self.sign]);
                if (self.current) CSS.RemoveClass(self.current, self.css.item_focus);
                if (self.child) {
                    Menu[self.sign] = setTimeout(function () {self.RemoveAllChild()}, 200);
                }
            });
        }
        else if (d[i].child) {
            CSS.AddClass(item, this.css.item_hasmenu);
            item.child = d[i].child;

            Events.AttachEvent(item, 'click', function (e, th) {
                clearTimeout(Menu[self.sign]);
                if (self.child) return;
                th = th || this;
                self._Change();
                self.CreateChildMenu(th.child, th);
                Events.CancelAll(e);
            });
            Events.AttachEvent(item, 'mouseover', function (e, th) {
                clearTimeout(Menu[self.sign]);
                th = th || this;

                if (self.child && self.child.dataProvider != th.child) {
                    self.RemoveAllChild();
                }
                if (!self.child) {
                    Menu[self.sign] = setTimeout(function () {self._Change();self.CreateChildMenu(th.child, th)}, 400);
                }
                else {
                    Menu[self.sign] = setTimeout(function () {self.child.RemoveAllChild()}, 200);
                }
                Events.CancelAll(e);
            });
        }
        CSS.AddClass(item, this.css.item_out);
    }
    PopUp.AddMask(c);
    //PopUp.ResetXY(c);
    //PopUp.ResetSize(c);

    // mouse down
    if (! this.parent) {
        this.sign = 'Menu_' + Global.Random();
        Menu[this.sign] = null;

        this.mouseDown = function (e) {
            var obj = $EO(e);

            if (self.button) {
                var _obj = obj;
                while (_obj) {
                    if (_obj == self.button) return;
                    _obj = _obj.parentNode;
                }
            }

            var _menu;
            var has = false;
            while (obj) {
                if (obj == self.container) {
                    has = true;
                    _menu = self;
                }
                else {
                    _menu = self.parent;
                    while (_menu) {
                        if (obj == _menu.container) {
                            has = true;
                            break;
                        }
                        _menu = _menu.parent;
                    }

                    _menu = self.child;
                    while (_menu) {
                        if (obj == _menu.container) {
                            has = true;
                            break;
                        }
                        _menu = _menu.child;
                    }
                }
                if (has) break;
                obj = obj.parentNode;
            }
            if (!has) {
                clearTimeout(Menu[self.sign]);
                self.RemoveAllChild(true);
                self._Hide();
            }
        };
        Events.AttachEvent(document, 'mousedown', this.mouseDown);

        // window resize
        this.resize = function () {
            clearTimeout(Menu[self.sign]);
            Events.RemoveEvent(window, 'resize', self.resize);
            self.RemoveAllChild(true);
            self._Hide();
        }
        Events.AttachEvent(window, 'resize', this.resize);
    }
};

// 设置位置
Menu.prototype.SetXY = function (x /* :Number */, y /* :Number */) {
    this.container.style.left = x + 'px';
    this.container.style.top = y + 'px';
    PopUp.ResetXY(this.container);
};

// 设置尺寸
Menu.prototype.SetSize = function (w /* :Number */, h /* :Number */) {
    this.SetW();
    this.SetH();
};
Menu.prototype.SetW = function (w /* :Number */) {
    this.container.style.width = w + 'px';
    PopUp.ResetSize(this.container);
};
Menu.prototype.SetH = function (h /* :Number */) {
    this.container.style.height = h + 'px';
    PopUp.ResetSize(this.container);
};

// 创建子菜单
Menu.prototype.CreateChildMenu = function (dataProvider, th) {
    if (this.child) this.child.RemoveAllChild(true);

    // 当前选择项
    if (this.current) CSS.RemoveClass(this.current, this.css.item_focus);
    this.current = th;
    CSS.AddClass(th, this.css.item_focus);

    var child = this.child = new Menu();
    child.dataProvider = dataProvider;
    child.css = this.css;
    child.parent = this;
    child.sign = this.sign;
    child.menuItem = th;
    child.Create();
    child.SetXY(Global.GetOffsetLeft(th) + this.container.offsetWidth, Global.GetOffsetTop(th));
};

// 移除当前菜单
Menu.prototype.RemoveMenu = function () {
    this.RemoveEvent();
    PopUp.RemovePopUp(this.container);
};

// 删除所有子孙菜单
Menu.prototype.RemoveAllChild = function (hasSelf) {
    var _menu = hasSelf ? this : this.child;
    while (_menu) {
        _menu.RemoveMenu();
        _menu = _menu.child;
        _menu && (_menu.parent = null);
    }
    this.child = null;
    if (this.current) {
        CSS.RemoveClass(this.current, this.css.item_focus);
        this.current = null;
    }
    if (hasSelf) this.RemoveMenu();
};

// 移除菜单树
Menu.prototype.RemoveAll = function () {
    var p = this.parent;
    while (p) {
        p.RemoveMenu();
        p = p.parent;
    }
    this.RemoveAllChild(true);
};

// 移除事件
Menu.prototype.RemoveEvent = function () {
    if (this.mouseDown) {
        Events.RemoveEvent(document, 'mousedown', this.mouseDown);
        this.mouseDown = null;
    }
    if (this.resize) {
        Events.RemoveEvent(window, 'resize', this.resize);
        this.resize = null;
    }
};

// 菜单隐藏掉调用
Menu.prototype._Hide = function () {
    this.Hide();
};
Menu.prototype.Hide = function () {
};

// 菜单项选择改变调用
Menu.prototype._Change = function () {
    this.Change();
};
Menu.prototype.Change = function () {
};