outlook bar形式的导航菜单使用挺多的,Ext有accordion布局,可以创建类似的导航页
但是发现这种布局只能允许一个panel展开,这算一个限制吧。
自己动手写了一个导航例子,截图如下:
导航panel(Artery.plugin.StaticNavPanel)支持单展开和多展开,通过singleExpand属性控制,支持展开指定的panel
操作项(Artery.plugin.NavItem)支持图标,支持单击事件
/** * 导航操作项 * @class Artery.plugin.NavItem * @extends Ext.Component */ Artery.plugin.NavItem = Ext.extend(Ext.Component, { icon: "details.gif", onRender: function(ct, pos){ if(!Artery.plugin.NavItem.buttonTemplate){ Artery.plugin.NavItem.buttonTemplate = new Ext.Template( "<div id='{id}' class=\"nav-item\"><table cellpadding=\"0\" cellspacing=\"0\"><tr>"+ "<td class=\"nav-icon\" {iconStyle} {ccc}></td>"+ "<td class=\"nav-text\">{text}</td>"+ "</tr></table></div>"); } var iconStyle = ""; if(this.icon){ iconStyle = "style='background-image: url("+this.icon+");'"; } this.el = Artery.plugin.NavItem.buttonTemplate.append(ct, { iconStyle: iconStyle, text: this.text, id: this.id }, true); this.el.on("mouseover", this.onMouseover, this); this.el.on("mouseout", this.onMouseout, this); this.el.on("click", this.onClick, this); }, onMouseover: function(){ this.el.addClass("nav-item-over"); }, onMouseout: function(){ this.el.removeClass("nav-item-over"); }, onClick: function(){ if(this.handler){ this.handler(); } } });
代码比较简单,如果会Ext的话,应该比较容易读懂,上传一个压缩文件,解压缩到Ext发布包的examples下面就可以了