I made this little thing after work
I imitate the toolbar of Office 2003, mainly trying not to use any pictures (of course it is impossible to make all the buttons), all the controls are made with Css and Javascript, and the menu is not made. I am lazy and happy.
Interested friends can contact me and we can communicate. Run code box
| The following is the quoted content: <html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title >Office 2003 imitation toolbar</title><script>/*----------Shunzi made Menu Javascript Made by PuterJamE-mail:[email protected] -----*/ var listnum=0; var menu_height; var menu_width; var menu_left; var menu_top; var topMar = 1; var leftMar = -2; var space = 1; var isvisible;function listbox(listname,buttonname, valuename){this.listname=listnamethis.buttonname=buttonnamethis.valuename=valuename}function listaction(obj,action,showlist,scroll,tw){num=obj.id.charAt(obj.id.length-1)if (! scroll) {scroll=0}if (!tw) {tw=105}listbox=eval(lb[num].listname)listbutton=eval(lb[num].buttonname)listvalue=eval(lb[num].valuename) switch (action) { case 0: listbox.className="getlist";listbutton.className="listover" break; case 1: if (listbox.gf=="0") {listbox.className="lostlist";listbutton. className="menubar"} break; case 2: for (i=0;i<lb.length;i++) { if (num!=i.toString()){ nlistbox=eval(lb[i].listname) nlistbutton =eval(lb[i].buttonname) nlistvalue=eval(lb[i].valuename) nlistbox.className="lostlist";nlistbutton.className="menubar" nlistbox.gf="0" } } ShowMenu(listbox,showlist ,tw,scroll);listbox.className="getlist";listbox.gf="1" listnum=num; break; }}function HideMenu() { var mX; var mY; var vDiv; var mDiv;if (isvisible = = true){vDiv = document.all("listDiv");mX = window.event.clientX + document.body.scrollLeft;mY = window.event.clientY + document.body.scrollTop;if ((mX < parseInt( vDiv.style.left)) || (mX > parseInt(vDiv.style.left)+vDiv.offsetWidth) || (mY < parseInt(vDiv.style.top)-menu_height) || (mY > parseInt(vDiv. style.top)+vDiv.offsetHeight)) {vDiv.style.visibility = "hidden";isvisible = false;}}if (isvisible==false){ for (i=0;i<lb.length;i++) { listbox=eval(lb[i].listname) listbutton=eval(lb[i].buttonname) listvalue=eval(lb[i].valuename) listbox.className="lostlist";listbutton.className="menubar" listbox. gf="0" }}}function ShowMenu(obj,vMnuCode,tWidth,scroll) {vMnuCode = "<table id='submenu' cellspacing=0 cellpadding=0 bgcolor=#ffffff border=0 style='width:"+ tWidth + ";border-collapse: collapse' class='listDiv'><tr height=23><td nowrap align=left>" + vMnuCode + "</td></tr></table>";menu_height = obj.offsetHeight;menu_width = obj.offsetWidth;menu_left = obj.offsetLeft + leftMar+2;menu_top = obj.offsetTop + topMar + menu_height + space-3;vParent = obj.offsetParent;while (vParent.tagName.toUpperCase() ! = "BODY"){menu_left += vParent.offsetLeft;menu_top += vParent.offsetTop;vParent = vParent.offsetParent;}listDiv.innerHTML = vMnuCode;listDiv.style.top = menu_top;listDiv.style.left = menu_left;if (scroll==0) {listDiv.style.overflow="visible";listDiv.style.width=tWidth}else {listDiv.style.overflow="scroll";listDiv.style.width=tWidth+18}listDiv.style .visibility = "visible";var cssopaction=submenu.filters[0].opacitysubmenu.filters[0].opacity=0; submenu.filters[1].Apply(); submenu.filters[0].opacity=100; submenu.filters[1].Play(); isvisible = true;}function menuitem(lightcolor,normalcolor,icon,title,url){this.lightcolor=lightcolorthis.normalcolor=normalcolorthis.icon=iconthis.title=titlethis.url= url}function bulidmenu(arrayname){var menuarray=eval(arrayname)menucontent='<table border="0" width="100%">'for (i=0;i<menuarray.length;i++){if ( menuarray[i].title!="_line"){if (menuarray[i].url!="_disable"){css="getitem"}else{css="lostitem"}if (menuarray[i].icon .length==0){content='<table cellspacing="0" cellpadding="0"><tr><td style="text-indent:4px" class="'+css+'">'+menuarray[ i].title+'</td></tr></table>'}else{content='<table cellspacing="0" cellpadding="0"><tr><td width="20" nowrap>< img src="'+menuarray[i].icon+'"></td><td class="'+css+'">'+menuarray[i].title+'</td></tr></table >'}if (menuarray[i].url!="_disable"){menucontent=menucontent+'<tr><td height=16 style="cursor:default" >'+content+'</td></tr> '}else{menucontent=menucontent+'<tr><td height=16 style="fitler:gray">'+content+'</td></tr>'}}else{menucontent=menucontent+'<tr><td height=4><img src="
Related Articles
|