domapi.Toolbar

See also: Elm
See also: Component

Functions as a container for Speedbuttons or whatever else you can cram into it ;) Supports automatic flowing of child elements.

Toolbar is a simple panel

The toolbar component has very few added properties or methods. It is simply a container for Speedbuttons or any other element. By default it will render itself as a 26px high raised panel. You can modify its appearence through the standard DomAPI routines or through its constructor. Omit the w property of the construct to have the Toolbar stretch across its parent container.

Helper Functions

The two helper functions Toolbar.spaceControls() and Toolbar.addSpacer() help out with laying out controls. There are no functions to add buttons, you simply use the Toolbar as the parent for any you create normally.

When adding many buttons to a toolbar, it isn't nescessary to provide absolute coordinates for each one. You can simply add them all in the order you want them displayed, and then make a call to Toolbar.spaceControls() which will automatically flow them across the control.
To create logical groupings of controls, use Toolbar.addSpacer() to add in dividers.

Example:

<script src="../src/domapi.js"></script>
<script>
   domapi.loadUnit("speedbutton");
   domapi.loadUnit("toolbar");
   onload = function() {
     toolbar1 = domapi.Toolbar({});
     newBtn1   = domapi.Speedbutton({parent:toolbar1, src:"../bin/new.gif",   hint:"New",   onclick:myClick});
     openBtn1  = domapi.Speedbutton({parent:toolbar1, src:"../bin/open.gif",  hint:"Open",  onclick:myClick});
     toolbar1.addSpacer();
     saveBtn1  = domapi.Speedbutton({parent:toolbar1, src:"../bin/save.gif",  hint:"Save",  onclick:myClick});
     printBtn1 = domapi.Speedbutton({parent:toolbar1, src:"../bin/print.gif", hint:"Print", onclick:myClick});
     toolbar1.spaceControls();
  };
  function myClick(E){
    alert("You clicked the '" + this.hint + "' button.");
  };
</script>

---

Toolbar Example: system, aqua

---

Toolbar Constructor

var toolbar1 = domapi.Toolbar({
  spacing        : 2,
  orientation    : "horz",
  edgeBorderTop  : 3,
  edgeBorderLeft : 3 
});

Constructor Details

Parameter	Type	Default	Description
spacing	integer	2	Amount of space to place between each button.
orientation	String	horz
edgeBorderTop	integer	3	Amount of top-padding. Controls the space above the buttons.
edgeBorderLeft	integer	3	Amount of left-padding. Controls the space to the left of the first button.

Methods unique to domapi.Toolbar

---

back to top back to top