?? menu.lib.js
字號:
?/*
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 () {
};
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -