DHTMLX系列组件的使用(1)——QQ风格面板的制作

最近开始关注DHTMLX工具包，DHTMLX 是一套非常强大的 web UI 组件，包括如：表格、树形显示、日历、布局、编辑器等十几个UI 组件，欲了解更多信息可登录其官方站点：http://www.dhtmlx.com/。

 

本文介绍的是QQ风格面板的制作，在开始下面的操作前，请下载DHTMLX组件包：dhtmlxSuite。

 

首先将dhtmlxSuit中dhtmlxAccordion文件夹下的codebase文件夹整个复制到你的项目目录下，然后创建HTML文件。再引入JS文件和CSS文件。

<script type="text/javascript" src="codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="codebase/dhtmlxaccordion.js"></script>
<script type="text/javascript" src="codebase/dhtmlxcontainer.js"></script>
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxaccordion_dhx_skyblue.css" />

 

然后定义用于显示面板的容器。

<div id="accordObj" style="width: 320px; height: 400px;"></div>

 

最后定义生成面板的 JS 函数，之后调用即可。

<script type="text/javascript">
var dhxAccord;
function doOnLoad() {
	dhxAccord = new dhtmlXAccordion("accordObj");
	//dhxAccord.setSkin("dhx_black");
	dhxAccord.addItem("a1", "Main Page");
	dhxAccord.addItem("a2", "Site Navigation");
	dhxAccord.addItem("a3", "Support & Feedback");
	dhxAccord.addItem("a4", "Comments");
	dhxAccord.openItem("a1");
    dhxAccord._enableOpenEffect = true;
}
</script>

 

下图是效果预览

  

 

 

-------------------------------------------------

Stay Hungry, Stay Foolish!

Afa

May 19th, 2010

-------------------------------------------------