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