<SCRIPT LANGUAGE="JAVASCRIPT">
OB_Top=0; //position from top (px)
OB_Left=0; //position from left (px)
OB_Margin=10; //top and bottom margins between icons and borders
OB_Width=110; //bar width
OB_Height=550; //bar height
OB_SlideSpeed=1.85; //speed during slide movement
OB_BackgroundColor="#d31e1e"; //background color of the bar
OB_ItemsSpacing=30; //space between two items (icons and text)
OB_BorderWidth=3; //border width
OB_BorderStyle="ridge"; //border style
OB_BorderColor="#d31e1e"; //border color
OB_IconsWidth=32; //icons width
OB_IconsHeight=32; //icons height
OB_ButtonFontFamily="宋体";     //font family of button characters
OB_ButtonFontSize=9; //font size    "         "       "  
OB_ButtonFontColor="black"; //font color   "         "       "     
OB_ButtonHeight=25; //button height
OB_LabelFontFamily="宋体"; //font family of text labels
OB_LabelFontSize=9; //font size    "   "   "   "
OB_LabelFontColor="white"; //font color   "   "   "   "
OB_LabelMargin=3; //margin between labels and icons
OB_UpArrow="images/arrowup.gif"; //arrow for slide up
OB_DownArrow="images/arrowdown.gif"; //arrow for slide up
OB_ArrowWidth=15; //arrow width
OB_ArrowHeight=15; //arrow height
OB_ArrowSlideSpeed=8; //speed for items scrolling
        OB_TextLeft=60;
</SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT">
if (document.all){OutBarFolder1=new Array(
"个人办公",

 "25.gif","事务提醒","office/awake.php","",
 
 "34.gif","內部通信","office/sendmessage.php","",
 
 "2.gif","日程安排","office/dateplan.php","",
 
"43.gif","领导办公","lingdao/missionindex.php","",

"3.gif","公司通讯录","office/connection.php","",

"4.gif","个人通讯录","office/userconnindex.php","",

"1.gif","个人资料","office/udetailindex.php","",
 
"36.gif","桌面设定","office/setstyle.php","",
 "","","",""); OutBarFolder2=new Array(
"工作任务",

"22.gif","任务安排","mission/jobadmin.php","",

"20.gif","任务处理","mission/lookover.php","",

"42.gif","工作总结","mission/zongjie.php","",

"21.gif","工作日志","mission/joblogindex.php","",

"19.gif","日志清理","mission/dellogindex.php","",

"18.gif","值班管理","mission/ondutyindex.php","",
"","","",""
);OutBarFolder3=new Array(
"客户管理",

"38.gif","客户资料","kehu/zhiliaoindex.php","",

"39.gif","客户跟踪","kehu/kehugengzhong.php","",

"40.gif","客户服务","kehu/kehufuwu.php","",

"23.gif","工作接待","mission/receiveindex.php","",

"41.gif","业务统计","kehu/tongji.php","",
"","","",""
);OutBarFolder4=new Array(
"电子公文",

"15.gif","待办公文","elintdoc/waitindex.php","",

"13.gif","新发公文","elintdoc/sendindex.php","",

"17.gif","流程监控","elintdoc/controlindex.php","",

"14.gif","催办公文","elintdoc/hurryindex.php","",

"16.gif","公文查阅","elintdoc/readindex.php","",
"","","",""
);OutBarFolder5=new Array(
"公共信息",

"10.gif","最新公告","placard/newindex.php","",

"11.gif","历史公告","placard/historyindex.php","",

"9.gif","签发公告","placard/endorseindex.php","",

"12.gif","政策法规","placard/statuteindex.php","",

"30.gif","法规制度","OAadmin/policyindex.php","",
"","","",""
);OutBarFolder6=new Array(
"文档管理",

"5.gif","我的文档","files/mydocframe.php","",

"6.gif","部门文件","files/gdocframe.php","",

"7.gif","共享文档","files/sdocframe.php","",

"37.gif","技术资料","files/jishudocframe.php","",

"8.gif","文件上传","files/ftpfile.php","",
"","","",""
);OutBarFolder7=new Array(
"营运资源",

"29.gif","物品借用","commserve/lendapplyindex.php","",

"33.gif","物品领用","commserve/applyindex.php","","24.gif","召开会议","commserve/meetingindex.php","",

"26.gif","用车申请","commserve/carindex.php","",
"","","",""
);OutBarFolder8=new Array(
"后台管理",

"27.gif","用户管理","OAadmin/userindex.php","",

"28.gif","部门管理","OAadmin/groupindex.php","",

"31.gif","功能描述","OAadmin/operationindex.php","",

"32.gif","职责权限","OAadmin/jobindex.php","",

"35.gif","数据备份","OAadmin/backupdb.php","",
"","","",""
);
//document.write('<script src="folders.js"><\/script>')
document.write('<script src="outbar.js"><\/script>')
}</SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT">
function Run(app)
{
alert("Application : "+app);
}
</SCRIPT>

