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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值