dhtmlxaccordion:initializing_dhtmlxaccordion [Skin test wiki]

- Initializing dhtmlxAccordion

Index

dhtmlxaccordion

Initializing dhtmlxAccordion

The first steps that need to be taken for dhtmlxAccordion's initialization are the following:

Download dhtmlxAccordion package from the server and place it in a folder;
Create an html file;
Place the full paths to dhtmlxAccordion's CSS and JS files into the header of the html file;

  <head>
      <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">
  </head>

Note: dhx_skyblue 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.

New Accordion Object Creation

The user needs to create an object where dhtmlxAccordion will be placed later. In this example the object is a <div> element on page, which is placed in the <body> tag:

    <div id="accordObj"></div>

A new Accordion object can be created in the following way:

    <script>
        var dhxAccord = new dhtmlXAccordion(parentId, skin);
    </script>

parentId defines an HTML object on page to which the accordion is attached (the main accordion container in the code mentioned above). The second argument is optional, and it indicates the name of the skin chosen for the Accordion. If this argument is not indicated, the component will be created with the default skin (dhx_skyblue).

So, in our case the code will look like this:

    <script>
        var dhxAccord = new dhtmlXAccordion("accordObj");
    </script>

Attaching dhtmlxAccordion (Object) to Window

First, the user should download dhtmlxWindows package from the server into the same folder where previously downloaded packages were put. Then, the full path to the following files is to be indicated in the <head> tag of html file:

dhtmlxwindows.js;
dhtmlxwindows.css;
dhtmlxwindows_[corresponding_skin_name].css.

    <head>
        <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_[corresponding_skin_name].css"> 
    </head>

An Accordion object can be attached to any created window on page. First, the user needs to create a new base for a set of new windows, a new dhtmlxWindow object for it, and set paths for window's image files.

    <script>
        var dhxWins = new dhtmlXWindows();
        dhxWins.setImagePath("[full path to this directory]/codebase/imgs/");
        var w1 = dhxWins.createWindow("w1", 10, 10, 320, 360);
    </script>

The parameters of the createWindow() method are as follows:

w1 - Window Id;
10,10 - Window position (x & y);
320,360 - Window's width & height.

Then the window will invoke the base for dhtmlxAccordion and will return the handler for the Accordion object itself. The user should write only the following line of code:

    <script>
        var dhxAccord = w1.attachAccordion();
    </script>

Attaching dhtmlxAccordion (Object) to Layout

First, the user should download dhtmlxLayout package from the server into the same folder where previously downloaded packages were put. Then, the full path to the following files is to be indicated in the <head> tag of html file:

dhtmlxlayout.js;
dhtmlxlayout.css;
dhtmlxlayout_[corre].css.

    <head>
        <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_[corresponding_skin_name].css"> 
    </head>

We need to create an object where dhtmlxLayout will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag:

    <div id="parentId" style="position:absolute; width:600px; height:400px;"></div>

The next step is to create a new dhtmlXLayoutObject and place it after the <div> element (object) that we've just created:

    <script>     
        var dhxLayout = new dhtmlXLayoutObject("parentId", "3L", "dhx_black");
    </script>

The second argument in dhtmlXLayoutObject() is the code of the Layout's pattern.

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_skyblue).

And only then the user should write the following line of code in order to attach an Accordion to the chosen layout's cell (let it be the first cell “a”):

    <script>
        var dhxAccord = dhxLayout.cells("a").attachAccordion();
    </script>

Recommended Initialization Way

    <head>
        <script>
            var dhxAccord;
            function doOnLoad() {
                dhxAccord = new dhtmlXAccordion();
            }
        </script>
    </head>
    <body onload="doOnLoad();">
        ...
    </body>

Available Skins

The following predefined skins are available for dhtmlxAccordion users:

dhx_skyblue	dhx_blue	dhx_black