可折叠的面板

最新推荐文章于 2021-02-23 16:35:50 发布

最新推荐文章于 2021-02-23 16:35:50 发布 · 174 阅读

文章标签：

#EXT #Google #C #C++ #C#

lite-ext 专栏收录该内容

17 篇文章

订阅专栏

介绍了一种名为Lite-Ext的轻量级Ext组件，该组件可以在Web页面中实现面板的折叠与展开功能。提供了不同定位方式的示例代码，包括一般定位和绝对定位，并展示了如何监听面板的展开和折叠事件。

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code

本以为用 windowlite 就可以了，偏偏有需求要 dock 的效果，放一长条在那占位置，点的话就展开，实现下试试。

效果：

使用代码:

//一般定位
	var c=new Ext.ux.CollapseLite({
		//标题头
		title:'一般定位测试头',
		//内容
		content:'一般定位测试content',
		//渲染容器id
		renderTo:'test1'
	});
	
	c.on("expand",function(){
		alert("expand occur !");
	});		
	
	c.on("collapse",function(){
		alert("collapse occur !");
	});
			
	//一般定位暂时不支持direction r
	new Ext.ux.CollapseLite({
		title:'一般定位测试头 - 不支持direction r',
		content:'一般定位测试content',
		direction:'r'
	});	
	
	
	//绝对定位		
  new Ext.ux.CollapseLite({
		title:'绝对定位测试头',
		content:'绝对定位测试content',
		style:'position:absolute;left:100px;top:300px;width:500px;'
	});
	
	
	
	//绝对定位支持direction r		
  new Ext.ux.CollapseLite({
		title:'绝对定位测试头 - 支持direction r',
		content:'绝对定位测试content',
		style:'position:absolute;left:100px;top:600px;width:500px;',
		//收缩方向
		direction:'r'
	});

/*
	@author:yiminghe.iteye.com
	v1.0(20090826) 做个可以折叠，展开的panel吧，注意绝对定位与其他定位分别处理。
	v1.1(20090902) 增加alignCollapseBar配置，绝对定位时重新对齐collapsebar，状态查询isExpanded
	
*/