Cold Fusion Tag for dhtmlXToolbar

This chapter also included into main documentation for dhtmlXToolbar. <cf_dhtmlXToolbar name="toolbar" width="250" height="250" orientation="h" title="Demo toolbar" align="left" JSPath="../" CSSPath="../" xmlFile="tree.xml" style="background-color:whitesmoke;border:1px solid blue;" onSelect="onNodeSelect"> ...configuration xml... </cf_dhtmlXToolbar>
  • name - [optional] name of the tree js object to use in javascript, if skiped, then name autogenerated
  • width - [optional] width of the toolbar
  • height - [optional] height of the toolbar
  • orientation - [optional] set horisontal ("h") or vertical ("v") orientation of toolbar ( horisontal orientation is default )
  • title - [optional] title of toolbar
  • align - [optional] align of toolbar buttons (left,right,center for horisontal toolbar, top,bottom,middle for vertical toolbar)
  • JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default
  • CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default
  • xmlFile - [optional] url of the configuration xml file
  • style - [optional] style for the toolbar box
  • onSelect - [optional] javascript function to call on button selection

  • For description of optional configuration xml - see chapter "Configuring with XML"

    Minimal possible tag syntax with on-page xml: <cf_dhtmlXToolbar> <ImageButton src="../imgs/iconSave.gif" height="25" width="25" id="0_save" tooltip="Save"/> </cf_dhtmlXToolbar> Minimal possible tag syntax with server-side xml: <cf_dhtmlXToolbar xmlFile="toolbar.xml"> </cf_dhtmlXToolbar> With common used attributes <cf_dhtmlXToolbar name="aToolBar" jsPath="../js/" cssPath="../css/" title="Demo Toolbar" onSelect="jsOnClick" height="25px"> <ImageTextButton src="../imgs/iconDelete.gif" height="25" width="100px" id="0_delete" tooltip="Delete">Delete</ImageTextButton> <divider id="div_4"/> <SelectButton id="0_select" width="150px" height="16px"> <option value="0">Mode 0</option> <option value="1">Mode 1</option> <option value="2">Mode 2</option> <option value="3">Mode 3</option> </SelectButton> </cf_dhtmlXToolbar> Vertical designed toolbar <cf_dhtmlXToolbar jsPath="../js/" cssPath="../css/" orientation="v" width="25px"> <ImageButton src="../imgs/iconSave.gif" height="25" width="25" id="0_save" tooltip="Save"/> <ImageButton src="../imgs/iconPrint.gif" height="25" width="25" id="0_print" tooltip="Print"/> <divider id="div_1"/> <ImageButton src="../imgs/iconNewNewsEntry.gif" height="25" width="25" id="0_new" tooltip="New"/> <ImageButton src="../imgs/icon20.gif" height="25" width="25" id="0_form" tooltip="Form"/> <divider id="div_2"/> <ImageButton src="../imgs/iconSearch.gif" height="25" width="25" id="0_search" tooltip="Search"/> </cf_dhtmlXToolbar>