浏览 5196 次
锁定老帖子 主题:outlookbar形式的导航栏
精华帖 (1) :: 良好帖 (0) :: 新手帖 (7) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-07-23
outlook bar形式的导航菜单使用挺多的,Ext有accordion布局,可以创建类似的导航页 但是发现这种布局只能允许一个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下面就可以了 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-01-02
仔细阅读了下LZ的代码,很受用。
LZ的编写规范很不错,问一下,是否是用eclipse写的,又如下面的注释标记 @class 和@extends是自己写的还是工具生成的呢? /** * 导航项集合panel * * @author weijx * @date 2008-12-10 * * @class Artery.plugin.NavPanel * @extends Ext.Panel */ |
|
返回顶楼 | |