
HTML:
<ul id="
knowledgemenu" class="x-hidden mymenu">
<li><a id="knowledge" class="
menubar">知識導航</a></li>
<li><a id="bbs" class="menubar">公告</a></li>
<li><a id="question" class="menubar">待解決問題</a></li>
<li><a id="sloved" class="menubar">已解決問題</a></li>
<li><a id="knownw" class="menubar">知識貢獻</a></li>
<li><a id="tagslist" class="menubar">Tags</a></li>
</ul>
<ul id="
libmenu" class="x-hidden mymenu">
<li><a id="knownlist" class="
menubar">文章庫</a></li>
<li><a id="booklist" class="menubar">圖書庫</a></li>
<li><a id="A1" class="menubar">軟件庫</a></li>
</ul>
CSS:
.menubar {
border-bottom: 1px solid #AACCF6;
color: #222222;
cursor: pointer;
display: block;
height: 20px;
width: 50px;
line-height: 17px;
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: 0;
padding: 3px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.menubar:hover { //鼠標懸停上時觸發
background: #EBF3FD url(../item-over.gif) repeat-x scroll left bottom;
text-decoration: none;
}
JS:
var knowledgemenu = new Ext.Panel({
title: '翰維知道',
contentEl:'knowledgemenu', //DOM標簽ID
border:false,
iconCls:'nav'
});
var libmenu = new Ext.Panel({
title: '專題',
contentEl:'libmenu',
border:false,
iconCls:'nav'
});
var westPanel=new Ext.Panel({
region:'west',
el:'west',
title:'功能菜單',
collapsible: true,
//本窗口伸縮
//collapseMode:'mini',
split:true,
width: 175,
minSize: 175,
maxSize: 175,
margins:{left: 10, top: 0, right: 0, bottom: 0},
layout:'accordion', //子窗口為折疊
layoutConfig:{
animate:true
// fill :false
},
items:[knowledgemenu, libmenu]
});
posted on 2009-05-27 16:22
紫蝶∏飛揚↗ 閱讀(15891)
評論(5) 編輯 收藏 所屬分類:
EXTJS