A Button item can be easily added to the toolbar with the help of the following method:

    <script>
        toolbar.addButton(id, pos, text, imgEnabled, imgDisabled);
    </script>

Parameters that should be passed are:

• id - id of a new button;
• pos - position of the button;
• text - button's label;
• imgEnabled - path to image for the enabled state of the button;
• imgDisabled - path to image for the disabled state of the button.

A Text Item can be added to the toolbar by calling addText() method:

    <script>
        toolbar.addText(id, pos, text);
    </scrip>

The following parameters should be passed to this method:

• id - id of the new item;
• pos - position of the text item;
• text - label of the text item.

There is one simple method that adds a Select Button to the toolbar:

      <script>
          toolbar.addButtonSelect(id, pos, text, opts, imgEnabled, imgDisabled);
      </script>

The following parameters should be passed to this method:

• id - (string) id of a select button.
• pos - (integer) position of a select button.
• text - (string) text for a select button (null for no text).
• opts - (array) listed options for a select button.
• imgEnabled - (string) image for enabled state (null for no image).
• imgDisabled - (string) image for desabled state (null for no image).
• renderSelect - (“true” or “disabled”) if the parameter is set to true a button 'remembers' the selected item and keeps it selected on the next opening. Optional, by default is true.
• openAll - (boolean) if the parameter is set to true you can open the dropdown list by clicking both on the label and arrow of a button. If the parameter is set to false the dropdown list can be opened just by clicking on the arrow. Optional, by default is true.
• maxOpen - (integer) sets the number of items visible at once. The other items can be gotten by scrolling down the dropdown list. Optional.

The opts parameter requires more detailed description as the user should specify the following for each listed option:

• id - id of the option;
• type - obj|sep, whether this option is an object or a separator;
• text - label of the option (only for objects);
• img - path to the option image (only for objects).

Several options can be set at once as opts variable:

      <script> 
          var opts = [['id1', 'obj', 'option1', 'img1'],
                      ['sep01', 'sep', '', ''],
                      ['id2', 'obj', 'option2', 'img2']
                      ...
                     ]; 
      </script>

This line of code should be written before we invoke addButtonSelect() method. This code is very useful, as instead of writing all the arrays for the opts parameter in addButtonSelect() method, we can use opts variable, declared before.

The following method should be used to add a new Two-State Button:

      <script>
          toolbar.addButtonTwoState(id, pos, text, imgEnabled, imgDisabled);
      </script>

The user should pass a number of parameters to this method:

• id - id of the new button;
• pos - position of the new button;
• text - button's label;
• imgEnabled - path to image for the enabled state of a new button;
• imgDisabled - path to image for the disabled state of a new button.

Note: if the user wants the Two-State Button to be created text-free, it's necessary to write an empty string as text parameter.

A new Separator can be created by calling the following method:

      <script>
          toolbar.addSeparator(id, pos);
      </script>

This method has two input parameters:

• id - id of the item;
• pos - position of the new separator.

addSlider() method should be used to create a new Slider:

    <script>
        toolbar.addSlider(id, pos, len, valueMin, valueMax, valueNow, textMin, textMax, tip);
    </script>

As for input parameters the user should set, they are as follows:

• id - id of the new slider item;
• pos - position of the new slider;
• len - slider's length (or width/height, it is set in pixels);
• valueMin - minimum possible value;
• valueMax - maximum possible value;
• valueNow - the value slider is set to for the moment it is created;
• textMin - the text displayed to the left of the slider (in case of horizontal slider display) or below the slider (in case of vertical slider display);
• textMax - the text displayed to the right of the slider (in case of horizontal slider display) or above the slider (in case of vertical slider display);
• tip - this parameter sets the tooltip text.

Note: if the user wants the Slider to be created tooltip text-free, it's necessary to write an empty string as tip parameter.

The following syntax shows the user how an Input item can be easily added:

    <script>
        toolbar.addInput(id, pos, value, width);
    </script>

This method has the following input parameters:

• id - id of the new item;
• pos - position of the new item;
• value - the text that will be displayed in the input item when it is created;
• width - width of the new item.

Note: if the user wants the Input item to be created text-free, it's necessary to write an empty string as value parameter. For example:

      <script>
          toolbar.addInput("input_new",3,"",100);
      </script>
 

A simple tool for item's removal from the toolbar is removeItem() method:

    <script>
        toolbar.removeItem(itemId);
    </script>