解决方案 »

  1.   

    outbar.js
    -----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("<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="SAS&Otilde;&yacute;&Ocirc;&Uacute;&acute;&acute;&frac12;¨&Iuml;&micro;&Iacute;&sup3;'"+Folder[0]+"'&para;&Ocirc;&Iuml;ó&pound;&not;&Ccedil;&euml;&Eacute;&Ocirc;&ordm;ò...";
    if(i==1)
    {
    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;width:104;height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"pt;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100'>");
    MakeItems(Folder,i,OB_ButtonHeight);
    }
    else
    {
    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:104;height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"pt;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100'>");
    MakeItems(Folder,i,(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+OB_ButtonHeight);
    }
    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="SAS&Iuml;&micro;&Iacute;&sup3;&sup1;&Uuml;&Agrave;í";
    document.all["OutlookLikeBar"].style.visibility="visible";function MakeItems(Folder,zorder,top)
    {
    var items=0;
            var charlength;
    var folderWidth=(OB_Width-OB_BorderWidth*2);
    while(Folder[items+1])
    items+=4;
    items/=4;
    document.write("<DIV 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("<a target=right onMouseDown='parent.right.location.href=\"");
    document.write(Folder[i+2]);
    document.write("\";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 border=0 src='images/"+Folder[i]+"'>");
            document.write("</a>");
                    charlength=(OB_Width-OB_BorderWidth*2-(Folder[i+1].length)*12)/2;
                    //document.write(charlength);               
                    document.write("<div align='center' style='position:absolute;left:"+(charlength)+";top:"+(OB_LabelMargin+OB_IconsHeight+OB_Margin+Math.ceil((i-1)/4)*(OB_ItemsSpacing+OB_LabelFontSize+OB_IconsHeight))+";font-family:"+OB_LabelFontFamily+";font-size:"+OB_LabelFontSize+"pt;color:"+OB_LabelFontColor+"'>");
    document.write(Folder[i+1]);
    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");
    }
      

  2.   


    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*)px (\d*)px (\d*)px\)/; var clipString=document.all["OB_Folder"+folder].style.clip;
    var clip=clipString.match(filter);
    this.ClipFolder(folder,parseInt(clip[1]),this.visibleAreaWidth,(parseInt(clip[3])+step),0); var clipString=document.all["OB_Folder"+this.currentFolder].style.clip;
    var clip=clipString.match(filter);
    this.ClipFolder(this.currentFolder,parseInt(clip[1]),this.visibleAreaWidth,(parseInt(clip[3])-step),0); this.slideStep*=this.slideSpeed;
    if(this.slideCount>0)
    setTimeout("OutlookLikeBar.SlideFolders("+folder+",true)",20);
    else
    {
    for(var k=2;k<=folder;k++)
    document.all["OB_Button"+k].position="UP";
    this.currentFolder=folder;
    this.SetArrows();
    this.sliding=false;
    }
    }
    else
    {
    this.slideCount-=Math.floor(this.slideStep);
    if(this.slideCount<0)
    this.slideStep+=this.slideCount;
    step=Math.floor(this.slideStep);
    for(var i=folder+1;i<=this.items;i++)
    if(document.all["OB_Button"+i].position=="UP")
    {
    document.all["OB_Button"+i].style.pixelTop+=step;
    document.all["OB_Folder"+i].style.pixelTop+=step;
    }     filter = /rect\((\d*)px (\d*)px (\d*)px (\d*)px\)/; var clipString=document.all["OB_Folder"+folder].style.clip;
    var clip=clipString.match(filter);
    this.ClipFolder(folder,parseInt(clip[1]),this.visibleAreaWidth,(parseInt(clip[3])+step),0); var clipString=document.all["OB_Folder"+this.currentFolder].style.clip;
    var clip=clipString.match(filter);
    this.ClipFolder(this.currentFolder,parseInt(clip[1]),this.visibleAreaWidth,(parseInt(clip[3])-step),0); this.slideStep*=this.slideSpeed;
    if(this.slideCount>0)
    setTimeout("OutlookLikeBar.SlideFolders("+folder+",false)",20);
    else
    {
    for(var k=folder+1;k<=this.items;k++)
    document.all["OB_Button"+k].position="DOWN";
    this.currentFolder=folder;
    this.SetArrows();
    this.sliding=false;
    }
    }
    }function ItemClicked(item)
    {
    if(this.sliding)
    return;
    item.style.border="2 inset #ffffff";
    }function ItemSelected(item)
    {
    if(this.sliding)
    return;
    item.style.border="1 outset #ffffff";
    //if(item.link.indexOf("javascript")!=-1) 
    // eval(item.link)
    //else 
    // eval(item.targetFrame+".location='"+item.link+"'");
    }function OverItems(item)
    {
    if(this.sliding)
    return;
    item.style.border="1 outset #ffffff";
    }function OutItems(item)
    {
    if(this.sliding)
    return;
    item.style.border="0 none black";
    }function ArrowClicked(arrow)
    {
    if(this.sliding)
    return;
    arrow.style.border="1 inset #ffffff";
    }function ArrowSelected(arrow)
    {
    if(this.sliding)
    return;
    arrow.style.border="0 none black";
    this.SlideItems(arrow.id=="OB_SlideUp");
    }function OverArrow(arrow)
    {
    if(this.sliding)
    return;
    arrow.style.border="1 outset #ffffff";
    }function OutArrow(arrow)
    {
    if(this.sliding)
    return;
    arrow.style.border="0 none black";
    }function ClipFolder(folder,top,right,bottom,left)
    {
    document.all["OB_Folder"+folder].style.clip=clip='rect('+top+' '+right+' '+bottom+' '+left+')';
    }function Start()
    {
    if(!this.started)
    {
    this.ClipFolder(1,0,this.visibleAreaWidth,this.visibleAreaHeight,0);
    this.SetArrows();
    }
    }function SetArrows()
    {
    document.all["OB_SlideUp"].style.pixelTop=document.all["OB_Button"+this.currentFolder].style.pixelTop+document.all["OB_Button"+this.currentFolder].style.pixelHeight+this.visibleAreaHeight-document.all["OB_SlideDown"].height-10;
    document.all["OB_SlideUp"].style.pixelLeft=this.width-document.all["OB_SlideUp"].width-this.borderWidth-10;
    document.all["OB_SlideDown"].style.pixelTop=document.all["OB_Button"+this.currentFolder].style.pixelTop+document.all["OB_Button"+this.currentFolder].style.pixelHeight+10;
    document.all["OB_SlideDown"].style.pixelLeft=this.width-document.all["OB_SlideDown"].width-this.borderWidth-10; var folder=document.all["OB_Folder"+this.currentFolder].style;
    var startTop=document.all["OB_Button"+this.currentFolder].style.pixelTop+document.all["OB_Button"+this.currentFolder].style.pixelHeight; if(folder.pixelTop<startTop)
    document.all["OB_SlideDown"].style.visibility="visible";
    else
    document.all["OB_SlideDown"].style.visibility="hidden"; if(folder.pixelHeight-(startTop-folder.pixelTop)>this.visibleAreaHeight)
    document.all["OB_SlideUp"].style.visibility="visible";
    else
    document.all["OB_SlideUp"].style.visibility="hidden";
    }function HideArrows()
    {
    document.all["OB_SlideUp"].style.visibility="hidden";
    document.all["OB_SlideDown"].style.visibility="hidden";
    }function SlideItems(up)
    {
    this.sliding=true;
    this.slideCount=Math.floor(this.slideArrowValue/this.ArrowSlideSpeed);
    up ? this.SlideItemsAction(-this.ArrowSlideSpeed) : this.SlideItemsAction(this.ArrowSlideSpeed);
    }function SlideItemsAction(value)
    {
    document.all["OB_Folder"+this.currentFolder].style.pixelTop+=value;
        filter = /rect\((\d*)px (\d*)px (\d*)px (\d*)px\)/;
        var clipString=document.all["OB_Folder"+this.currentFolder].style.clip;
        var clip=clipString.match(filter);
        this.ClipFolder(this.currentFolder,(parseInt(clip[1])-value),parseInt(clip[2]),(parseInt(clip[3])-value),parseInt(clip[4]));
    this.slideCount--;
    if(this.slideCount>0)
    setTimeout("OutlookLikeBar.SlideItemsAction("+value+")",20);
    else
    {
    if(Math.abs(value)*this.ArrowSlideSpeed!=this.slideArrowValue)
    {
    document.all["OB_Folder"+this.currentFolder].style.pixelTop+=(value/Math.abs(value)*(this.slideArrowValue%this.ArrowSlideSpeed));
        filter = /rect\((\d*)px (\d*)px (\d*)px (\d*)px\)/;
    var clipString=document.all["OB_Folder"+this.currentFolder].style.clip;
    var clip=clipString.match(filter);
        this.ClipFolder(this.currentFolder,(parseInt(clip[1])-(value/Math.abs(value)*(this.slideArrowValue%this.ArrowSlideSpeed))),parseInt(clip[2]),(parseInt(clip[3])-(value/Math.abs(value)*(this.slideArrowValue%this.ArrowSlideSpeed))),parseInt(clip[4]));
    }     
    this.SetArrows();
    this.sliding=false;
    }
    }