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下面就可以了
- 大小: 16.3 KB
分享到:
相关推荐
用Javascript编写的OutlookBar控件,使用很方便和美观大方,支持换肤,内带5种风格、源码和示例,是导航栏的又一选择。
OutlookBar非常精美的仿效OutlookBar菜单
类似于美国微软公司MS OutLookBar控件,
delphi OutLookBar控件,仿照windows 的office outlook 而编写
压缩包里有一个原版outlookbar压缩包,还有一个是包含简单中文使用指南的压缩包
WinForm OutlookBar Menu
很不错的一个outlookbar控件CXTOutBarCtrl,该控件来源于Xtreme Toolkit,作者对其进行了修改,使其不依赖于类库独立存在,由于没有运用XT的其他类,可能你会觉得它没有在类库中的华丽,但相对于其小巧的体格而言,...
C#实现的OutlookBar效果的源码,有几种效果,可以直接借鉴,较为实用。
让你的页面更好看.让你在处理页面时更轻松.更省事
这是一个网上流行的Outlookbar JS版的MENU 代码清晰,无论是使用还是学习都很不错。 至于使用的话,有没有涉及到版权问题我就不是很 清楚啦!
OutLookbar控件附带例子,美观灵活 这是从别人那里拿来的,感觉很不错,也处于学习状态,也大家分享。
OutLookBar.dll
c#(vs2008)实现的仿OutlookBar,添加了右键删除功能。
Outlook的导航栏(普通被称之为OutlookBar)使用很方便和美观大方,吸引了不少fans,因此,有好多人都想在自己的系统中加上OutlookBar,而在.Net平台上,没有自带的OutlookBar控件,聪明的程序员们,就想到自定义一个控件,使...
一个效果很好的outlookbar控件CXTOutBarCtrl
C#写的OutLookBar 里面有源码 2009年7月23日 – 跟XP系统左侧可折叠式菜单一样,可以折叠、展开,可以自己定义颜色,自己研究吧,非常有用的一个源码,样式和outlook左侧菜单差不多!我自己就在用, ...
一个可停靠的,可自动隐藏的,并且可以换肤的 OutLookBar <br/>一、 简介 这个创意来自ziran lin 的大作 , Pinnable ControlBar 以及Iuri Apollonio 的大作 An Outlook98 bar-like control ,我认为如果制作一个...
outlookbar使用范例,可直接运行工程文件执行程序
重新整理了一下原先上传的“C#实现的OutlookBar源码及示例”。由于原先上传的资源的程序源码和DLL分成了两个资源,现在把原资源删除,重新整理和上传,欢迎大家下载体验。
C#实现的OutlookBar源码及示例