271 lines
9.8 KiB
JavaScript
271 lines
9.8 KiB
JavaScript
|
/*
|
|||
|
|
* MenuBar只负责生成<div>，不会实现功能。
|
|||
|
|
* MenuBar的add()方法：bar.add("menu1", "item1", "http://www.qdmmy6.com/");
|
|||
|
|
* MenuBar的menus属性是一个数组（其时它是一个Map），每个元素对应一个menu。
|
|||
|
|
* 数组中的元素还是一个数组，这个数组中的元素是MenuItem对象。
|
|||
|
|
* add()方法首先查找menus["menu1"]元素（即名为"menu1"的菜单）是否存在，
|
|||
|
|
* 如果存在，使用"item1"与"http://www.qdmmy6.com/"创建MenuItem对象。然后把MenuItem对象添加到menus["menu1"]中去。
|
|||
|
|
* 如果不存在，先创建menus["menu1"]，在把MenuItem添加进去。
|
|||
|
|
*/
|
|||
|
|
function Q6MenuBar(objName, barName) {
|
|||
|
|
this.obj = objName;
|
|||
|
|
this.barName = barName;
|
|||
|
|
this.config = {
|
|||
|
|
topHeight:null,
|
|||
|
|
bottomHeight:null,
|
|||
|
|
width:null,
|
|||
|
|
radioButton:true,
|
|||
|
|
imgDir:"img/"
|
|||
|
|
};
|
|||
|
|
this.icon = {jiaIcon:"jia.png",jianIcon:"jian.png"};
|
|||
|
|
this.colorStyle = 2;
|
|||
|
|
this.colors = [];
|
|||
|
|
this.colors[0] = {
|
|||
|
|
menuBgColor:"rgb(246,133,1)",
|
|||
|
|
menuBorderColor:"rgb(236,171,87)",
|
|||
|
|
itemBgColor:"rgb(38,38,38)",
|
|||
|
|
itemBorderColor:"rgb(100,100,100)",
|
|||
|
|
itemBgMoveColor:"rgb(32,145,177)",
|
|||
|
|
itemBorderMoveColor:"rgb(119,171,113)",
|
|||
|
|
itemMoveColor:"rgb(255,255,255)",
|
|||
|
|
itemColor:"rgb(255,255,255)",
|
|||
|
|
menuBarColor:"rgb(255,255,255)",
|
|||
|
|
menuContentColor:"rgb(255,255,255)"
|
|||
|
|
};
|
|||
|
|
this.colors[2] = {
|
|||
|
|
itemBgMoveColor:"rgb(246,133,1)",
|
|||
|
|
itemBorderMoveColor:"rgb(236,171,87)",
|
|||
|
|
menuBgColor:"rgb(78,78,78)",//38
|
|||
|
|
menuBorderColor:"rgb(102,102,102)",//100
|
|||
|
|
itemBgColor:"rgb(32,145,177)",
|
|||
|
|
itemBorderColor:"rgb(119,171,113)",
|
|||
|
|
itemMoveColor:"rgb(255,255,255)",
|
|||
|
|
itemColor:"rgb(255,255,255)",
|
|||
|
|
menuBarColor:"rgb(255,255,255)",
|
|||
|
|
menuContentColor:"rgb(255,255,255)"
|
|||
|
|
};
|
|||
|
|
this.colors[1] = {
|
|||
|
|
menuBgColor:"rgb(25,119,176)",
|
|||
|
|
menuBorderColor:"rgb(211,211,211)",
|
|||
|
|
itemBgColor:"rgb(121,201,236)",
|
|||
|
|
itemBorderColor:"rgb(68,141,174)",
|
|||
|
|
itemBgMoveColor:"rgb(110,172,44)",
|
|||
|
|
itemBorderMoveColor:"rgb(172,221,74)",
|
|||
|
|
itemMoveColor:"rgb(255,255,255)",
|
|||
|
|
itemColor:"rgb(255,255,255)",
|
|||
|
|
menuBarColor:"rgb(255,255,255)",
|
|||
|
|
menuContentColor:"#333333"
|
|||
|
|
};
|
|||
|
|
this.colors[3] = {
|
|||
|
|
menuBgColor:"rgb(159,153,138)",
|
|||
|
|
menuBorderColor:"rgb(142,132,107)",
|
|||
|
|
itemBgColor:"rgb(254,238,189)",
|
|||
|
|
itemBorderColor:"rgb(164,91,19)",
|
|||
|
|
itemBgMoveColor:"rgb(252,211,61)",
|
|||
|
|
itemBorderMoveColor:"rgb(164,91,19)",
|
|||
|
|
itemMoveColor:"rgb(76,48,0)",
|
|||
|
|
itemColor:"rgb(0,116,199)",
|
|||
|
|
menuBarColor:"rgb(76,48,0)",
|
|||
|
|
menuContentColor:"rgb(76,48,0)"
|
|||
|
|
};
|
|||
|
|
this.colors[4] = {
|
|||
|
|
menuBgColor:"#15B69A",
|
|||
|
|
menuBorderColor:"gray",
|
|||
|
|
itemBgColor:"#EAFFFA",
|
|||
|
|
itemBorderColor:"#15B69A",
|
|||
|
|
itemBgMoveColor:"rgb(13,133,96)",
|
|||
|
|
itemBorderMoveColor:"gray",
|
|||
|
|
itemMoveColor:"#FFFFFF",
|
|||
|
|
itemColor:"gray",
|
|||
|
|
menuBarColor:"#FFFFFF",
|
|||
|
|
menuContentColor:"gray"
|
|||
|
|
};
|
|||
|
|
this.font = {
|
|||
|
|
};
|
|||
|
|
this.menus = [];
|
|||
|
|
//<div class="title" name="title"><span class="titleText">' + barName + '</span></div><div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* 添加方法
|
|||
|
|
* 首先查看this.menus[menuName]这个菜单（就是一个数组）是否存在。
|
|||
|
|
* 如果不存在，先创建这个菜单（数组）。
|
|||
|
|
* 使用menuItemName和url创建MenuItem对象，把MenuItem对象添加到菜单（数组）尾部。
|
|||
|
|
* frameName -- 指定在哪个帧中打开页面
|
|||
|
|
*/
|
|||
|
|
Q6MenuBar.prototype.add = function(menuName, menuItemName, url, frameName) {
|
|||
|
|
if (!this.menus[menuName]) {
|
|||
|
|
this.menus[menuName] = [];
|
|||
|
|
}
|
|||
|
|
var len = this.menus[menuName].length;
|
|||
|
|
this.menus[menuName][len] = new MenuItem(menuItemName, url, frameName);
|
|||
|
|
|
|||
|
|
// MenuItem类
|
|||
|
|
function MenuItem(menuItemName, url, frameName) {
|
|||
|
|
this.menuItemName = menuItemName;
|
|||
|
|
this.url = url;
|
|||
|
|
this.frameName = frameName;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
MenuBar的toString()方法
|
|||
|
|
该方法会生成与MenuBar相关的HTML代码，然后遍历menus属性，生成每个菜单对应HTML代码。
|
|||
|
|
*/
|
|||
|
|
Q6MenuBar.prototype.toString = function() {
|
|||
|
|
// menuBar对应的<div>
|
|||
|
|
var str = '<div style="border:1px solid' + this.colors[this.colorStyle].menuBorderColor + ';color:' + this.colors[this.colorStyle].menuBarColor + ';" class = "menuBar" name="menuBar" onClick="' + this.obj + '.showMenu(event, this)">\n';
|
|||
|
|
// menuBar的标题<div>
|
|||
|
|
str += '<div style="background-color:' + this.colors[this.colorStyle].menuBgColor + ';" class="barTitle" name="barTitle"><span class="barTitleText">' + this.barName + '</span></div>\n';
|
|||
|
|
// 使用循环添加每个菜单对应的HTML代码。
|
|||
|
|
for(var menuName in this.menus) {
|
|||
|
|
str += this.menu2Str(menuName);
|
|||
|
|
}
|
|||
|
|
// menuBar尾部对应的<div>
|
|||
|
|
str += '<div style="background-color:' + this.colors[this.colorStyle].menuBgColor + ';" name="barBottom" class="barBottom">';
|
|||
|
|
str += '</div>';
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* 该方法首先生成与菜单对应的HTML代码。
|
|||
|
|
* menuName是菜单名字，可以使用menus[menuName]来获取一维数组。
|
|||
|
|
* 遍历一维数组，获取其中每个MenuItem，生成MenuItem对应的HTML代码。
|
|||
|
|
*/
|
|||
|
|
Q6MenuBar.prototype.menu2Str = function(menuName){
|
|||
|
|
var icon = this.config.imgDir + this.icon.jiaIcon;
|
|||
|
|
// 菜单对应的<div>
|
|||
|
|
var str = '<div name="menu">\n';
|
|||
|
|
// 菜单标题对应的<div>，其中包含icon与text两部分。
|
|||
|
|
str += '<div style="background-color:' + this.colors[this.colorStyle].menuBgColor + ';border-right-color:' + this.colors[this.colorStyle].menuBorderColor + ';border-bottom-color:' + this.colors[this.colorStyle].menuBorderColor + ';" name="menuTitle" class="menuTitle"><span name="menuTitleIcon" class="menuTitleIcon"><img src="' + icon + '"/></span><span class="menuTitleText">' + menuName + '</span></div>\n';
|
|||
|
|
// 菜单内容对象的<div>，所有菜单荐都存放在这个<div>中。
|
|||
|
|
str += '<div style="color:' + this.colors[this.colorStyle].menuContentColor + ';" class="menuContent" name="menuContent">\n';
|
|||
|
|
// 使用循环添加每个MenuItem对应的HTML
|
|||
|
|
for(var i = 0; i < this.menus[menuName].length; i++) {
|
|||
|
|
str += this.item2Str(this.menus[menuName][i]);
|
|||
|
|
}
|
|||
|
|
str += '</div>\n</div>\n';
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* menuItem是MenuItem类型的对象。
|
|||
|
|
* 该方法生成menuItem对应的HTML代码。
|
|||
|
|
*/
|
|||
|
|
Q6MenuBar.prototype.item2Str = function(menuItem){
|
|||
|
|
return '<div style="border:1px solid ' + this.colors[this.colorStyle].itemBorderColor + ';background-color:' + this.colors[this.colorStyle].itemBgColor + '; color:' + this.colors[this.colorStyle].itemColor + ';" class="menuItem" onMouseMove="' + this.obj + '.itemMouseMove(this)" onMouseOut="' + this.obj + '.itemMouseOut(this)" onClick="skip(\'' + menuItem.url + '\', \'' + menuItem.frameName + '\')">' + menuItem.menuItemName + '</div>\n';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function skip(url, frameName) {
|
|||
|
|
if(parent[frameName]) {
|
|||
|
|
parent[frameName].location.href=url;
|
|||
|
|
} else {
|
|||
|
|
location.href=url;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
///////////////////////////
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
获取当前被点击的menu元素。
|
|||
|
|
只有点击：div menuTitle、img、menuTitleText，才获取父元素。
|
|||
|
|
如果父元素是menuContent，返回null。
|
|||
|
|
*/
|
|||
|
|
Q6MenuBar.prototype.getCurrMenu = function(res) {
|
|||
|
|
tagName = res.tagName;
|
|||
|
|
name = res.getAttribute("name");
|
|||
|
|
while(tagName != "DIV" || name != "menu") {
|
|||
|
|
// alert(tagName + ", " + name);
|
|||
|
|
res = res.parentNode;
|
|||
|
|
if(!res) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
tagName = res.tagName;
|
|||
|
|
name = res.getAttribute("name");
|
|||
|
|
if(tagName == "DIV" && name == "menuContent") {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Q6MenuBar.prototype.attr = function(ele, attrName) {
|
|||
|
|
if(ele.getAttribute) {
|
|||
|
|
return ele.getAttribute(attrName);
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Q6MenuBar.prototype.showMenu = function(evt, menuBar) {
|
|||
|
|
var e = evt ? evt : window.event;
|
|||
|
|
var res = e.srcElement || e.target;
|
|||
|
|
var menu = this.getCurrMenu(res);//获取当前被点击的menu
|
|||
|
|
if(!menu) return;
|
|||
|
|
this.openMenu(menuBar, menu);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开或关闭menu
|
|||
|
|
Q6MenuBar.prototype.openMenu = function(menuBar, menu) {
|
|||
|
|
var childs = menu.childNodes;//获取menuBar的所有子元素
|
|||
|
|
for(var i = 0; i < childs.length; i++) {
|
|||
|
|
//因为Firefor中，换行会出现空白节点，所以需要小心。
|
|||
|
|
//获取所有content元素
|
|||
|
|
if(this.attr(childs[i], "name") == 'menuContent') {
|
|||
|
|
var display = childs[i].style.display;
|
|||
|
|
if(!display || display=='none') {
|
|||
|
|
if (this.config.radioButton) {
|
|||
|
|
this.closeMenu(menuBar);//关闭所有menu
|
|||
|
|
}
|
|||
|
|
childs[i].style.display='block';//打开当前menu
|
|||
|
|
this.changeImg(menu, false);//更换当前menu图标
|
|||
|
|
} else {
|
|||
|
|
if (this.config.radioButton) {
|
|||
|
|
this.closeMenu(menuBar);//关闭所有menu
|
|||
|
|
}
|
|||
|
|
childs[i].style.display='none';
|
|||
|
|
this.changeImg(menu, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更换图片
|
|||
|
|
Q6MenuBar.prototype.changeImg = function (menu, flag) {
|
|||
|
|
var img = menu.getElementsByTagName("img")[0];
|
|||
|
|
var jiaIcon = this.config.imgDir + this.icon.jiaIcon;
|
|||
|
|
var jianIcon = this.config.imgDir + this.icon.jianIcon;
|
|||
|
|
img.src = flag ? jiaIcon : jianIcon;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭所有menu
|
|||
|
|
Q6MenuBar.prototype.closeMenu = function(menuBar) {
|
|||
|
|
var menus = menuBar.childNodes;
|
|||
|
|
//获取menuBar中所有menu
|
|||
|
|
for(var i=0; i < menus.length; i++) {
|
|||
|
|
if(this.attr(menus[i], 'name') != 'menu') continue;
|
|||
|
|
var childs = menus[i].childNodes;
|
|||
|
|
//获取当前menu中所有content
|
|||
|
|
for(var j = 0; j < childs.length; j++) {
|
|||
|
|
if(this.attr(childs[j], 'name') != 'menuContent') continue;
|
|||
|
|
childs[j].style.display='none';
|
|||
|
|
}
|
|||
|
|
this.changeImg(menus[i], true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Q6MenuBar.prototype.itemMouseMove = function(e) {
|
|||
|
|
e.style.border = "1px solid " + this.colors[this.colorStyle].itemBorderMoveColor;
|
|||
|
|
e.style.backgroundColor = this.colors[this.colorStyle].itemBgMoveColor;
|
|||
|
|
e.style.color = this.colors[this.colorStyle].itemMoveColor;
|
|||
|
|
e.style.fontWeight = "bold";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Q6MenuBar.prototype.itemMouseOut = function(e) {
|
|||
|
|
e.style.border = "1px solid " + this.colors[this.colorStyle].itemBorderColor;
|
|||
|
|
e.style.backgroundColor = this.colors[this.colorStyle].itemBgColor;
|
|||
|
|
e.style.color = this.colors[this.colorStyle].itemColor;
|
|||
|
|
e.style.fontWeight = "";
|
|||
|
|
}
|