[js] outlookbar的使用

发表于2007年04月05日 20:26 阅读(3) 评论(0)

今天看了outlookbar的使用，这个web组件看上去很强大，用起来却很简单。

什么是outlookbar？很简单，用过outlook就知道，如下图：

事实上，要在自己的网页中加上这个东西，没有想象中的难：

下载outlookbar的javascript实现脚本：

http://www.dynamicdrive.com/dynamicindex1/outbar2/index.htm

在自己的页面中引入这个脚本：

<script language="JavaScript" src="crossbrowser.js" type="text/javascript">
</script>
<script language="JavaScript" src="outlook.js" type="text/javascript">
</script>


创建outlookbar组件以及内容：

   //create OutlookBar
  var o = new createOutlookBar('Bar',0,0,screenSize.width,screenSize.height,'#606060','white');//'#000099') // OutlookBar
  var p;

  //create first panel
  p = new createPanel('al','Anwendungen');
  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);
  
  p = new createPanel('p','Postf鋍her');
  p.addButton('mail.gif','Mail 2','alert("Mail2")');
  p.addButton('peditor.gif','Personal<BR>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<BR>erster Hand','alert("Infos")');
  p.addButton('peditor.gif','Gelbe Post','alert("Gelbe Post")');
  p.addButton('word.gif','Schreiben','alert("Schreiben")');
  o.addPanel(p);

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

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

  o.draw();         //draw the OutlookBar

这样就OK了！





Trackback: http://tb.blog.youkuaiyun.com/TrackBack.aspx?PostId=1346612
(出自http://blog.youkuaiyun.com/johnrobbet/archive/2006/10/23/1346612.aspx)