Ajax JavaScript CSS HTML 5 DOM


Toolbar is a particular box intended to contain buttons (but which can contain all kinds of components), which is horizontal by defaultt, and which has supports to "grippy", that is a dotted box that allows to group buttons and that is compacted at a click.
Along with toolbar, other tags exists that are specific to it.

Components of toolbar


It is a button intended to be contained in a toolbar and which is treated differently by the XUL interpreter.


Icon for collpasing or expanding the contents of a toolbar.


Separator for toolbars. The difference with a basic separator is the use of themes to vary the appearance.


Empty separator, displays a blank space between buttons.


If one wants to place into the toolbar elements other than buttons and separators, one encapsulates them into a toolbaritem. For example a text input field.


We will create a small interface with a toolbar, some buttons and other graphic components and commands will be added to test it.

The toolbar is defined:


Two buttons are added, open and save, only the name changes compared to buttons as previously described:

        <toolbarbutton image="open.gif"/> 
        <toolbarbutton image="save.gif"/>

To add an element other than a button, actually a label and a text input field, it is encapsulates into a toolbaritem:

    <description value="To enter a URL"/>

To associate commands to buttons, that is as with menus, one assign a id to each button and one creates event handlers by the addEventListener method to which one passes the id in parameters.

Licence: (c) 2007 Xul.fr