outlookbar下载及使用说明

最新推荐文章于 2019-05-07 17:21:46 发布

mouxianbiao

最新推荐文章于 2019-05-07 17:21:46 发布

阅读量1.8k

点赞数

分类专栏：前端网页文章标签： outlookbar控件代码 web

本文链接：https://blog.youkuaiyun.com/mouxianbiao/article/details/81805369

版权

前端网页专栏收录该内容

1 篇文章

订阅专栏

本文提供了OutlookBar控件的下载链接和使用说明，包括创建OutlookBar菜单的操作步骤，以及JS方式的页面跳转汇总，适用于网页开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

outlookbar下载及使用说明

outlookbar.zip下载链接：https://download.youkuaiyun.com/download/mouxianbiao/10611706

//压缩包使用说明：
//1.解压文件，点击“使用指南.html”查看指南
//2.编辑“outlook.html”，修改界面效果
//3.点击“index.html”预览效果

// —————————————————————————
//制作outlookbar菜单操作步骤
// —————————————————————————

//步骤一：
//创建一个OutlookBar对象
//模板： var o = new createOutlookBar(Name,x-position, y-Position, width, height,background-color,page background-color)

var o = new createOutlookBar(‘Bar’,0,0,screenSize.width,screenSize.height,’#606060’,’white’) // OutlookBar
var p

//步骤二：
//创建第一个panel
//模板：p = new createPanel('al','panel名称');

p = new createPanel(‘al’,’Anwendungen’);

//步骤三：添加按钮
//模板：p.addButton(图标名称，标签名称，onClick事件的JavaScript代码);

p.addButton(‘netm.gif’,’Netmanage’,’alert(“NetM”)’);
p.addButton(‘news.gif’,’News’,’alert(“News”)’);
p.addButton(‘word.gif’,’Word’,’alert(“Word”)’);
p.addButton(‘peditor.gif’,’Editor’,’alert(“Editor”)’);
p.addButton(‘mail.gif’,’Mail’,’alert(“Mail”)’);
o.addPanel(p); //调用addPanel()方法把该panel添加到OutlookBar菜单栏

//步骤四：
//创建第二个panel
//格式和第一个相同

p = new createPanel(‘p’,’Postfher’);
p.addButton(‘mail.gif’,’Mail 2’,’alert(“Mail2”)’);
p.addButton(‘peditor.gif’,’Personal
Editor’,’alert(“Personal Editor”)’);
p.addButton(‘word.gif’,’Projekte’,’alert(“Projekte”)’);
p.addButton(‘news.gif’,’Adresse’,’alert(“Adresse”)’);
p.addButton(‘mail.gif’,’Postausgang’,’alert(“Postausgang”)’);
p.addButton(‘mail.gif’,’Posteingang’,’alert(“Posteingang”)’);
p.addButton(‘news.gif’,’Information aus
erster Hand’,’alert(“Infos”)’);
p.addButton(‘peditor.gif’,’Gelbe Post’,’alert(“Gelbe Post”)’);
p.addButton(‘word.gif’,’Schreiben’,’alert(“Schreiben”)’);
o.addPanel(p);

//步骤五：
//创建两个空的panel

p = new createPanel(‘l’,’Leeres Panel’);
o.addPanel(p);

p = new createPanel(‘l2’,’Leeres Panel 2’);
o.addPanel(p);

o.draw(); //draw the Outlook Like Bar!

outlook.html文件中，以下代码用于控制windows resize,一般不用修改，只修改上面部分即可

//-----------------------------------------------------------------------------
    //functions to manage window resize
    //-----------------------------------------------------------------------------
    //resize OP5 (test screenSize every 100ms)
function resize_op5() {
  if (bt.op5) {
    o.showPanel(o.aktPanel);
    var s = new createPageSize();
    if ((screenSize.width!=s.width) || (screenSize.height!=s.height)) {
      screenSize=new createPageSize();
    //need setTimeout or resize on window-maximize will not work correct!
    //ben鰐ige das setTimeout oder das Maximieren funktioniert nicht richtig
      setTimeout("o.resize(0,0,screenSize.width,screenSize.height)",100);
    }
    setTimeout("resize_op5()",100);
  }
}

//resize IE & NS (onResize event!)
function myOnResize() {
  if (bt.ie4 || bt.ie5 || bt.ns5) {
    var s=new createPageSize();
    o.resize(0,0,s.width,s.height);
  }
  else
    if (bt.ns4) location.reload();
}

</SCRIPT>

</head>
<!-- need an onResize event to redraw outlookbar after pagesize changes! -->
<!-- OP5 does not support onResize event! use setTimeout every 100ms -->
<body onLoad="resize_op5();" onResize="myOnResize();">

附：JS方式的页面跳转汇总

一、窗口间跳转
1.window.location.href方式

window.location.href="top.jsp";

注意如果top.jsp中有iframe标签,则top.jsp页面将会在iframe中被打开。
2.window.loction.replace方式实现页面跳转，注意跟第一种方式的区别

window.location.replace("http://www.dayanmei.com");

有3个jsp页面（a.jsp, b.jsp, c.jsp），进系统默认的是a.jsp ，当我进入b.jsp的时候， b.jsp里面用window.location.replace(“c.jsp”);与用window.location.href =”c.jsp”;从用户界面来看是没有什么区别的，但是当c.jsp页面有一个”返回”按钮，调用window.history.go(-1); wondow.history.back();方法的时候，一点这个返回按钮就要返回b.jsp页面的话，区别就出来了，当用 window.location.replace(“c.jsp”);连到c.jsp页面的话，c.jsp页面中的调用 window.history.go(-1);wondow.history.back();方法是不好用的，会返回到a.jsp 。
3.self.location方式实现页面跳转，和下面的top.location有小小区别

self.location='top.htm';

4.top.location

top.location='xx.jsp';

5.不推荐这种方式跳转

window.history.back(-1);

6.页面自动刷新：把如下代码加入区域中其中20指每隔20秒刷新一次页面.

7.window.history.forward()返回下一页
8. window.history.go(返回第几页,也可以使用访问过的URL)
二、iframe中页面跳转
1.iframe页面跳转：
“window.location.href”、”location.href”是本页面跳转
“parent.location.href”是上一层页面跳转
“top.location.href”是最外层的页面跳转
例：如果A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这样写
“window.location.href”、”location.href”：D页面跳转
“parent.location.href”：C页面跳转
“top.location.href”：A页面跳转
2.iframe中的target
如果D页面中有form的话, form提交后D页面跳转
: form提交后弹出新页面
: form提交后C页面跳转
: form提交后A页面跳转

注：
outlookbar中常用到左边菜单栏点击跳转到右边窗口：
parent.rightframe_name.location.href=”“