Target readers are users (developers).
The first steps that need to be taken for dhtmlxAccordion's initialization are the following:
<head>Note: dhx_blue is the default skin. If the user chooses to apply some other skin, he should indicate path to the appropriate dhtmlxaccordion_[name_of_the_skin].css file from dhtmlxAccordion package and to the appropriate dhtmlxwindows_[name_of_the_skin].css file from dhtmlxWindows package.
<!-- dhtmlxAccordion -->
<script src="[full path to this file]/dhtmlxcommon.js"></script>
<script src="[full path to this file]/dhtmlxaccordion.js"></script>
<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxaccordion_dhx_blue.css">
<!-- dhtmlxWindows -->
<script src="[full path to this file]/dhtmlxwindows.js"></script>
<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxwindows_dhx_blue.css">
</head>
<div id="accordObj"></div>A new Accordion object can be created in the following way:
<script>parentId defines an HTML object on page to which the accordion is attached (the main accordion container in the code mentioned above).
var dhxAccord = new dhtmlXAccordion(parentId, skin);
</script>
<script>
var dhxAccord = new dhtmlXAccordion("accordObj");
</script>
<script>
var dhxWins = new dhtmlXWindows();
dhxWins.setImagePath("[full path to this directory]/codebase/imgs/");
var w1 = dhxWins.createWindow("w1", 10, 10, 320, 360);
</script>
<script src="[full path to this file]/dhtmlxlayout.js"></script>
<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxlayout_dhx_blue.css">
The next step is to create a new dhtmlXLayoutObject and place it after the <div> element (object) that we've just created:<div id="parentId" style="position:absolute; width:600px; height:400px;"></div>
The second argument in dhtmlXLayoutObject() is the code of the Layout's pattern.<script>
var dhxLayout = new dhtmlXLayoutObject("parentId", "3L", "dhx_black");
</script>
The third argument is optional, and it indicates the name of the skin chosen for the Layout. If this argument is not indicated, the component will be created with the default skin (dhx_blue).
var dhxAccord = dhxLayout.cells("a").attachAccordion();
</script>
The following predefined skins are available for dhtmlxAccordion users:
<script>
dhxAccrod.setIconsPath("[full path to icons image files directory]");
</script>
As it was stated above, the accordion object can be attached to a window. Initially the accordion occupies all the window's space. In the case of window's resizing, it becomes responsible for accordion's resizing as well.
If the user intends to attach dhtmlxAccordion to some other place on page, the adjustment of Accordion object's size to the outer dimension of the container is done by means of
setSizes() method:
<script>This method doesn't take any input parameters as the size of the object is adjusted automatically with the help of it.
dhxAccord.setSizes();
</script>
<script>
dhxAccord.setEffect(true|false);
</script>
This method is set to false by default. This means that initially there is no any noticeable effect in the process of items expanding/collapsing. This method's parameter should be set to true if the user wants to switch this effect on.
A new item can be added to dhtmlxAccordion in the following way:
<script>The parameters of this method are:
var item = dhxAccord.addItem(itemId, itemText);
</script>
<script>
dhxAccord.addItem("a1", "a");
</script>
<script>The method will return item's object. So, if the user wants to access the "a" item, the following code string should be written:
var item = dhxAccord.cells(itemId);
</script>
<script>
var item = dhxAccord.cells("a");
</script>
<script>
dhxAccord.cells(itemId).setText(text);
</script>
setText() method takes one parameter: text - title text of the added item.
Item's header text can be easily got through method getText():
<script>
var text = dhxAccord.cells(itemId).setText(); // returns current item's header text
</script>
<script>
dhxAccord.forEachItem(function(item){
// actions, for example:
item.setText("newText");
});
</script>
An icon can be set to any of Accordion items in the following way:
<script>
dhxAccord.cells(itemId).setIcon(icon);
</script>
The user should use the following method if he wants to remove any item's icon:
<script>
dhxAccord.cells(itemId).clearIcon();
</script>
The method close() should be used to close (collapse) an Accordion's item:<script>
dhxAccord.cells(itemId).open();
</script>
<script>
dhxAccord.cells(itemId).close();
</script>
Any item in dhtmlxAccordion can be easily Undocked - extracted from the accordion in order to be displayed separately (in a window). The user should use the following method to undock an item:
<script>
dhxAccord.cells(itemId).undock();
</script>
An undocked item can be Docked - made a part of the accordion again - in the following way:
<script>
dhxAccord.cells(itemId).dock();
</script>
Any item in dhtmlxAccordion can be easily shown/hidden by means of these two methods:
<script>
dhxAccord.cells(itemId).show();dhxAccord.cells(itemId).hide();
</script>
For example, we create a <div> element with id "objId" and with some text inside it. Then we just use the following line of code to attach this object we've just created to an Accordion item:
Note: See here for information on attaching other dhtmlx components to dhtmlxAccordion.<div id="objId">
Some text
</div>
<script>
dhxAccord.cells("a1").attachObject("objId");
</script>
By default, the items have overflow:hidden style.
In case the item is not able to display the whole object, the following style should be specified for the object:
<div id="objId" style="width:100%;height:100%;overflow:auto;...>
Now the item will display the scroll bar in case the object does not fit item's size.
<script>5.8.1 Accessing Inner Content
dhxAccord.cells(itemId).attachURL(url);
</script>
Any object on the external page attached with attachURL() method can be accessed like this:
...
<div id = "A">...</div>
...
<script>5.8.2 Item Accessing from Attached URL
var dhxAccord = new dhtmlXAccordion(...);
...
dhxAccord.addItem("a1", "item_text");
...
dhxAccord.cells("a1").attachURL("inner.html");
// accessing <div id="A">
if (_isIE) {
dhxAccord.cells("a1").win._frame.contentWindow.document.getElementById("A")...
} else {
dhxAccord.cells("a1").win._frame.contentDocument.getElementById("A")...
}
</script>
<input type="button" value="hide item" onclick="hideItem();"> // create a button
<script>
function hideItem() {
parent.dhxAccord.cells(itemId).hide(); // hide item in question
}
</script>
It should be noted that variable dhxAccord should be created as a global one (in our main dhtmlxAccordion script) in order to be seen by the script in the attached external page.
The following event is available in dhtmlxAccordion:
The user can add any user-defined handler to any of the available events.
To do this the user can use attachEvent() method with the following parameters:
<script>
dxhAccord.attachEvent(evName, evHandler);
</script>
Note: the names of the events are case-insensitive.
This event calls user-defined handlers (if there are any) and passes the following parameter:
<script>
dhxAccord.attachEvent("onActive", function(itemId){
alert("Item "+itemId+" was activated.");
});
</script>
This event calls user-defined handlers (if there are any) and passes the following parameter:
<script>
dhxAccord.attachEvent("onBeforeActive", function(itemId){
alert("Item "+itemId+" will be opened.");return true; // item will be opened
return false; // item will not be opened
});
</script>
dhtmlxAccordion is compatible with the following dhtmlx Components:
<script>attach[Component]() method doesn't take any input parameters for each accordion compatible component except for dhtmlxLayout and dhtmlxTree.
var grid = dhxAccord.cells("a1").attachGrid();
//OR
var tree = dhxAccord.cells("a1").attachTree();
//OR
var treeGrid = dhxAccord.cells("a1").attachGrid();
//OR
var folders = dhxAccord.cells("a1").attachFolders();
//OR
var tabbar = dhxAccord.cells("a1").attachTabbar();
//OR
var layout = dhxAccord.cells("a1").attachLayout("3L");
//OR
var menu = dhxAccord.cells("a1").attachMenu();
//OR
var tollbar = dhxAccord.cells("a1").attachToolbar();
//OR
var editor = dhxAccord.cells("a1").attachEditor();
//OR
var statusBar = dhxAccord.cells("a1").attachStatusBar();
</script>