outlookbar 实例

OB_BorderColor = '#98DEB0'; OB_BackgroundColor = '#D6E9DB'; OB_ButtonBorderColor = '#98DEB0'; OB_ButtonFontColor = '#00000'; OB_Width = '135'; OB_BorderWidth = '8'; document.write("<DIV id='OutlookLikeBar' style='position:absolute;top:"+OB_Top+";left:"+OB_Left+";width:"+OB_Width+";height:"+OB_Height+";border:"+OB_BorderWidth+" "+OB_BorderStyle+" "+OB_BorderColor+";background-color:"+OB_BackgroundColor+";z-index:0;visibility:hidden;clip:rect(0,"+OB_Width+","+OB_Height+",0)'>"); //document.write("<DIV id='test' style='POSITION: absolute; TOP: 0px; left:100px; WIDTH: 150px; Z-INDEX: 2')>"); //箭头的显示 document.write("<img onMouseUp='OutlookLikeBar.ArrowSelected(this)' onMouseDown='OutlookLikeBar.ArrowClicked(this)' onMouseOver='OutlookLikeBar.OverArrow(this)' onMouseOut='OutlookLikeBar.OutArrow(this)' id='OB_SlideUp' height='"+OB_ArrowHeight+"' width='"+OB_ArrowWidth+"' src='"+OB_DownArrow+"' style='position:absolute;top:0;left:0;cursor:hand;visibility:hidden;z-index:500'>"); document.write("<img onMouseUp='OutlookLikeBar.ArrowSelected(this)' onMouseDown='OutlookLikeBar.ArrowClicked(this)' onMouseOver='OutlookLikeBar.OverArrow(this)' onMouseOut='OutlookLikeBar.OutArrow(this)' id='OB_SlideDown' height='"+OB_ArrowHeight+"' width='"+OB_ArrowWidth+"' src='"+OB_UpArrow+"' style='position:absolute;top:0;left:0;cursor:hand;visibility:hidden;z-index:500'>"); j=1; while(eval("window.OutBarFolder"+j)) j++; i=j-1; while(i>0) { Folder=eval("OutBarFolder"+i) //window.status="Outlook-Like Bar is making folder '"+Folder[0]+"'"; if(i==1) { //document.write("<INPUT position='UP' id='OB_Button1' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='image' src=images/interface/wdlc.gif style='position:absolute;top:0;left:0;width:"+(OB_Width-OB_BorderWidth*2)+";height:"+OB_ButtonHeight+";border:4px "+OB_ButtonBorderColor+" solid'>"); document.write("<INPUT position='UP' id='OB_Button1' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='button' value='"+Folder[0]+"' style='position:absolute;top:0;left:0;background-image: url(images/interface/lefttitlebj.gif);background-color:"+OB_ButtonBGColor+";width:"+(OB_Width-OB_BorderWidth*2)+";height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"pt;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100;border:1px "+OB_ButtonBorderColor+" solid'>"); MakeItems(Folder,i,25); } else { //document.write("<INPUT position='DOWN' id='OB_Button"+i+"' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='image' src=images/interface/wdsy.gif style='position:absolute;top:"+(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+";left:0;width:"+(OB_Width-OB_BorderWidth*2)+";height:"+OB_ButtonHeight+";border:4px "+OB_ButtonBorderColor+" solid'>"); document.write("<INPUT position='DOWN' id='OB_Button"+i+"' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='button' value='"+Folder[0]+"' style='position:absolute;top:"+(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+";left:0;width:"+(OB_Width-OB_BorderWidth*2)+";height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";background-image: url(images/interface/lefttitlebj.gif);background-color:"+OB_ButtonBGColor+";font-size:"+OB_ButtonFontSize+"pt;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100;border:1px "+OB_ButtonBorderColor+" solid'>"); MakeItems(Folder,i,(OB_Height-(j-i)*25-OB_BorderWidth*2)+25); } i--; } document.write("</DIV>"); var OutlookLikeBar=new OutBar(OB_Width,OB_Height,j-1,OB_ButtonHeight,OB_BorderWidth,OB_SlideSpeed,OB_IconsHeight+OB_LabelFontSize+OB_LabelMargin+OB_ItemsSpacing,OB_ArrowSlideSpeed); //window.status="Outlook-Like Bar successful created!"; document.all["OutlookLikeBar"].style.visibility="visible"; /*以下的代码中你需要改动菜单的数目与实际一致，本例用了4个按钮菜单。*/ function StringWrap(s){ var len; var r=""; var tmp=s; var maxlen=5; len=s.length; if(len<=maxlen) return s; while(len>maxlen){ r+=tmp.substr(0,maxlen); tmp=tmp.substr(maxlen); len=tmp.length; if(len!=0) r+="<br>"; } r+=tmp; return r; } function MakeItems(Folder,zorder,top) {//菜单的显示 var items=0; var folderWidth=(OB_Width-OB_BorderWidth*2); while(Folder[items+1]) items+=lypmenucount; //需要改这里及下面的4； items/=lypmenucount; document.write("<DIV align=center id='OB_Folder"+zorder+"' style='position:absolute;left:0;top:"+top+";width:"+folderWidth+";height:"+(OB_Margin*2+items*(OB_IconsHeight+OB_LabelFontSize+OB_LabelMargin)+(items-1)*OB_ItemsSpacing)+";z-index:"+zorder+";clip:rect(0 0 0 0);'>"); for(var i=1;i<items*4;i+=4) { document.write("<div targetFrame='"+Folder[i+3]+"' link='"+Folder[i+2]+"' onMouseDown='OutlookLikeBar.ItemClicked(this)' onMouseUp='OutlookLikeBar.ItemSelected(this)' onMouseOver='OutlookLikeBar.OverItems(this)' onMouseOut='OutlookLikeBar.OutItems(this)' style='position:absolute;left:"+(Math.ceil((OB_Width-OB_BorderWidth*2-OB_IconsHeight)/2)-1)+";top:"+(OB_Margin+Math.ceil((i-1)/4)*(OB_ItemsSpacing+OB_LabelFontSize+OB_IconsHeight))+";cursor:hand;clip:rect(0 "+OB_IconsWidth+" "+OB_IconsHeight+" 0;width:"+OB_IconsWidth+";height:"+OB_IconsHeight+"'>"); document.write("<img src='"+Folder[i]+"'>"); document.write("</div>"); document.write("<div align='center' style='position:absolute;left:0;top:"+(OB_LabelMargin+OB_IconsHeight+OB_Margin+Math.ceil((i-1)/4)*(OB_ItemsSpacing+OB_LabelFontSize+OB_IconsHeight))+";'>"); document.write("<table width=100%><tr><td align=center><table width=100%><tr><td align=center style='font-family:"+OB_LabelFontFamily+";font-size:"+OB_LabelFontSize+"pt;color:"+OB_LabelFontColor+"'>"+Folder[i+1]+"</td></tr></table></td></tr></table>"); document.write("</div>"); } document.write("</DIV>"); } //*************************** //* Outlook-Like Bar Object * //*************************** function OutBar(width,height,items,buttonHeight,borderWidth,slideSpeed,slideArrowValue,ArrowSlideSpeed) {//构造函数 this.currentFolder=1; this.currentItem=null; this.slideCount=0; this.slideStep=1; this.slideArrowValue=slideArrowValue; this.slideSpeed=slideSpeed; this.borderWidth=borderWidth; this.width=width; this.visibleAreaHeight=height-2*borderWidth-items*buttonHeight; this.visibleAreaWidth=width; this.FolderClicked=FolderClicked; this.SlideFolders=SlideFolders; this.ItemClicked=ItemClicked; this.ItemSelected=ItemSelected; this.OverItems=OverItems; this.OutItems=OutItems; this.OverArrow=OverArrow; this.OutArrow=OutArrow; this.ArrowClicked=ArrowClicked; this.ArrowSelected=ArrowSelected; this.ArrowSlideSpeed=ArrowSlideSpeed; this.SlideItems=SlideItems; this.SlideItemsAction=SlideItemsAction; this.Start=Start; this.ClipFolder=ClipFolder; this.SetArrows=SetArrows; this.HideArrows=HideArrows; this.sliding=false; this.items=items; this.started=false; this.Start(); } function FolderClicked(folder) { if(this.sliding) return; if(folder==this.currentFolder) return; this.sliding=true; this.slideCount=this.visibleAreaHeight; this.slideStep=1; this.countStep=0; this.HideArrows(); this.SlideFolders(folder,document.all["OB_Button"+folder].position=="DOWN"); } function SlideFolders(folder,down) { var step; if(down) { this.slideCount-=Math.floor(this.slideStep); if(this.slideCount<0) this.slideStep+=this.slideCount; step=Math.floor(this.slideStep); for(var i=2;i<=folder;i++) if(document.all["OB_Button"+i].position=="DOWN") { document.all["OB_Button"+i].style.pixelTop-=step; document.all["OB_Folder"+i].style.pixelTop-=step; } filter = /rect\((\d*)px (\d*