Each type of toolbar item has its own tag and set of required and optional attributes. You can define toolbar items either inside or outside of toolbars. In general, it is better to define them outside of toolbars and refer to them within toolbars using the itemref tag.
You can define the following types of items in a toolbar.
This push button executes a specific command when you click it. It looks and acts the same as the Reference button on the Dreamweaver toolbar.
id, image, tooltip, command, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {domRequired}, {enabled}, {update}, {arguments}
For a description of each attribute, see Item tag attributes.
<BUTTON ID="DW_DocRefresh"
image="Toolbars/images/MM/refresh.gif"
disabledImage="Toolbars/images/MM/refresh_dis.gif"
tooltip="Refresh Design View (F5)"
enabled="((dw.getDocumentDOM() != null) && (dw.getDocumentDOM().getView() != 'browse')
&& (!dw.getDocumentDOM().isDesignViewUpdated()))"
command="dw.getDocumentDOM().synchronizeDocument()"
update="onViewChange,onCodeViewSyncChange"/>
A check button is a button that has a checked or unchecked state and that executes a specific command when clicked. When it is checked, it appears pressed in and highlighted. When it is not checked, it appears flat. Dreamweaver implements the following states for the check button: Mouse-over, Pressed, Mouse-over-while-pressed, and Disabled-while-pressed. The handler that is specified by the checked attribute or the isCommandChecked() function must ensure that clicking the check button causes the button’s state to toggle.
id, {showIf}, image, {disabledImage}, {overImage}, tooltip, {label}, {file}, {domRequired}, {enabled}, checked, {update}, command, {arguments}
For a description of each attribute, see Item tag attributes.
<CHECKBUTTON ID="DW_LiveDebug"
image="Toolbars/images/MM/debugview.gif"
disabledImage="Toolbars/images/MM/globe_dis.gif"
tooltip="Live Debug"
enabled="dw.canLiveDebug()"
checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'browse'"
command="dw.toggleLiveDebug()"
showIf="dw.canLiveDebug()"
update="onViewChange"/>
A radio button is exactly the same as a check button, except that when it is off, it appears as a raised button. Dreamweaver implements the following states for the radio button: Mouse-over, Pressed, Mouse-over-while-pressed, and Disabled-while-pressed. Dreamweaver does not enforce mutual exclusion between radio buttons. The handler that the checked attribute or the isCommandChecked() function specifies must ensure that the checked and unchecked states of radio buttons are consistent with each other.
Radio buttons act the same as the Code view, Design view, and Code and Design view buttons on the Dreamweaver document toolbar.
id, image, tooltip, checked, command, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {domRequired}, {enabled}, {update}, {arguments}
For a description of each attribute, see Item tag attributes.
<RADIOBUTTON ID="DW_CodeView"
image="Toolbars/images/MM/codeView.gif"
disabledImage="Toolbars/images/MM/codeView_dis.gif"
tooltip="Show Code View"
domRequired="false"
enabled="dw.getDocumentDOM() != null"
checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'code'"
command="dw.getDocumentDOM().setView('code')"
update="onViewChange"/>
A menu button is a button that invokes the context menu that is specified by the menuid attribute. Dreamweaver implements Mouse-over and Pressed states for menu buttons. Dreamweaver does not draw the menu arrow, which is the downward-pointing arrow that indicates menu items are attached to the button; you must include it in your icon. The File Management and Code Navigation buttons on the Dreamweaver document toolbar are examples of menu buttons.
id, image, tooltip, menuID, domRequired, enabled, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {update}
For a description of each attribute, see Item tag attributes.
<MENUBUTTON ID="DW_CodeNav"
image="Toolbars/images/MM/codenav.gif"
disabledImage="Toolbars/images/MM/codenav_dis.gif"
tooltip="Code Navigation"
enabled="dw.getFocus() == 'textView' || dw.getFocus() == 'html'"
menuID="DWCodeNavPopup"
update="onViewChange"/>
A drop-down menu (or pop-up menu) is a noneditable menu that executes a specific command when you select an entry and the menu updates itself, based on an attached JavaScript function. The drop-down menu looks and acts the same as the Format control in the Text Property inspector, except it’s a standard size instead of the small Property inspector size.
id, tooltip, file, enabled, checked, value, command, {showIf}, {label}, {width}, {domRequired}, {update}, {arguments}
For a description of each attribute, see Item tag attributes.
<dropdown id="Font_Example"
width="115"
tooltip="Font"
domRequired="false"
file="Toolbars/mine/fontExample.htm"
update="onSelChange"/>
A combo box is an editable pop-up menu that executes its command when you select an entry or when the user makes an edit in the text box and switches focus. The menu looks and acts the same as the Font control on the Text Property inspector, except it’s a standard size instead of the small Property inspector size.
id, file, tooltip, enabled, value, command, {showiI}, {label}, {width}, {domRequired}, {update}, {arguments}
For a description of each attribute, see Item tag attributes.
<COMBOBOX ID="Address_URL"
width="300"
tooltip="Address"
label="Address: "
file="Toolbars/MM/AddressURL.htm"
update="onBrowserPageBusyChange"/>
An edit control box is a text-editing box that executes its command when the user changes text in the box and switches focus.
id, tooltip, file, value, command, {showIf}, {label}, {width}, {domRequired}, {enabled}, {update}, {arguments}
For a description of each attribute, see Item tag attributes.
<EDITCONTROL ID="DW_SetTitle"
label="Title: "
tooltip="Document Title"
width="150"
file="Toolbars/MM/EditTitle.htm"/>
A color picker is a panel of colors that does not have an associated text box that executes its command when the user selects a new color. This panel looks and acts the same as the color picker on the Dreamweaver Property inspector. You can specify a different icon to replace the default icon.
id, tooltip, value, command, {showIf}, {image}, {disabledImage}, {overImage}, {label}, {colorRect}, {file}, {domRequired}, {enabled}, {update}, {arguments}
For a description of each attribute, see Item tag attributes.
<colorpicker id="Color_Example"
image="Toolbars/images/colorpickerIcon.gif"
disabledImage="Toolbars/images/colorpickerIconD.gif"
colorRect="0 12 16 16"
tooltip="Text Color"
domRequired="false"
file="Toolbars/mine/colorExample.htm"
update="onSelChange"/>