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
紫蝶∏飛揚↗ 阅读(15876)
评论(5) 编辑 收藏 所属分类:
EXTJS