DHTMLX系列组件的使用(2)——常用Accordion API

续前一篇DHTMLX系列组件的使用(1)——QQ风格面板的制作，下面介绍常用Accordion API。

 

1. 初始化

<script type="text/javascript">
var dhxAccord;
function doOnLoad() {
    var dhxAccorData = {
        parent: "accordObj",
        items: [{
            id: "a1",
            text: "Gothic 3 Forsaken Gods",
            open: true
        }, {
            id: "a2",
            text: "NFS Undercover"
        }, {
            id: "a3",
            text: "Diablo 2 Lord Of Destruction"
        }]
    };
dhxAccord = new dhtmlXAccordion(dhxAccorData);
}
</script>

这部分代码与下面的代码一样达到同样的效果。

<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>

两部分相比较，或许更容易理解addItem函数中两个参数的意义，前一个是item的id值，后一个则是其标题属性。

 

2. Unload Accordion

dhxAccord.unload(); // 调用unload函数即可

// example
function unloadAccord() {
    if (!dhxAccord)
        return;
    dhxAccord.unload();
    dhxAccord = null;
}

 说明：dhxAccord是dhtmlXAccordion对象的一个实例，下同。

 

3. Adding Items

dhxAccord.addItem("id", "item text");

参数说明： 前一个是item的id值，后一个则是其标题属性。

 

4. 向下扩展的item

<script type="text/javascript">
function doOnLoad1() {
    dhxAccord = new dhtmlXAccordion("accordObj");
    dhxAccord.enableMultiMode();
    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>

 说明：首先需要调用enableMultiMode函数，然后添加item，设置动画效果等。注意，该模式下，openItem函数无效。效果图如下所示。

5. 标题读写

// Note: dhxAccord is an object of dhtmlXAccordion
item.setText(“text”);
var text = item.getText(“text”);
or:
dhxAccord.cells(“id”).setText(“text”);
var text = dhxAccord.cells(“id”).getText(“text”);

 

6. 循环遍历item

dhxAccord.forEachItem(function(item) {
    // you can use the parameter ‘item’ to do something
});

 

7. item图标设置

dhxAccord.setIconsPath("icon path");
dhxAccord.cells(“id”). setIcon (“icon path”);
dhxAccord.cells(“id”). clearIcon ();
// example:
dhxAccord.setIconsPath("../common/");
dhxAccord.cells(“id”). setIcon (“icon1.gif”);

说明：首先需要调用 setIconsPath 函数设置图标路径，然后调用 setIcon 函数设置图标即可。对于已经设置了图标的item，可以调用clearIcon 函数将其清除。

 

8. 打开/关闭 item

// Note: dhxAccord is an object of dhtmlXAccordion
item.open();
item.close();
// or:
dhxAccord.cells(“id”). open();
dhxAccord.cells(“id”). close();

 

9. 显示/隐藏 item

// Note: dhxAccord is an object of dhtmlXAccordion
item. show ();
item. hide ();
// or:
dhxAccord.cells(“id”). show ();
dhxAccord.cells(“id”). hide ();

 

10. 展开/折叠效果设置

dhxAccord.setEffect(true);
dhxAccord.setEffect(false);

 

11. 皮肤设置 

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxaccordion_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxaccordion_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxaccordion_dhx_black.css">

// example
dhxAccord.setSkin('dhx_black');

 说明：首先需要引入三种皮肤样式文件，然后调用setSkin函数，并指定具体参数即可。

 

12.  向 item 中添加元素

dhxAccord.cells("id").attachObject("objectId");

说明：前一个参数是 item 的 id 值，后一个是要添加的元素的 id 值。

 

13.  onActive 事件（激活 item）

dhxAccord.attachEvent("onActive", function(itemId) {
	// do something you like
});

 

14. onBeforeActive 事件（激活之前）

dhxAccord.attachEvent("onBeforeActive", function(itemId) {
        // return a bool value to tell the dhxAccord whether the item can be opened
});

 

15. Attach Functions

在Accordion API中，还有很多以 attach 为前缀的函数，由于很多都涉及到其他的组件，所以这里暂时不做介绍。其实从字面意思可以看出，这些函数要实现的功能是将组件或者元素添加到 item 中，比如，menu，toolbar，window等。

 

综上，上述只是列出了常用Accordion API，如果有什么遗漏或者有什么地方说的不对的，欢迎指出。

 

 

 

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

Stay Hungry, Stay Foolish!

Afa

May 22nd, 2010

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