[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.csdn.net/TrackBack.aspx?PostId=1346612
(出自http://blog.csdn.net/johnrobbet/archive/2006/10/23/1346612.aspx)