outlookbar形式的导航栏

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下面就可以了

评论

1 楼 phili1999 2010-01-02  

仔细阅读了下LZ的代码，很受用。
LZ的编写规范很不错，问一下，是否是用eclipse写的，又如下面的注释标记 @class 和@extends是自己写的还是工具生成的呢？
/**
* 导航项集合panel
*
* @author weijx
* @date 2008-12-10
*
* @class Artery.plugin.NavPanel
* @extends Ext.Panel
*/