WideJS 之面板Panel

最新推荐文章于 2024-12-09 21:33:28 发布

zhzhy86

最新推荐文章于 2024-12-09 21:33:28 发布

阅读量217

点赞数

分类专栏： WideJS 文章标签： JavaScript UI HTML ViewUI

WideJS 专栏收录该内容

1 篇文章

订阅专栏

本文分享了作者自行封装的一些JS通用组件，这些组件模仿ExtJS的设计思路。文中提供了两个面板组件的具体实现示例，包括如何设置宽度、高度、标题、内容及渲染目标等属性。

最近自己封装了一些JS通用组件，思路也是根据ExtJS来的，发出一些出来分享一下：
[img]
[img]http://dl.iteye.com/upload/attachment/271640/51284f69-4403-3634-8b00-ae91f86542a3.bmp[/img]
[/img]
编写代码如下：


	/**
	 * 初始化面板
	 */
	var panel1 = new Panel({  
		width		:200,	//设置宽度
		height		:200,	//设置高度
		title		:	"趋势分析图（总趋势）",	//设置标题
		style		:	"color: red; ",			//样式
		html		:	'一直想对Javascript再次做一些总结，正好最近自己写了一个小型Js UI库，总结了一下Js的继承机制，在网上也看了一些前辈们博客里的总结，感觉分析不是特别全面',	//内容
		renderTo	:	'panelDiv1'	//渲染到指定节点中
	});  

	/**
	 * 初始化面板
	 */
	var panel2 = new Panel({  
		width		:485,	//设置宽度
		height		:400,	//设置高度
		title		:	"月汇总",	//设置标题
		html		:	"<iframe height='390' width='465' src='http://www.baidu.com'></iframe>",
		renderTo	:	'panelDiv2'	//渲染到指定节点中
	});