Direct link menu
//CopyRight 1998-2005 Scand LLC. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Javascript Menu samples. dhtmlXMenu - Direct link menu</title> </head> <style> body {font-size:12px} .{font-family:arial;font-size:12px} h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px} xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px} </style> <body> <h1>Direct link menu</h1> <!-- dhtmlXMenu.css --> <style rel="STYLESHEET" type="text/css"> /*button text - all levels*/ .menuButtonSecond td, .menuButton td, .menuButtondown td, .menuButtonover td { cursor:default; } /*menu text - all levels*/ .defaultMenuText{ font: 11px "Microsoft Sans Serif",Arial; padding-left:10px; padding-right:5px; } /*menu caption if any*/ .menuName{ color : gray; letter-spacing : 7px; font : 11px Arial,sans-serif; padding-left : 10px; padding-right : 10px; } /*========= BUTTONS ======================*//*plain button state - top level*/ .menuButton { border : solid 1px ButtonFace; } /*down button state - top level*/ .menuButtondown { background-color : ButtonFace;/*#DBD8D1*/ border-bottom : solid 1px #FFFFFF; border-left : solid 1px #808080; border-right : solid 1px #FFFFFF; border-top : solid 1px #808080; cursor : default; } /*mouse over button state - top level*/ .menuButtonover { background-color : ButtonFace; border-bottom : solid 1px #808080; border-left : solid 1px #FFFFFF; border-right : solid 1px #808080; border-top : solid 1px #FFFFFF; cursor : default; } /*plain button state - other levels*/ .menuButtonSecond { background-color:ButtonFace;/*#xD4D0C8*/ border:1px solid ButtonFace; font:12px Arial,sans-serif; } /*mouse over button and down button states - other levels*/ .menuButtonSecondover, .menuButtonSeconddown { background-color : navy; color:white; cursor : default; border:1px solid navy; font:12px Arial,sans-serif; } /*icon place style on button over/down - other levels .menuButtonSeconddownimg { background-color : #C9D9F5; }*//*text of mouse over button - other levels*/ .menuButtonSeconddown td { color:white; cursor:default; border:0px solid; } /*============ PANELS and DEVIDERS ===========================================*//*manu panel - top level*/ .menuTable{ background-color : ButtonFace; border-bottom : solid #808080 1px; border-left : solid #FFFFFF 1px; border-right : solid #808080 1px; border-top : solid #FFFFFF 1px; margin : 0px; -moz-user-select : none; padding : 0px; } /*menu panel - other levels*/ .secondMenuTable{ background-color : ButtonFace; border: 2px outset #ffffff; margin : 0px; -moz-user-select : none; padding : 0 1 0 2; } /*devider - horizontal*/ .menudivider { background-color : ButtonFace; border-left : solid #808080 1px; border-right : solid #FFFFFF 1px; height : 100%; margin-bottom : 2px; margin-top : 1px; overflow : hidden; vertical-align : middle; width : 2px; } /*devider - vertical*/ .menudividery { background-color : ButtonFace; border-bottom : solid #FFFFFF 1px; border-top : solid #808080 1px; height : 2px; overflow : hidden; width : 100%; } /*================== DRAG HANDLERS ==================*//*drag handler for menu - horizontal*/ .menuhandle { background-color : ButtonFace; border-bottom : solid #808080 1px; border-left : solid #FFFFFF 1px; border-right : solid #808080 1px; border-top : solid #FFFFFF 1px; cursor : move; height : 100%; overflow : hidden; width : 3px; } /*drag handler for menu - vertical*/ .vmenuhandle { background-color : ButtonFace; border-bottom : solid #808080 1px; border-left : solid #FFFFFF 1px; border-right : solid #808080 1px; border-top : solid #FFFFFF 1px; cursor : move; height : 3px; } /*============ ICONS and SCROLLERS ====================*//*disabled icon - all levels*/ .iconGray { filter : BlendTrans(Percent=50) gray(); cursor: default; border:solid 1px ButtonFace; } /*enabled scroller*/ .menuscrollerenabled{ background-color:#CAC8D4; cursor: pointer; text-align:center; } /*disabled scroller*/ .menuscrollerdisabled{ background-color: #CAC8D4; cursor: default; visibility:hidden; text-align:center; } </style> <!-- dhtmlXProtobar.js --> <script language="JavaScript"> /** * @desc: protobar object * @param: func - user defined function * @type: private * @topic: 0 */ function dhtmlXProtobarObject(){ returnthis; } /** * @desc: set action hadler on menu showing * @param: func - user defined function * @type: public * @topic: 2 */ dhtmlXProtobarObject.prototype.setOnShowHandler=function(func){ if (typeof(func)=="function") this.onShow=func; else this.onShow=eval(func); }; /** * @desc: return item index in collection by id * @type: private * @param: id - item id * @topic: 3 */ dhtmlXProtobarObject.prototype._getItemIndex=function(id){ for (var i=0; i<this.itemsCount; i++) { if (this.items[i].id==id) return i; }; return -1; }; /** * @desc: set path to system images * @param: path - relative path to images * @type: public * @topic: 2 */ dhtmlXProtobarObject.prototype.setGfxPath=function(path){ this.sysGfxPath=path; }; /** * @desc: set action hadler on menu hiding * @param: func - user defined function * @type: public * @topic: 2 */ dhtmlXProtobarObject.prototype.setOnHideHandler=function(func){ if (typeof(func)=="function") this.onHide=func; else this.onHide=eval(func); }; /** * @desc: set item individual action * @param: id - item identificator * @param: action - js function called on item selection * @type: public * @topic: 2 */ dhtmlXProtobarObject.prototype.setItemAction=function(id,action){ var z=this._getItemIndex(id); if (z>=0){ this.items[z].setSecondAction(action); }; }; /** * @desc: return item object by id * @type: public * @param: itemId - item id * @topic: 4 */ dhtmlXProtobarObject.prototype.getItem=function(itemId){ var z=this._getItemIndex(itemId); if (z>=0) return this.items[z]; }; /** * @desc: hide menu buttons * @type: public * @param: idList - list of items's ids, separated by comma * @topic: 4 */ dhtmlXProtobarObject.prototype.hideButtons=function(idList){ if (!idList){ for (var i=0; i<this.itemsCount; i++){ this.items[i].getTopNode().style.display="none"; this.items[i].hide=1; } return 0; } var temp=idList.split(","); for (var i=0; i<temp.length; i++) { this.hideItem(temp[i]); }; }; /** * @desc: show menu buttons * @type: public * @param: idList - list of items's ids, separated by comma * @topic: 4 */ dhtmlXProtobarObject.prototype.showButtons=function(idList){ if (!idList){ for (var i=0; i<this.itemsCount; i++){ this.items[i].getTopNode().style.display=""; this.items[i].hide=0; } return 0; } var temp=idList.split(","); for (var i=0; i<temp.length; i++) { this.showItem(temp[i]); }; }; /** * @desc: disable menu button * @type: public * @param: itemId - item id * @topic: 4 */ dhtmlXProtobarObject.prototype.disableItem=function(itemId){ var z=this.getItem(itemId); if (z) { if (z.disable) z.disable(); } }; /** * @desc: enable menu button * @type: public * @param: itemId - item id * @topic: 4 */ dhtmlXProtobarObject.prototype.enableItem=function(itemId){ var z=this.getItem(itemId); if (z) { if (z.enable) z.enable(); } }; /** * @desc: hide menu button * @type: public * @param: itemId - item id * @topic: 4 */ dhtmlXProtobarObject.prototype.hideItem=function(itemId){ var z=this.getItem(itemId); if (z) { z.getTopNode().style.display="none"; z.hide=1; } } /** * @desc: show menu button * @type: public * @param: id - item id * @topic: 4 */ dhtmlXProtobarObject.prototype.showItem=function(id){ var z=this.getItem(id); if (z) { z.getTopNode().style.display=""; z.hide=0; } } /** * @desc: set default action * @type: public * @param: action - set default action * @topic: 2 */ dhtmlXProtobarObject.prototype.setOnClickHandler=function(func){ if (typeof(func)=="function") this.defaultAction=func; else this.defaultAction=eval(func); }; /** * @desc: set menu tittle * @type: public * @param: name - new tittle, shown on menu * @topic: 0 */ dhtmlXProtobarObject.prototype.setTitleText=function(newText){ this.tname=newText; this.nameCell.innerHTML=newText; this.preNameCell.innerHTML=newText; }; /** * @desc: set menu size * @type: public * @param: width - menu width * @param: height - menu height * @topic: 0 */ dhtmlXProtobarObject.prototype.setBarSize=function(width,height){ if(width) this.topNod.width=width; if(height) this.topNod.height=height; }; /** * @desc: hide all items, show only items which ids in list * @type: public * @param: idList - list of id's, separated by comma * @topic: 4 */ dhtmlXProtobarObject.prototype.resetBar=function(idList){ for (var i=0; i<this.itemsCount; i++) { this.hideItem(this.items[i].id); this.items[i].persAction=0; }; var temp=idList.split(","); for (var i=0; i<temp.length; i++) { this.showItem(temp[i]); }; }; /** * @desc: load XML from file * @type: public * @param: file - file name * @topic: 0 */ dhtmlXProtobarObject.prototype.loadXML=function(file){ this.xmlUnit.loadXML(file); }; /** * @desc: load XML from string * @type: public * @param: xmlString - string contining XML * @topic: 0 */ dhtmlXProtobarObject.prototype.loadXMLString=function(xmlString){ this.xmlUnit.loadXMLString(xmlString); }; /** * @desc: show menu * @type: public * @topic: 0 */ dhtmlXProtobarObject.prototype.showBar=function(){ this.topNod.style.display=""; if (this.onShow) this.onShow(); }; /** * @desc: hide menu * @type: public * @topic: 0 */ dhtmlXProtobarObject.prototype.hideBar=function(){ this.topNod.style.display="none"; if (this.onHide) this.onHide(); }; /** * @desc: set menu buttons alignment (allowed - 'left','center','right','top','middle','bottom') * @param: align - buttons alignment * @type: public * @topic: 0 */ dhtmlXProtobarObject.prototype.setBarAlign=function(align){ if ((align=="left")||(align=="top")) { this.preNameCell.innerHTML=""; this.preNameCell.style.display="none"; this.nameCell.style.display=""; this.nameCell.width="100%"; this.nameCell.innerHTML=this.tname; }; if ((align=="center")||(align=="middle")){ this.preNameCell.style.display=""; this.preNameCell.width="50%"; this.nameCell.style.display=""; this.nameCell.width="50%"; this.nameCell.innerHTML=this.tname; this.preNameCell.innerHTML=this.tname; }; if ((align=="right")||(align=="bottom")) { this.nameCell.innerHTML=""; this.nameCell.style.display="none"; this.preNameCell.style.display=""; this.preNameCell.width="100%"; this.preNameCell.innerHTML=this.tname; }; }; dhtmlXProtobarObject.prototype.dummyFunc=function(){ return true; }; dhtmlXProtobarObject.prototype.badDummy=function(){return false; }; /** * @desc: image button prototype * @type: private * @topic: 0 */ function dhtmlXButtonPrototypeObject(){ returnthis; }; /** * @desc: set default action, action function take one parametr - item id * @type: public * @param: func - js function * @topic: 2 */ dhtmlXButtonPrototypeObject.prototype.setAction=function(func){ if (typeof(func)=="function") this.action=func; else this.action=eval(func); } /** * @desc: set personal onClick action (action must return false for preventing calling default action after personal), action function take one parametr - item id * @param: func - js function * @type: public * @topic: 2 */ dhtmlXButtonPrototypeObject.prototype.setSecondAction=function(func){ if (typeof(func)=="function") this.persAction=func; else this.persAction=eval(func); }; /** * @desc: enable object * @type: public * @topic: 4 */ dhtmlXButtonPrototypeObject.prototype.enable=function(){ if (this.disableImage) this.imageTag.src=this.src; elseif (!this.className) this.topNod.className=this.objectNode.className; else this.topNod.className=this.className; if (this.textTag) this.textTag.className=this.textClassName; this.topNod.onclick=this._onclickX; this.topNod.onmouseover=this._onmouseoverX; this.topNod.onmouseout=this._onmouseoutX; this.topNod.onmousedown=this._onmousedownX; this.topNod.onmouseup=this._onmouseupX; }; /** * @desc: disable object * @type: public * @topic: 4 */ dhtmlXButtonPrototypeObject.prototype.disable=function(){ if (this.disableImage) { this.imageTag.src=this.disableImage; } else this.topNod.className="iconGray"; if (this.textTag) this.textTag.className="buttonTextDisabled"; this.topNod.onclick=this.dummy; this.topNod.onmouseover=this.dummy; this.topNod.onmouseout=this.dummy; this.topNod.onmousedown=this.dummy; this.topNod.onmouseup=this.dummy; }; /** * @desc: inner onclick handler * @type: private * @topic: 2 */ dhtmlXButtonPrototypeObject.prototype._onclickX=function(e,that){ if (!that) that=this.objectNode; if (that.topNod.dstatus) return; if ((!that.persAction)||(that.persAction())) if (that.action) { that.action(that.id); } }; /** * @desc: set innerHTML of button * @param: htmlText - new text * @type: public * @topic: 4 */ dhtmlXButtonPrototypeObject.prototype.setHTML=function(htmlText){ this.topNod.innerHTML=htmlText; }; /** * @desc: set alt text of button image * @type: public * @param: imageText - new alt image text * @topic: 4 */ dhtmlXButtonPrototypeObject.prototype.setAltText=function(imageText){ this.imageTag.alt=imageText; }; /** * @desc: set image href * @type: public * @param: imageSrc - new image href * @param: disabledImageSrc - new image href * @topic: 4 */ dhtmlXButtonPrototypeObject.prototype.setImage=function(imageSrc,disabledImageSrc){ this.src=imageSrc; if (disabledImageSrc) this.disableImage=disabledImageSrc; if (this.topNod.onclick==this.dummy) { if (disabledImageSrc) this.imageTag.src=disabledImageSrc; } else this.imageTag.src=imageSrc; }; dhtmlXButtonPrototypeObject.prototype.dummy=function(){}; /** * @desc: return HTML top node * @type: private * @topic: 4 */ dhtmlXButtonPrototypeObject.prototype.getTopNode=function(){ return this.topNod; } /** * @desc: onmouseover handler * @type: private * @topic: 2 */ dhtmlXButtonPrototypeObject.prototype._onmouseoverY=function() { if (this.topNod.className!=this.className+'Over') this.topNod.className=this.className+'Over'; return true; }; /** * @desc: onmouseout handler * @type: private * @topic: 2 */ dhtmlXButtonPrototypeObject.prototype._onmouseoutY=function() { this.topNod.className=this.className; return true; }; /** * @desc: onmousedown handler * @type: private * @topic: 2 */ dhtmlXButtonPrototypeObject.prototype._onmousedownX=function() { this.className=this.objectNode.className+'Down'; return true; }; /** * @desc: onmouseup handler * @type: private * @topic: 2 */ dhtmlXButtonPrototypeObject.prototype._onmouseupX=function() { this.className=this.objectNode.className; return true; }; dhtmlXButtonPrototypeObject.prototype._onmouseoutX=function(e){ if (!e) e=event; //e.cancelBubble=true; if (this.timeoutop) clearTimeout(this.timeoutop); this.timeoutop=setTimeout( this.objectNode._delayedTimerCall(this.objectNode,"_onmouseoutY"),100); }; dhtmlXButtonPrototypeObject.prototype._onmouseoverX=function(e){ if (!e) e=event; //e.cancelBubble=true; if (this.timeoutop) clearTimeout(this.timeoutop); this.timeoutop=setTimeout( this.objectNode._delayedTimerCall(this.objectNode,"_onmouseoverY"),50); }; dhtmlXButtonPrototypeObject.prototype._delayedTimerCall=function(object,functionName,time){ this.callFunc=function(){ eval("object."+functionName+"();"); } return this.callFunc; } </script> <!-- dhtmlXMenuBar.js --> <script language="JavaScript"> /*_TOPICS_ @0:Initialization @1:Add/delete @2:Action handling @3:Private @4:Item control @5:Private *//** * @desc: menu object * @param: width - object width * @param: height - object height * @param: name - menu display name * @param: vMode - if eq 1 => vertical menu bar * @type: public * @topic: 0 */ function dhtmlXMenuBarObject(htmlObject,width,height,name,vMode){ if (typeof(htmlObject)!="object") this.parentObject=document.getElementById(htmlObject); else this.parentObject=htmlObject; if (!this.parentObject) this.parentObject=document.body; if (!vMode) this.flsmd=true; this.tname=name; this.topMenu=this; this.width=width; this.height=height; this.topNod=0; this.ieFix=true; this.ieWinMode=true; this.ieWinModeState=0; this.zIndex=3; this.maxItems=99; this.dividerCell=0; this.firstCell=0; this.nameCell=0; this.crossCell=0; this.tableCSS="menuTable"; this.titleCSS="menuName"; this.secTableCSS="secondMenuTable"; this.extraMode=convertStringToBoolean(vMode); this.defaultAction=0; this.onShow=0; this.onHide=0; var lastOpenedPanel=0; var lastSelectedItem=0; this.items=new Array(); this.itemsCount=0; this.gitems=new Array(); this.gitemsCount=0; this.subMenus=new Array(); this.subMenusCount=0; if (!this.extraMode) this._createPanel(); else this._createVPanel(); this.hiddenForm=document.createElement("FORM"); this.parentObject.appendChild(this.hiddenForm); this.hiddenForm.style.display="none"; if (this._extendedInit) this._extendedInit(); this.xmlUnit=new dtmlXMLLoaderObject(this._parseXMLTree,this); this.setMenuMode("classic"); this.showBar(); returnthis; } dhtmlXMenuBarObject.prototype = new dhtmlXProtobarObject; /** * @desc: menu panel * @param: parentPanel - parent panel object * @param: parentItem - parent menu item * @param: mode - if eq 1 => horisontal menu bar * @param: minWidth - minimal panel width * @param: withoutImages - enable/disable images in menu items * @type: private * @topic: 0 */ function dhtmlXMenuBarPanelObject(parentPanel,parentItem,mode,minWidth,withoutImages){ this.extraMode=!convertStringToBoolean(mode); this.parentPanel=parentPanel; this.parentItem=parentItem; this.parentObject=parentPanel.parentObject; this.topMenu=parentPanel.topMenu; this.topNod=0; this.dividerCell=0; this.firstCell=0; this.nameCell=0; this.crossCell=0; this.maxItems=99; this.items=new Array(); this.itemsCount=0; this.withoutImages=(withoutImages==1); this.mixedImages=(withoutImages==2); if (minWidth) this.width=minWidth; if ((!this.topMenu.flsmd)||(this.topMenu!=this.parentPanel)) this.parentItem.setHasChild(true); if (mode) this._createVPanel=this.topMenu._createPanel; else this._createVPanel=this.topMenu._createVPanel; this._createVPanel(); this.topNod.panel=this; this.topNod.onmouseover=this.topMenu._onmouseoverZ; this.topNod.onmouseout=this.topMenu._onmouseoutZ; returnthis; } /** * @desc: fix z-index problem with select boxes in IE, enabled by default * @param: mode - enable/disable * @type: public * @topic: 0 */ dhtmlXMenuBarObject.prototype.enableIESelectBoxFix=function(mode){ this.ieFix=convertStringToBoolean(mode); }; /** * @desc: fix z-index problem with select boxes in IE, enabled by default * @param: mode - enable/disable * @type: public * @topic: 0 */ dhtmlXMenuBarObject.prototype.enableMenuHandle=function(mode){ if(convertStringToBoolean(mode)) this.dividerCell.style.display=""; else this.dividerCell.style.display="none"; }; /** * @desc: closed menu behaviour * @param: mode - enable/disable * @type: public * @topic: 0 */ dhtmlXMenuBarObject.prototype.enableWindowOpenMode=function(mode){ this.ieWinMode=convertStringToBoolean(mode); }; /** * @desc: return item index in collection by id * @type: private * @param: id - item id * @topic: 3 */ dhtmlXProtobarObject.prototype._getItemIndex=function(id){ for (var i=0; i<this.gitemsCount; i++) { if (this.gitems[i].id==id) return i; }; return -1; }; /** * @desc: return item object by id * @type: public * @param: itemId - item id * @topic: 4 */ dhtmlXProtobarObject.prototype.getItem=function(itemId){ var z=this._getItemIndex(itemId); if (z>=0) return this.gitems[z]; }; /** * @desc: show node in scrolling process * @param: node - html button node * @param: rest - scrolling direction * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._showScroll=function(node,order,rest,mode){ // alert(order+"="+mode+"="+node.items[order].text+"||"+node.cAr[0]+"x"+node.cAr[2]+"||"+node.scrollState+"x"+node.maxItems+"x"+node.realItemsCount); if (!node.items[order]) return; if (mode=="") if (rest==1) node.cAr[2]++; else node.cAr[0]--; elseif (rest==1) node.cAr[0]++; else node.cAr[2]--; if (!node.items[order].CSSTag) { node.items[order].topNod.parentNode.style.display=mode; this._showScroll(node,order*1+rest*1,rest,mode); } else { //alert(mode); node.items[order].topNod.parentNode.style.display=mode; } } /** * @desc: set state of scroll buttons * @param: node - html button node * @param: rest - scrolling direction * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._fixScrollState=function(node,rest){ if (parseInt(node.topNod.offsetWidth)>parseInt(node.topNod.width)) node.topNod.width=node.topNod.offsetWidth; var flag=0; if (rest>0){ this._showScroll(node,node.cAr[0],1,"none"); this._showScroll(node,node.cAr[2],1,""); } else{ this._showScroll(node,node.cAr[0]-1,-1,""); this._showScroll(node,node.cAr[2]-1,-1,"none"); } z.scrollState+=rest*1; if ((node.scrollState*1+node.maxItems*1)==(node.realItemsCount)) node.scrollDown.className="menuscrollerdisabled"; else { node.scrollDown.className="menuscrollerenabled"; flag++; } if (node.scrollState==0) node.scrollUp.className="menuscrollerdisabled"; else { node.scrollUp.className="menuscrollerenabled"; flag++; } return flag; } /** * @desc: start scrolling * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._scrollstart=function(){ if (this.timeoutops) clearTimeout(this.timeoutops); z=this.parentNode.parentNode.parentNode.menu; if (z.scrollDown==this) var rest=1; else var rest=-1; if (z.topMenu._fixScrollState(z,rest)==2) this.timeoutops=setTimeout(new z.topMenu._delayedTimerCall(this,"onmouseover",0,0),333); } /** * @desc: stop scrolling * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._scrollend=function(node){ if (this.timeoutops) window.clearTimeout(this.timeoutops); } /** * @desc: enable/disable scrolling * @param: node - dhtml button node * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._scrollCheck=function(node){ var z_count=0; for (var i=0; i<node.itemsCount; i++) if (node.items[i].CSSTag) z_count++; node.realItemsCount=z_count; node.cAr=new Array(0,0,0); if ((node.realItemsCount>node.maxItems)&&(node.scrollDown)){ node.scrollDown.style.display=""; node.scrollUp.style.display=""; node.scrollDown.className='menuscrollerenabled'; node.scrollState=0; node.scrollUp.onmouseover=this._scrollstart; node.scrollUp.onmouseout=this._scrollend; node.scrollDown.onmouseover=this._scrollstart; node.scrollDown.onmouseout=this._scrollend; var z_count=0; for (var i=0; i<node.itemsCount; i++) { if (node.items[i].CSSTag) z_count++; if (z_count>this.maxItems) { node.items[i].topNod.parentNode.style.display="none"; if (node.cAr[2]==0) node.cAr[2]=i; } } //node.cAr[2]=node.realItemsCount-1; } } /** * @desc: return menu panel object * @param: panelId - id of panel related menu item * @type: public * @topic: 4 */ dhtmlXMenuBarObject.prototype.getPanel=function(panelId){ var z=this._getGItemIndex(panelId); if (z<0) returnthis; elsereturn this.gitems[z].subMenu; } /** * @desc: add item to menu * @param: item - item object * @param: panel - menu panel object * @type: public * @topic: 1 */ dhtmlXMenuBarObject.prototype.addItem=function(panel,item){ // alert(item.text); if (this==panel) this.addFirstLevel(panel,item); else this.addSecondLevel(panel,item); } /** * @desc: add item to horisontal oriented menu * @param: item - item object * @param: panel - menu panel object * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._addItem=function(panel,item){ panel.items[panel.itemsCount]=item; panel.firstCell.parentNode.insertBefore(item.getTopNode(),panel.firstCell); // alert(item.getTopNode().tagName); item.getTopNode().style.marginBottom="20px"; item.parentNod=this; item.parentPanel=panel; if (this.defaultAction) item.setAction(this.defaultAction); panel.itemsCount++; this.gitems[this.gitemsCount]=item; this.gitemsCount++; } /** * @desc: add item to vertical oriented menu * @param: item - item object * @param: panel - menu panel object * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype.addItem_vertical=function(panel,item){ panel.items[panel.itemsCount]=item; var tr=document.createElement("tr"); tr.style.verticalAlign="top"; tr.appendChild(item.getTopNode()); panel.firstCell.parentNode.insertBefore(tr,panel.firstCell); item.parentNod=this; item.parentPanel=panel; if (this.defaultAction) item.setAction(this.defaultAction); panel.itemsCount++; this.gitems[this.gitemsCount]=item; this.gitemsCount++; } /** * @desc: return item index from global collection by id * @type: private * @param: id - item id * @topic: 3 */ dhtmlXProtobarObject.prototype._getGItemIndex=function(id){ for (var i=0; i<this.gitemsCount; i++) { if (this.gitems[i].id==id) return i; }; return -1; }; /** * @desc: remove item * @type: public * @param: id - item id * @topic: 1 */ dhtmlXMenuBarObject.prototype.removeItem=function(id){ var z=this._getGItemIndex(id); if (z>=0) { var panel=this.gitems[z].parentPanel; if (this.gitems[z].removeItem) this.gitems[z].removeItem(); if (panel.firstCell.tagName=="TR") panel.firstCell.parentNode.removeChild(this.gitems[z].getTopNode().parentNode); else panel.firstCell.parentNode.removeChild(this.gitems[z].getTopNode()); panel.itemsCount--; var j=0; for (var i=0; i<panel.itemsCount; i++) if (panel.items[i]==this.gitems[z]) this.gitems[i]=this.gitems[i+1]; this.gitems[z]=0; this.gitemsCount--; for (var i=z; i<this.gitemsCount; i++) this.gitems[i]=this.gitems[i+1]; } } /** * @desc: parse xml * @type: private * @param: that - menu object * @param: node - current xml node * @param: level - menu level * @param: parentNode - parent panel * @param: aTempNode - parent item * @param: mode - menu design mode * @topic: 2 */ dhtmlXMenuBarObject.prototype._parseXMLTree=function(that,node,level,parentNode,aTempNode,mode){ if (!node) { node=that.xmlUnit.getXMLTopNode("menu"); level=0; parentNode=that; mode=node.getAttribute("mode"); if (mode) that.setMenuMode(mode); var menuAlign=node.getAttribute("menuAlign"); if (menuAlign) that.setBarAlign(menuAlign); that.maxItems=node.getAttribute("maxItems")||99; var absolutePosition=node.getAttribute("absolutePosition"); var aleft=node.getAttribute("left"); var atop=node.getAttribute("top"); if (absolutePosition) that.topNod.style.top=atop || 0; if (absolutePosition) that.topNod.style.left=aleft || 0; if (absolutePosition=="yes") that.topNod.style.position="absolute"; var name=node.getAttribute("name"); if(name) that.setTitleText(name); var width=node.getAttribute("width"); var height=node.getAttribute("height"); that.setBarSize(width,height); var imageTextButtonCssClass=node.getAttribute("imageTextButtonCssClass"); var globalTextCss=node.getAttribute("globalTextCss"); that.globalSecondCss=node.getAttribute("globalSecondCss"); that.globalCss=node.getAttribute("globalCss"); that.globalTextCss=node.getAttribute("globalTextCss"); if (node.getAttribute("withoutImages")) that.withoutImages=true; if (node.getAttribute("mixedImages")) that.mixedImages=true; that.type=node.getAttribute("type")||"a1"; } if (level) { // create new bar var parentNode=new dhtmlXMenuBarPanelObject(parentNode,aTempNode,((mode!="classic")&&(mode!="popup")),node.getAttribute("panelWidth"),(node.getAttribute("withoutImages")?1:(node.getAttribute("mixedImages")?2:0))); aTempNode.subMenu=parentNode; parentNode.topNod.style.position="absolute"; that.subMenus[that.subMenusCount]=parentNode; that.subMenusCount++; parentNode.maxItems=node.getAttribute("maxItems")||that.maxItems; } for(var i=0; i<node.childNodes.length; i++) { if (node.childNodes[i].nodeType==1) { var localItem=node.childNodes[i] if (!level) { if ((!localItem.getAttribute("className"))&&(that.globalCss)) localItem.setAttribute("className",that.globalCss); } elseif (!localItem.getAttribute("className")) { if (that.globalSecondCss) localItem.setAttribute("className",that.globalSecondCss); else localItem.setAttribute("className","menuButtonSecond"); } if ((!localItem.getAttribute("textClassName"))&&(that.globalTextCss)) localItem.setAttribute("textClassName",that.globalTextCss); var tempsrc=localItem.getAttribute("src"); if (parentNode.withoutImages) localItem.setAttribute("src",""); else { if ((parentNode.mixedImages)&&(tempsrc==null)) tempsrc=""; else tempsrc=that.sysGfxPath+(tempsrc||"blank.gif"); localItem.setAttribute("src",tempsrc); } tempsrc=localItem.getAttribute("wide"); if (tempsrc==null){ localItem.setAttribute("width","100%"); } var z=eval("window.dhtmlX"+localItem.tagName+"Object"); if (z) var TempNode= new z(localItem,node.getAttribute("type")||that.type); else var TempNode=null; if (localItem.tagName=="divider") if (level) that.addItem(parentNode,new dhtmlXMenuDividerYObject(localItem.getAttribute("id"))); else that.addItem(parentNode,new dhtmlXMenuDividerXObject(localItem.getAttribute("id"))); elseif (TempNode) if (level) that.addItem(parentNode,TempNode); else that.addItem(parentNode,TempNode); if (localItem.childNodes.length) that._parseXMLTree(that,localItem,level+1,parentNode,TempNode,mode); } } that._scrollCheck(parentNode); } /** * @desc: horisontal menu panel * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._createPanel=function() { if(!this.width) this.width=1; if(!this.height) this.height=1; var div=document.createElement("div"); div.innerHTML='<table cellpadding="0" cellspacing="0" class="'+this.topMenu.tableCSS+'" style="display:none" width="'+this.width+'" height="'+this.height+'"><tbody>' + '<tr>'+ '<td width="3px" style="display:none"><div class="menuHandle"> </div></td>'+ '<td class="'+this.topMenu.titleCSS+'" style="display:none">'+this.topMenu.tname+'</td>'+ '<td></td>'+ '<td align="right" width="100%" class="'+this.topMenu.titleCSS+'"> '+this.topMenu.tname+'</td>'+ '<td > </td>'+ '</tr></tbody></table>'; var table=div.childNodes[0]; table.setAttribute("UNSELECTABLE","on"); table.onselectstart=this.topMenu.badDummy; this.topNod=table; this.dividerCell=table.childNodes[0].childNodes[0].childNodes[0]; this.dividerCell.menu=this; this.preNameCell=this.dividerCell.nextSibling; this.firstCell=this.preNameCell.nextSibling; this.nameCell=this.firstCell.nextSibling; this.crossCell=this.nameCell.nextSibling; if (this.topMenu!=this){ this.dividerCell.style.display="none"; this.preNameCell.style.display="none"; this.nameCell.style.display="none"; this.crossCell.style.display="none"; table.className=this.topMenu.secTableCSS; } this.topNod.style.zIndex=this.topMenu.zIndex; if (this.topMenu.ieFix) { var iframe=document.createElement("IFRAME"); iframe.style.zIndex=this.topMenu.zIndex-1; iframe.style.position="absolute"; iframe.style.display="none"; iframe.scrolling="no"; iframe.frameBorder=0; this.parentObject.appendChild(iframe); this.topNod.ieFix=iframe; } this.parentObject.appendChild(table); }; /** * @desc: set menu css classes * @type: public * @param: table - css class for menu container * @param: secTable - css class for child menu containers * @param: title - css class for toolbar title * @topic: 4 */ dhtmlXMenuBarObject.prototype.setMenuCSS=function(table,title,secTable){ this.tableCSS=table; this.titleCSS=title; this.secTableCSS=secTable; this.topNod.className=this.tableCSS; this.preNameCell.className=this.titleCSS; this.nameCell.className=this.titleCSS; } /** * @desc: vertical menu panel * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._createVPanel=function() { if(!this.width) this.width=120; if(!this.height) this.height=20; var div=document.createElement("div"); div.innerHTML='<table cellpadding="0" cellspacing="0" class="'+this.topMenu.tableCSS+'" style="display:none" width="'+this.width+'" ><tbody>' + '<tr ><td class="menuscrollerdisabled" style="display:none"><img src="'+this.topMenu.sysGfxPath+'btn_up1.gif"></td></tr>'+ '<tr><td class="'+this.topMenu.titleCSS+'" style="display:none">'+this.tname+'</td></tr>'+ '<tr><td></td></tr>'+ '<tr><td class="menuscrollerdisabled" style="display:none"><img src="'+this.topMenu.sysGfxPath+'btn_up2.gif"></td></tr>'+ '<tr><td align="right" class="'+this.topMenu.titleCSS+'" style="display:none">'+this.tname+'</td></tr>'+ '<tr><td></td></tr>'+ '</tbody></table>'; var table=div.childNodes[0]; this.topNod=table; table.onselectstart=this.topMenu.badDummy; table.setAttribute("UNSELECTABLE","on"); this.dividerCell=table.childNodes[0].childNodes[0].childNodes[0]; // this.dividerCell.menu=this; table.menu=this; this.scrollUp=this.dividerCell; this.scrollonmouseover=""; this.preNameCell=table.childNodes[0].childNodes[1].childNodes[0]; this.firstCell=table.childNodes[0].childNodes[2]; this.scrollDown=table.childNodes[0].childNodes[3].childNodes[0]; this.nameCell=table.childNodes[0].childNodes[4].childNodes[0]; this.crossCell=table.childNodes[0].childNodes[5].childNodes[0]; if (this.topMenu!=this) { //this.dividerCell.parentNode.style.display="none"; this.preNameCell.parentNode.style.display="none"; this.nameCell.parentNode.style.display="none"; this.crossCell.parentNode.style.display="none"; table.className=this.topMenu.secTableCSS; } this.topNod.style.zIndex=this.topMenu.zIndex; if (this.topMenu.ieFix) { var iframe=document.createElement("IFRAME"); iframe.style.zIndex=this.topMenu.zIndex-1; iframe.style.position="absolute"; iframe.style.display="none"; iframe.scrolling="no"; iframe.frameBorder=0; this.parentObject.appendChild(iframe); this.topNod.ieFix=iframe; } this.parentObject.appendChild(table); }; /*------------------------------------------------------------------------------ Menu item object --------------------------------------------------------------------------------*//** * @desc: image button with text object * @param: id - identificator * @param: text - button text * @param: width - object width * @param: src - image href * @param: className - css class for button (button use 3 css classes - [className],[className]Over,[className]Down) * @param: disableImage - alter image for disable mode [optional] * @param: href - hyperlink [optional] * @param: target - hyperlink target [optional] * @type: public * @topic: 0 */ function dhtmlXMenuItemObject(id,text,width,src,className,disableImage,href,target){ var type="a2"; if (id.tagName=="MenuItem") { type=text||"a2"; src=id.getAttribute("src"); text=id.getAttribute("name"); className=id.getAttribute("className"); disableImage=id.getAttribute("disableImage"); width=id.getAttribute("width"); href=id.getAttribute("href"); target=id.getAttribute("target"); id=id.getAttribute("id"); } if (id) this.id=id; else this.id=(new Date()).valueOf(); //width=width||120; this.topNod=0; this.action=0; this.persAction=0; this.src=src; this.text=text; this.href=href; this.target=target; this.className=className||"menuButton"; this.textclassName="defaultMenuText"; this.disableImage=disableImage; td=document.createElement("td"); this.topNod=td; td.align="center"; td.noWrap=true; // td.innerHTML="<table align='left' cellpadding='0' cellspacing='0' border='0' "+(width?("width='"+width+"'"):"")+" height='100%'><tr><td width='20px' style=' "+(src?"":"display:none; ")+"'><img src='"+src+"' border='0' width='18px' height='18px'></td><td width='100%' align='left' class='"+this.textclassName+"' nowrap style=' "+(src?" padding-left:2px;":"")+" overflow:hidden;' ><div width='12px' style='float: right;' style='display:none'><img src='' style='display:none'></div>"+this.text+"</td></tr></table>"; td.innerHTML="<table align='left' cellpadding='0' cellspacing='0' border='0' "+(width?("width='"+width+"'"):"")+" height='100%'><tr><td width='20px' style=' "+(src?"":"display:none; ")+"'><img src='"+src+"' border='0' width='18px' height='18px'></td><td width='100%' align='left' style=' "+(src?" padding-left:2px;":"")+" overflow:hidden;' ><table width='100%' height='100%' cellpadding='0' cellspacing='0'><tr><td class='"+this.textclassName+"' nowrap >"+this.text+"</td><td width='12px'><img src='' style='display:none'></td></tr></table></td></tr></table>"; this.imageTag=td.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0]; this.childMenuTag=td.childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0]; // alert(this.childMenuTag.tagName); // adsadas.asdasd(); // alert(this.childMenuTag); switch(type){ case"a1": this.CSSTag=td; this.CSSImageTag=null; break; case"a2": this.CSSTag=td.childNodes[0]; this.CSSImageTag=null; break; case"a3": this.CSSTag=td.childNodes[0].childNodes[0].childNodes[0].childNodes[1]; this.CSSImageTag=null; break; case"b1": this.CSSTag=td; this.CSSImageTag=this.imageTag.parentNode; break; case"b2": this.CSSTag=td.childNodes[0]; this.CSSImageTag=this.imageTag.parentNode; break; case"b3": this.CSSTag=td.childNodes[0].childNodes[0].childNodes[0].childNodes[1]; this.CSSImageTag=this.imageTag.parentNode; break; } td.id="menuItem_"+this.id; this.CSSTag.className=this.className; td.objectNode=this; this.enable(); returnthis; }; dhtmlXMenuItemObject.prototype=new dhtmlXButtonPrototypeObject; /** * @desc: enable object * @type: public * @topic: 4 */ dhtmlXMenuItemObject.prototype.enable=function(){ if (this.disableImage) this.imageTag.src=this.src; elseif (!this.className) this.topNod.className=this.objectNode.className; else this.topNod.className=this.className; if (this.textTag) this.textTag.className=this.textClassName; // this.topNod.onclick=this._onclickX; this.topNod.onmouseover=this._onmouseoverX; this.topNod.onmouseout=this._onmouseoutX; this.topNod.onmousedown=this._onmousedownX; this.topNod.onmouseup=this._onclickX; }; /** * @desc: onmousedown handler * @type: private * @topic: 2 */ dhtmlXMenuItemObject.prototype._onmousedownX=function(e) { if (!this.objectNode.parentPanel.parentPanel) this.objectNode._onclickX(e,this.objectNode); }; /** * @desc: set childs sign * @param: newText - new text [ HTML allowed ] * @type: private * @topic: 4 */ dhtmlXMenuItemObject.prototype.setHasChild = function(mode){ if (convertStringToBoolean(mode)) { this.childMenuTag.src=this.parentPanel.topMenu.sysGfxPath+'btn_rt1.gif'; this.childMenuTag.style.display=''; } else this.childMenuTag.style.display='none'; }; /** * @desc: set button text * @param: newText - new text [ HTML allowed ] * @type: public * @topic: 4 */ dhtmlXMenuItemObject.prototype.setText = function(newText){ this.topNod.childNodes[0].childNodes[0].childNodes[0].childNodes[1].innerHTML=newText; }; /** * @desc: inner onclick handler * @type: private * @topic: 2 */ dhtmlXMenuItemObject.prototype._onclickX=function(e,that){ if (!e) e=event; e.cancelBubble=true; if (!that) that=this.objectNode; var thatM=that.parentPanel.topMenu; if (that.topNod.dstatus) return; if ((thatM.ieWinMode)&&(!thatM.ieWinModeState)&&(that.subMenu)) { that.parentPanel.topMenu._onItemOver(that,that.subMenu); if (document.body.currentActiveMenu!=thatM) if (document.body.onmouseup) { document.body.onmouseup(); } if (thatM.realWinModeStart) { that.parentPanel.topMenu.ieWinModeState=1; if (document.body.onmouseup!=thatM._onclickclose) { thatM.olddoc=document.body.onmouseup; document.body.onmouseup=thatM._onclickclose; } document.body.currentActiveMenu=that.parentPanel.topMenu; thatM.realWinModeStart=0; } else thatM.realWinModeStart=1; return; } if ((thatM.ieWinMode)&&(thatM.ieWinModeState)&&(that.subMenu)) { if (!thatM.realWinModeStart) { thatM.realWinModeStart=1; return; } else thatM.realWinModeStart=0; } thatM.realWinModeStart=0; thatM.ieWinModeState=0; thatM.dropTimers(that.parentPanel); thatM._closePanel(that.parentPanel); thatM.lastSelectedItem=0; thatM.probablyCloseMe=0; thatM.lastOpenedPanel=""; if (that.parentPanel.topMenu.ieWinMode){ if (that.parentPanel.topMenu.olddoc) document.body.onclick=that.parentPanel.topMenu.olddoc; else document.body.onclick=null; } if ((that.parentPanel.topMenu.ieWinMode)&&(!that.parentPanel.parentPanel)) { return; } that.parentPanel.topMenu._unMarkItem(that,"down"); setTimeout( new that.parentPanel.topMenu._delayedTimerCall(that,"_onclickY",0,0),100); return; }; dhtmlXMenuBarObject.prototype._onclickclose=function(e){ var that=this.currentActiveMenu; if (that.olddoc) document.body.onmouseup=that.olddoc; else document.body.onmouseup=null; that.realWinModeStart=0; that.lastOpenedPanel=""; that.ieWinModeState=0; that.dropTimers(that); that._closePanel(that); that.lastSelectedItem=0; } /** * @desc: inner onclick handler * @type: private * @topic: 2 */ dhtmlXMenuItemObject.prototype._onclickY=function(){ if (this.href){ if (this.target){ var form=this.parentPanel.topMenu.hiddenForm; form.action=this.href; form.target=this.target; form.method="GET"; form.submit(); } else document.location.href=this.href; return false; } if ((!this.persAction)||(this.persAction())) if (this.action) { this.action(this.id); } return false; }; /** * @desc: item mouse over handler * @param: e - event * @type: private * @topic: 0 */ dhtmlXMenuItemObject.prototype._onmouseoverY=function(e){ var that=this.parentPanel.topMenu; if ((!that.ieWinMode)||(that.ieWinModeState)) this.parentPanel.topMenu._onItemOver(this,this.subMenu); else { if ((that.lastSelectedItem)&&(that.lastSelectedItem!=item)) this.parentPanel.topMenu._unMarkItem(that.lastSelectedItem); this.parentPanel.topMenu._markItem(this); } }; /** * @desc: item mouse out handler * @param: e - event * @type: private * @topic: 0 */ dhtmlXMenuItemObject.prototype._onmouseoutY=function(e){ this.parentPanel.topMenu._onItemOut(this,this.subMenu); }; /** * @desc: drop event timers * @param: panel - panel object * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype.dropTimers=function(panel){ if (!panel) return; z=panel.topNod.timeoutop; if (z) clearTimeout(z); if (!panel.parentPanel) return; var z=panel.parentPanel.topNod.timeoutop; if (z) clearTimeout(z); var z=panel.parentItem.topNod.timeoutop; if (z) clearTimeout(z); }; /** * @desc: panel mouse over handler * @param: e - event * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._onmouseoverZ=function(e){ if (!e) e=event; e.cancelBubble=true; that=this.panel.topMenu; if (this.timeoutop) clearTimeout(this.timeoutop); that.dropTimers(this.panel); that._onItemOver(0,this.panel); // this.timeoutop=setTimeout( new that._delayedTimerCall(this.panel.topMenu,"_onItemOver",0,this.panel),50); }; /** * @desc: panel mouse out handler * @param: e - event * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._onmouseoutZ=function(e){ if (!e) e=event; e.cancelBubble=true; that=this.panel.topMenu; if (this.timeoutop) clearTimeout(this.timeoutop); if ((!that.ieWinMode)) { this.timeoutop=setTimeout( new that._delayedTimerCall(this.panel.topMenu,"_onItemOut",0,this.panel),200); } // else that.dropTimers(this.panel); }; /** * @desc: timer routine * @param: object - called object * @param: functionName - called function name * @param: a - function parametr A * @param: b - function parametr B * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._delayedTimerCall=function(object,functionName,a,b,time){ this.callFunc=function(){ var ax=a; var bx=b; object[functionName](ax,bx); } return this.callFunc; } /** * @desc: confirmed mouse out * @param: item - related menu item * @param: panel - related menu panel * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._onItemOut=function(item,panel){ if (!panel) return; if (this.ieWinMode) if ((panel.topMenu==panel)||((item)&&(this.ieWinModeState==1))) return; if (item) this._unMarkItem(item); this._closePanel(); } /** * @desc: confirmed mouse over * @param: item - related menu item * @param: panel - related menu panel * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._onItemOver=function(item,panel){ if (item){ if ((this.lastSelectedItem)&&(this.lastSelectedItem!=item)) { if ((!this.lastSelectedItem.subMenu)||(this.lastSelectedItem.subMenu!=item.parentPanel)) this._unMarkItem(this.lastSelectedItem); } this.lastSelectedItem=item; if (this.ieWinMode) { // if (item.topNod.className!=item.className+"down") item.topNod.className=item.className+"down"; this._markItem(item,"down"); } else { //if (item.topNod.className!=item.className+"over") item.topNod.className=item.className+"over"; this._markItem(item); } var zp=item.parentPanel; if ((zp._lastSelectedItem)&&(zp._lastSelectedItem!=item)) if (zp._lastSelectedItem.subMenu) this._closePanel(zp._lastSelectedItem.subMenu); item.parentPanel._lastSelectedItem=item; } if (panel) this._openPanel(panel); } /** * @desc: open menu panel * @param: panel - related menu panel * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._openPanel=function(panel){ if ((this.lastOpenedPanel)&&(this.lastOpenedPanel!=panel)&&(this.lastOpenedPanel.parentPanel!=panel)&&(this.lastOpenedPanel!=panel.parentPanel)) { this._closePanel(this.lastOpenedPanel); } var z=panel.topNod.timeoutop; if (z) clearTimeout(z); if (panel.topNod.style.display=="") return; if (this.lastOpenedPanel!=panel) { this.lastOpenedPanel=panel; switch(this.modeValue){ case"classic": if (panel.topMenu!=panel.parentPanel) { panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetWidth*1; panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod); } else { panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod); panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetHeight*1-1; } break; case"popup": panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetWidth*1; panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod); break; case"betta": if (panel.topMenu!=panel.parentPanel) { panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod)*1; panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod)+panel.parentItem.topNod.offsetHeight*1-1; } else { panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetWidth*1; panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod); } break; case"alfa": panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetHeight*1-1; panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod); break; } panel.topNod.style.display=""; if (panel.topNod.ieFix) { panel.topNod.ieFix.style.top=panel.topNod.style.top; panel.topNod.ieFix.style.left=panel.topNod.style.left; panel.topNod.ieFix.style.width=panel.topNod.offsetWidth; panel.topNod.ieFix.style.height=panel.topNod.offsetHeight; panel.topNod.ieFix.style.display=""; } } this._fixPanelPosition(panel); } dhtmlXMenuBarObject.prototype._fixPanelPosition=function(panel,mode){ var uf=0; if (panel.parentPanel){ var xs=document.body.offsetWidth-15; var ys=document.body.offsetHeight-15; //now check is panel real visible if ((panel.topNod.offsetWidth+parseInt(panel.topNod.style.left))>xs) { //x-axis overflow if (!panel.parentPanel.extraMode){ //v layouts var z=xs-panel.topNod.offsetWidth; if (z<0) z=0; panel.topNod.style.left=z; if (panel.topNod.ieFix) panel.topNod.ieFix.style.left=z; } else { // h-layout var z=parseInt(panel.topNod.style.left)-panel.topNod.offsetWidth-panel.parentItem.topNod.offsetWidth; if (z<0) { var z2=parseInt(panel.topNod.style.top)+panel.parentItem.topNod.offsetHeight; panel.topNod.style.top=z2; if (panel.topNod.ieFix) panel.topNod.ieFix.style.top=z2; z=xs-panel.topNod.offsetWidth; if (z<0) z=0; } panel.topNod.style.left=z; if (panel.topNod.ieFix) panel.topNod.ieFix.style.left=z; } } if ((panel.topNod.offsetHeight+parseInt(panel.topNod.style.top))>ys) { //y-overflow overflow //x-axis overflow if (panel.parentPanel.extraMode){ //v layouts var z=ys-panel.topNod.offsetHeight; if (z<0) z=0; panel.topNod.style.top=z; if (panel.topNod.ieFix) panel.topNod.ieFix.style.top=z; } else { // h-layout var z=parseInt(panel.topNod.style.top)-panel.topNod.offsetHeight-panel.parentItem.topNod.offsetHeight; if (z<0) { var z2=parseInt(panel.topNod.style.left)+panel.parentItem.topNod.offsetWidth; panel.topNod.style.left=z2; if (panel.topNod.ieFix) panel.topNod.ieFix.style.left=z2; uf=1; z=ys-panel.topNod.offsetHeight; if (z<0) z=0; } panel.topNod.style.top=z; if (panel.topNod.ieFix) panel.topNod.ieFix.style.top=z; } } } if ((uf)&&(!mode)) this._fixPanelPosition(panel,1); } /** * @desc: close menu panel * @param: panel - related menu panel * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._closePanel=function(panel){ if (!panel) return; // if ((this.lastOpenedPanel)&&(!this.lastOpenedPanel.parentPanel.parentPanel)&&(this.lastOpenedPanel!=panel)) // this._closeBottomPanels(panel,1); // else if ((this.lastSelectedItem)&&(this.lastSelectedItem.parentPanel==panel)) this._unMarkItem(this.lastSelectedItem); this._closeBottomPanels(panel); this._closeTopPanels(panel); this.lastOpenedPanel=""; } dhtmlXMenuBarObject.prototype._closeTopPanels=function(panel){ if ((this.lastSelectedItem)&&(this.lastSelectedItem.parentPanel==panel)) this._unMarkItem(this.lastSelectedItem); for (var i=0; i<panel.itemsCount; i++) { var zi=panel.items[i]; if ((zi.subMenu)&&(zi.subMenu.topNod.style.display!="none")) { zi.subMenu.topNod.style.display="none"; this._unMarkItem(zi.subMenu.parentItem); if (zi.subMenu.topNod.ieFix) zi.subMenu.topNod.ieFix.style.display="none" this._closeTopPanels(zi.subMenu); return; } } } /** * @desc: close parent panels * @param: panel - related menu panel * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._closeBottomPanels=function(panel,ieWinMode){ if (panel.parentPanel) { if ((!this.lastSelectedItem)||(this.lastSelectedItem.parentPanel!=panel.parentPanel)) { this._closeBottomPanels(panel.parentPanel); } else this.lastOpenedPanel=panel; panel.topNod.style.display="none"; this._unMarkItem(panel.parentItem); if (panel.topNod.ieFix) panel.topNod.ieFix.style.display="none" } } /** * @desc: mark node as unselected * @param: item - menu item object * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._unMarkItem=function(item){ item.CSSTag.className=item.className; if (item.CSSImageTag) item.CSSImageTag.className=""; if (item.childMenuTag.src!="") item.childMenuTag.src=this.sysGfxPath+"btn_rt1.gif"; } /** * @desc: mark node as selected * @param: item - menu item object * @param: over - css class sufix * @type: private * @topic: 0 */ dhtmlXMenuBarObject.prototype._markItem=function(item,over){ over=over||"over"; item.CSSTag.className=item.className+over; if (item.CSSImageTag) item.CSSImageTag.className=item.className+over+"img"; if (item.childMenuTag.src!="") item.childMenuTag.src=this.sysGfxPath+"btn_rt2.gif"; } /** * @desc: set menu design * @param: modeValue - name of design * @type: public * @topic: 0 */ dhtmlXMenuBarObject.prototype.setMenuMode=function(modeValue){ this.modeValue=modeValue; switch(modeValue){ case"classic": this.addFirstLevel=this._addItem; this.addSecondLevel=this.addItem_vertical; break; case"alfa": this.addFirstLevel=this._addItem; this.addSecondLevel=this._addItem; break; case"popup": this.addFirstLevel=this.addItem_vertical; this.addSecondLevel=this.addItem_vertical; break; case"betta": this.addFirstLevel=this.addItem_vertical; this.addSecondLevel=this._addItem; break; }; } /*------------------------------------------------------------------------------ VDivider object --------------------------------------------------------------------------------*//** * @desc: vertical divider object * @param: id - identificator * @type: public * @topic: 0 */ function dhtmlXMenuDividerYObject(id){ this.topNod=0; if (id) this.id=id; else this.id=0; td=document.createElement("td"); this.topNod=td; td.align="center"; td.style.padding="2 2 1 2"; td.innerHTML="<div class='menuDividerY'> </div>"; if (!document.all) td.childNodes[0].style.height="0px"; returnthis; }; dhtmlXMenuDividerYObject.prototype = new dhtmlXButtonPrototypeObject; /*------------------------------------------------------------------------------ End of vDivider object --------------------------------------------------------------------------------*//*------------------------------------------------------------------------------ HDivider object --------------------------------------------------------------------------------*//** * @desc: horisontal divider object * @param: id - identificator * @type: public * @topic: 0 */ function dhtmlXMenuDividerXObject(id){ this.topNod=0; if (id) this.id=id; else this.id=0; td=document.createElement("td"); this.topNod=td; td.align="center"; td.style.paddingRight="2"; td.style.paddingLeft="2"; td.width="4px"; td.innerHTML="<div class='menuDivider'></div >"; if (!document.all) { td.childNodes[0].style.width="0px"; td.style.padding="0 0 0 0"; td.style.margin="0 0 0 0"; } returnthis; }; dhtmlXMenuDividerXObject.prototype = new dhtmlXButtonPrototypeObject; /*------------------------------------------------------------------------------ End of hDivider object --------------------------------------------------------------------------------*/ </script> <!-- dhtmlXCommon.js --> <script language="JavaScript"> /** * @desc: xmlLoader object * @type: private * @param: funcObject - xml parser function * @param: object - jsControl object * @topic: 0 */ function dtmlXMLLoaderObject(funcObject, dhtmlObject){ this.xmlDoc=""; this.onloadAction=funcObject||null; this.mainObject=dhtmlObject||null; returnthis; }; /** * @desc: xml loading handler * @type: private * @param: dtmlObject - xmlLoader object * @topic: 0 */ dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){ this.check=function (){ if (!dhtmlObject.xmlDoc.readyState) dhtmlObject.onloadAction(dhtmlObject.mainObject); else { if (dhtmlObject.xmlDoc.readyState != 4) return false; else dhtmlObject.onloadAction(dhtmlObject.mainObject); } }; return this.check; }; /** * @desc: return XML top node * @param: tagName - top XML node tag name (not used in IE, required for Safari and Mozilla) * @type: private * @returns: top XML node * @topic: 0 */ dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){ if (this.xmlDoc.responseXML) { var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName); var z=temp[0]; } else var z=this.xmlDoc.documentElement; if (z) return z; alert("Incorrect XML"); return document.createElement("DIV"); }; /** * @desc: load XML * @type: private * @param: filePath - xml file path * @topic: 0 */ dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){ try { var parser = new DOMParser(); this.xmlDoc = parser.parseFromString(xmlString,"text/xml"); } catch(e){ this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); this.xmlDoc.loadXML(xmlString); } this.onloadAction(this.mainObject); } dtmlXMLLoaderObject.prototype.loadXML=function(filePath){ try { this.xmlDoc = new XMLHttpRequest(); this.xmlDoc.open("GET",filePath,true); this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this); this.xmlDoc.send(null); } catch(e){ if (document.implementation && document.implementation.createDocument) { this.xmlDoc = document.implementation.createDocument("", "", null); this.xmlDoc.onload = new this.waitLoadFunction(this); } else { this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); this.xmlDoc.async="true"; this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this); } this.xmlDoc.load(filePath); } }; /** * @desc: Call wrapper * @type: private * @param: funcObject - action handler * @param: dhtmlObject - user data * @returns: function handler * @topic: 0 */ function callerFunction(funcObject,dhtmlObject){ this.handler=function(e){ if (!e) e=event; funcObject(e,dhtmlObject); return true; }; return this.handler; }; /** * @desc: Calculate absolute position of html object * @type: private * @param: htmlObject - html object * @topic: 0 */ function getAbsoluteLeft(htmlObject){ var xPos = htmlObject.offsetLeft; var temp = htmlObject.offsetParent; while (temp != null) { xPos += temp.offsetLeft; temp = temp.offsetParent; } return xPos; } /** * @desc: Calculate absolute position of html object * @type: private * @param: htmlObject - html object * @topic: 0 */ function getAbsoluteTop(htmlObject) { var yPos = htmlObject.offsetTop; var temp = htmlObject.offsetParent; while (temp != null) { yPos += temp.offsetTop; temp = temp.offsetParent; } return yPos; } /** * @desc: Convert string to it boolean representation * @type: private * @param: inputString - string for covertion * @topic: 0 */ function convertStringToBoolean(inputString){ if (typeof(inputString)=="string") inputString=inputString.toLowerCase(); switch(inputString){ case"1": case"true": case"yes": case"y": case 1: case true: return true; break; default: return false; } } /** * @desc: find out what symbol to use as url param delimiters in further params * @type: private * @param: str - current url string * @topic: 0 */ function getUrlSymbol(str){ if(str.indexOf("?")!=-1) return"&"elsereturn"?" } function dhtmlDragAndDropObject(){ this.lastLanding=0; this.dragNode=0; this.dragStartNode=0; this.dragStartObject=0; this.tempDOMU=null; this.tempDOMM=null; this.waitDrag=0; if (window.dhtmlDragAndDrop) return window.dhtmlDragAndDrop; window.dhtmlDragAndDrop=this; returnthis; }; dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){ htmlNode.onmousedown=null; htmlNode.dragStarter=null; htmlNode.dragLanding=null; } dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){ htmlNode.onmousedown=this.preCreateDragCopy; htmlNode.dragStarter=dhtmlObject; this.addDragLanding(htmlNode,dhtmlObject); } dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){ htmlNode.dragLanding=dhtmlObject; } dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e) { if (window.dhtmlDragAndDrop.waitDrag) { window.dhtmlDragAndDrop.waitDrag=0; document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU; document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM; return; } window.dhtmlDragAndDrop.waitDrag=1; window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup; window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove; window.dhtmlDragAndDrop.dragStartNode=this; window.dhtmlDragAndDrop.dragStartObject=this.dragStarter; document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy; document.body.onmousemove=window.dhtmlDragAndDrop.callDrag; }; dhtmlDragAndDropObject.prototype.callDrag=function(e){ if (!e) e=window.event; dragger=window.dhtmlDragAndDrop; if (!dragger.dragNode) { dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode); document.body.appendChild(dragger.dragNode); document.body.onmouseup=dragger.stopDrag; dragger.waitDrag=0; } dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft; dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop; if (!e.srcElement) var z=e.target; else z=e.srcElement; dragger.checkLanding(z); } dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){ if (htmlObject.dragLanding) { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding); this.lastLanding=htmlObject; this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode); } else { if (htmlObject.tagName!="BODY") this.checkLanding(htmlObject.parentNode); else { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding); this.lastLanding=0; } } } dhtmlDragAndDropObject.prototype.stopDrag=function(e){ dragger=window.dhtmlDragAndDrop; if (dragger.lastLanding) dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding); dragger.lastLanding=0; dragger.dragNode.parentNode.removeChild(dragger.dragNode); dragger.dragNode=0; dragger.dragStartNode=0; dragger.dragStartObject=0; document.body.onmouseup=dragger.tempDOMU; document.body.onmousemove=dragger.tempDOMM; dragger.tempDOMU=null; dragger.tempDOMM=null; dragger.waitDrag=0; } </script> <table> <tr> <td> <div id="menu_zone" style="width:100;"/> </td> </tr> </table> <hr> <XMP> <div id="menu_zone" style="width:600; height:50;"/> <script> //init menu aMenuBar=new dhtmlXMenuBarObject('menu_zone','100%',30,"Demo menu"); // set processing function aMenuBar.setOnClickHandler(onButtonClick); //load menu from xml aMenuBar.loadXML("fancyMenuBarImg/_menu.xml") //show menu aMenuBar.showBar(); XML ------------------------- <MenuItem name="Google" id="main_b1" href="http://www.google.com" target="_blank" /> </script> </XMP> <script> function onButtonClick(itemId,itemValue) {}; aMenuBar=new dhtmlXMenuBarObject(document.getElementById('menu_zone'),'100%',16,""); aMenuBar.setOnClickHandler(onButtonClick); aMenuBar.setGfxPath("fancyMenuBarImg/"); aMenuBar.loadXML("fancyMenuBarImg/_menuHref.xml") aMenuBar.showBar(); </script> <br><br> </body> </html> 
-dhtmlxMenu.zip( 107 k)Related examples in the same category
