Location: PHPKode > projects > Content*Builder > contentbuilder/plugins/article2/editor_v2/toolbars/Doc/innertut.htm
<!-- Copyright 1999 Microsoft Corporation. All rights reserved. -->
<!-- Author: Steve Isaac, Microsoft Corporation -->
<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title></title>
</head>
<body bgColor="ivory" style="FONT-FAMILY: Arial">
<p align="center"><font color="teal" size="7">DHTML Toolbars</font></p>
<p align="center"><font color="teal" size="6">Release Notes and Tutorial</font></p>
<p></p>
<h1>Introduction</h1>
<p>The DHTML Toolbars package provides full-function 
toolbars and menus, implemented <U>completely</U> in 
Dynamic HTML.&nbsp; Your toolbars can look and act like Microsoft Office 
toolbars (the default), or you can easily change the package's appearance and 
behavior.</p>
<p>The DHTML Toolbars package provides:</p>
<UL>
    <LI>Any number of toolbars, docked at the top or bottom 
    of the page. Toolbars appear to be part of the IE frame.
    <LI>Menus, submenus, buttons, pulldowns, text fields. 
    You can also implement your own toolbar elements in DHTML.
    <LI>Menus appear <STRONG>on top of 
    </STRONG>windows controls.
    <LI>Toggle behavior, radio behavior available for 
    buttons and menus.
    <LI>Microsoft Office style toolbar mouseover behavior.
    <LI>Toolbars can be dragged and repositioned in the 
    docking area.
    <LI>Complete programmatic support for adding, deleting 
    and modify menus, buttons and entire toolbars on the fly. Toolbars can be 
    hidden and shown programmatically.
    <LI>The system color scheme is supported, and toolbars 
    handle system color scheme changes on the fly.</LI></UL>
<p>Toolbar elements can contain arbitrary HTML. You can 
build toolbar buttons and menu items that look like a Windows application, or 
you can create your own look.</p>
<p>Try out the toolbar on the top of this page to get a 
sense of what they can do. Enter a search string, pull down the Contents menu to 
jump to a section, change the current selection to bold, etc.</p>
<p>The Toolbar package is included as a sample in the DHTML 
Editing Component SDK. The SDK can be downloaded from <a target=_blank href="http://www.microsoft.com/workshop/author/dhtml/edit/download.asp">http://www.microsoft.com/workshop/author/dhtml/edit/download.asp</a>&nbsp; 
The package is part of the <a target=_blank href="http://www.microsoft.com/workshop/author/dhtml/edit/default.asp">DHTML Editing Component SDK</a>. The DHTML editing control 
plus the Toolbars package allows you to build a full-featured WYSIWYG HTML 
editor on a Web page. After you've downloaded the SDK see the WebEdit sample for 
an example of this.</p>
<p>The rest of this document contains:</p>
<ul>
    <li><A href="innertut.htm#Tutorial" >A brief tutorial on how to use the package</A> 
    <li><A href="innertut.htm#Troubleshooting" 
    >Troubleshooting tips</A> 
     <h1><a name="Tutorial">Basic 
    Tutorial</a></h1>
<p>The section gives you the basics for using the DHTML 
    Toolbar package, and lets you get up and running quickly.</p>
<h2>Page Structure</h2>
<p>A Web page using DHTML toolbars must have the 
    following structure:</p>
<p><font face="System">&lt;head&gt;<br>&lt;link 
    REL=&quot;stylesheet&quot; TYPE=&quot;text/css&quot; 
    HREF=&quot;toolbars.css&quot;&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&nbsp;... Toolbar 
    definitions ...<br>&nbsp;... Content container ...<br>&lt;script LANGUAGE=&quot;Javascript&quot; 
    SRC=&quot;toolbars.js&quot;&gt;&lt;/script&gt;<br>&lt;script 
    LANGUAGE=&quot;Javascript&quot;&gt;tbScriptletDefinitionFile = 
    &quot;menubody.htm&quot;; &lt;/script&gt;<br>&lt;script 
    LANGUAGE=&quot;Javascript&quot; 
    SRC=&quot;tbMenus.js&quot;&gt;&lt;/script&gt;<br>&lt;/body&gt;</font><br><br></p>
<p>The Toolbar package is broken into two pieces: 
    toolbars and menus. Since the menu package cause additional page loading 
    overhead, you should only include it when you actually have menus on your 
    page.</p>
<p>The Toolbar package is made up of four files:
<ul>
    <li>toolbars.css: Toolbar style sheet.
    <li>toolbars.js: Toolbar code
    <li>tbMenus.js: Optional menu code. You only need 
        to include this if you are using menus.
    <li>menubody.htm: Menu body scriptlet code. You 
        only need this if you are using menus.</li></ul>
<p>You will typically put these files in a common 
    directory on your Web server so that different applications can all access a 
    common location.</p>
<p>Every page that uses the Toolbar package must:</p>
<ul>
    <li>Reference toolbar.css in the &lt;head&gt; 
        section of the document.
    <li>Include the toolbars.js file at the bottom of 
        the &lt;body&gt; section.
    <li>If you are using menus you need to add the 
        following after the toolbars.js file:
    <ul>
    <li>Set the tbScriptletDefinitionFile variable 
            to point to the tbscript.htm file.
    <li>Include the tbmenus.js file.&nbsp;</li></ul>
    <li>Put toolbar definitions as the first thing in 
        the &lt;body&gt; section.
    <li>Specify a content element (<A 
        href="innertut.htm#ContentElement" >see below</A>) The content element contains 
        all the non-toolbar content of the page. It can either be a control, 
        like the DHTML Editing control, or arbitrary HTML content enclosed in a 
        &lt;div&gt;.</li></ul>
<p>The Toolbar package manages the layout of the entire 
    page. It adjusts&nbsp; the toolbars and the content element when the user 
    resizes the page or changes how toolbars are docked.</p>
<p>Note: the Toolbar package defines many internal 
    functions, variables and attributes. Since these end up in the namespace of 
    your document, you need to be sure that you aren't colliding with them. The 
    Toolbar package uses the convention of preceding all its functions, 
    variables and attributes with 'tb' or 'TB'. If you avoid starting your 
    functions, variables and attributes with 'tb' or 'TB', you will be safe. 
</p>
<h2>Toolbar Definition</h2>
<p>Toolbars are specified via a series of nested 
    &lt;div&gt; tags. Each&nbsp; DIV represents a toolbar element, such as a 
    menu item, a toolbar button, or a toolbar itself. 
 </p>
<p>Each toolbar DIV must contain a class attribute, 
    which specifies the type of toolbar element this DIV represents. For 
    example, CLASS=tbMenu is a menu element, CLASS=tbToolbar is a toolbar.</p>
<p>Optional attributes on the toolbar divs provide 
    additional information such as whether a button is a toggle or a radio 
    button (TBTYPE=toggle, TBTYPE=radio), whether a toolbar is initially docked 
    on the top or bottom of the page (TBSTATE=dockedTop, TBSTATE=dockedBottom), 
    etc.&nbsp;</p>
<p>Our <A href="example1.htm" >first example</A> shows a three button toolbar on a page. The 
    content container&nbsp; simply has &quot;Hello World&quot; in it. The 
    example is live. Go ahead and try it.</p>
<iframe src="example1.htm" HEIGHT="66" WIDTH="150" style="BORDER-BOTTOM: teal solid 3px; BORDER-LEFT: teal solid 3px; BORDER-RIGHT: teal solid 3px; BORDER-TOP: teal solid 3px"></iframe>
<p><font face="System">&lt;head&gt;<br>&lt;link 
    REL=&quot;stylesheet&quot; TYPE=&quot;text/css&quot; 
    HREF=&quot;toolbars.css&quot;&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&lt;!-- Toolbar 
    definitions --&gt;<br>&lt;div 
    class=&quot;tbToolbar&quot; ID=&quot;Toolbar1&quot;&gt;<br>&nbsp; &lt;div class=&quot;tbButton&quot; ID=&quot;DECMD_CUT&quot; 
    TITLE=&quot;Cut&quot; onclick=&quot;alert('Cut button hit');&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;img class=&quot;tbIcon&quot; 
    src=&quot;images/cut.gif&quot; WIDTH=&quot;23&quot; 
    HEIGHT=&quot;22&quot;&gt;<br>&nbsp; &lt;/div&gt;<br>&nbsp; &lt;div class=&quot;tbButton&quot; 
    ID=&quot;DECMD_COPY&quot; TITLE=&quot;Copy&quot; onclick=&quot;alert('Copy 
    button hit');&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;img 
    class=&quot;tbIcon&quot; src=&quot;images/copy.gif&quot; 
    WIDTH=&quot;23&quot; HEIGHT=&quot;22&quot;&gt;<br>&nbsp; &lt;/div&gt;<br>&nbsp; &lt;div 
    class=&quot;tbSeparator&quot;&gt;&lt;/div&gt;<br>&nbsp; 
    &lt;div class=&quot;tbButton&quot; ID=&quot;DECMD_PASTE&quot; 
    TITLE=&quot;Paste&quot; onclick=&quot;alert('Paste button 
    hit');&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;img 
    class=&quot;tbIcon&quot; src=&quot;images/paste.gif&quot; 
    WIDTH=&quot;23&quot; HEIGHT=&quot;22&quot;&gt;<br>&nbsp; &lt;/div&gt;<br>&lt;/div&gt;<br>&lt;!-- Content element --&gt;<br>&lt;div id=&quot;tbContentElement&quot; 
    class=&quot;tbContentElement&quot; style=&quot;overflow:auto; 
    background-color: white; border: 2 inset white&quot;&gt;<br>&nbsp; Hello World!<br><br>&lt;/div&gt;<br><font face="System">&lt;script 
    LANGUAGE=&quot;Javascript&quot;&gt;tbScriptletDefinitionFile = 
    &quot;menubody.htm&quot;; &lt;/script&gt;</font>&lt;script 
    LANGUAGE=&quot;Javascript&quot; 
    SRC=&quot;toolbars.js&quot;&gt;&lt;/script&gt;<br>&lt;/body&gt;</font></p>
<p>&nbsp;This example shows several important 
    things:</p>
<ol>
    <li>The nesting of the toolbar DIVs reflects the 
        nesting in the resulting toolbar. The icons are contained within the 
        buttons, which are contained within the toolbar.
    <li>Every element except separators must have a 
        unique ID attribute. This is very important; leaving off the ID or 
        specifying duplicate IDs are the most common error when using the 
        Toolbar package.
    <li>The TITLE attribute provides the tooltip for a 
        toolbar button. Try hovering over the buttons in the example to see 
        these. The TITLE attribute is optional.
    <li>The action performed when a toolbar element is 
        clicked is specified via the onclick handler on the toolbar DIV. Click 
        on the toolbar buttons in the example to see this.
    <li>The Content element is identified by having its 
        class set to tbBodyObject. There must always be one and only one element 
        on the page with class=tbBodyObject.</li></ol>
<p></p>
<h2>Types of Toolbar Elements</h2>
<p>The available toolbar elements are:</p>
<ul>
    <li><strong>Toolbars. 
        </strong>You can create any number of individual toolbars on a page. 
        Toolbars can contain any mix of toolbar buttons, menus, and general HTML 
        elements within them. Toolbar elements are specified by setting 
        class=tbToolbar;
    <li><strong>Toolbar Buttons. 
 
    </strong>Specified by setting class=tbButton. Toolbar buttons must 
        contain an icon within their DIV. An icon is an &lt;img&gt; element with 
        a <strong>class=tbIcon</strong>. Icon image size 
        must be the same for all icons; it is set to 23 x 22 in the default 
        Toolbar package. You can change this size if you'd like by modifying 
        toolbars.css.<strong></strong>
    <li><strong>Menus. </strong>A 
        menu contains arbitrary HTML used to display itself on a toolbar, plus 
        the menu items and submenus that make up its menu's body.&nbsp; A menu 
        is specified by setting class=tbMenu.
    <li><strong>Menu Item. 
        </strong>A menu item contains arbitrary HTML that makes up its display 
        contents. Menu items can optionally contain an icon, defined in the same 
        manner as a toolbar button icon. Menu items are specified by setting 
        class=tbMenuItem. 
    <li><strong>Submenus. 
 
    </strong>Submenus are specified by setting class=tbSubmenu. A submenu 
        contains its HTML display contents, plus&nbsp; menu items and other 
        submenus that make up the submenu body.
    <li><strong>General HTML 
        Elements 
    </strong>for implementing dropdowns, text boxes or whatever 
        else you can think of. General elements are specified by setting 
        class=tbGeneral on the HTML element and specifying a width style 
        attribute (for example, style=&quot;width:100&quot;). General HTML 
        elements must be fixed width.
    <li><strong>Separators. 
        </strong>A toolbar or menu separator is specified by a DIV with 
        class=tbSeparator.</li></ul>
<p>Toolbar buttons and menu items support several types 
    of behavior, specified via the 
<strong>TBTYPE</strong> 
    attribute:</p>
<ul>
    <li><strong>Button. 
 
    </strong>Provides standard one-shot button behavior. This is the 
        default.
    <li><strong>Toggle. 
        </strong>The button or menu toggles between the checked and unchecked 
        state each time the user clicks on it. Specified by including a 
        TBTYPE=toggle attribute in the DIV.
    <li><strong>Radio button. 
 
    </strong>A group of buttons work together so that only one of them is on 
        at any time. Specified by including a TBTYPE=radio attribute in the DIV, 
        and setting the NAME attribute to a common value for all the elements in 
        a given group.</li></ul>
<p>The 
<strong>TBSTATE</strong> 
    attribute is used to specify the state of toolbar buttons and menu items. 
    TBSTATE has the following possible values:</p>
<ul>
    <li><strong>Unchecked.</strong>Button is not pressed. Menu item is normal.
    <li><strong>Checked.</strong>&nbsp; Button is depressed. Menu item is checked. 
        If the menu item has an icon, then the icon is depressed.
    <li><strong>Gray.</strong>&nbsp;<strong> 
    </strong>Element 
        is inactive. The element doesn't respond to mouse clicks, and is 
        displayed grayed out.</li></ul>
<p>The <A href="example2.htm" >next example</A> has two toolbars that contain examples of each 
    of the types, behaviors and states described above. Since it uses menus, the 
    menu script blocks are included. Try it out:</p>
<p>
<iframe src="example2.htm" HEIGHT="255" WIDTH="412" style="BORDER-BOTTOM: teal solid 3px; BORDER-LEFT: teal solid 3px; BORDER-RIGHT: teal solid 3px; BORDER-TOP: teal solid 3px; HEIGHT: 255px; WIDTH: 412px"></iframe></p>
<p>
Instead of reviewing the entire sample we'll focus 
    in on a few key areas. First, the structure of menus. Here's the source to 
    the second menu, with the menu contents shown in red:</p>
<p><font face="System">&lt;div 
    class=&quot;tbToolbar&quot; ID=&quot;Toolbar2&quot;&gt;&nbsp; &lt;div 
    class=&quot;tbMenu&quot; ID=&quot;Menu2&quot;&gt;<br>&nbsp;&nbsp;&nbsp; <font color="red">Second</font><br>&nbsp;&nbsp;&nbsp; &lt;div 
    class=&quot;tbMenuItem&quot; ID=&quot;FORMAT_FONT&quot; 
    TBTYPE=&quot;toggle&quot; onclick=&quot;alert('Toggle');&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="red">Toggle Menu Item</font><br>&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div 
    class=&quot;tbSeparator&quot;&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div class=&quot;tbMenuItem&quot; 
    ID=&quot;FORMAT_JUSTIFYLEFT&quot; TBTYPE=&quot;radio&quot; 
    NAME=&quot;MenuJustify&quot; onclick=&quot;alert('Left Radio');&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="red" face="">Left Radio</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img class=&quot;tbIcon&quot; 
    src=&quot;images/alignleft.gif&quot; WIDTH=&quot;23&quot; 
    HEIGHT=&quot;22&quot;&gt;<br>&nbsp;&nbsp;&nbsp; 
    &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div 
    class=&quot;tbMenuItem&quot; ID=&quot;FORMAT_JUSTIFYCENTER&quot; 
    TBTYPE=&quot;radio&quot; TBSTATE=&quot;checked&quot; 
    NAME=&quot;MenuJustify&quot; onclick=&quot;alert('Center 
    Radio');&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<font color="red" face="">Center Radio</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img 
    class=&quot;tbIcon&quot; src=&quot;images/center.gif&quot; 
    WIDTH=&quot;23&quot; HEIGHT=&quot;22&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div class=&quot;tbMenuItem&quot; 
    ID=&quot;FORMAT_JUSTIFYRIGHT&quot; TBTYPE=&quot;radio&quot; 
    NAME=&quot;MenuJustify&quot; onclick=&quot;alert('Right 
    Radio');&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="red" face="">Right Radio</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img 
    class=&quot;tbIcon&quot; src=&quot;images/alignright.gif&quot; 
    WIDTH=&quot;23&quot; HEIGHT=&quot;22&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div 
    class=&quot;tbSeparator&quot;&gt;&lt;/div&gt;<br></font><font face="System">&nbsp;&nbsp;&nbsp; 
    &lt;div class=&quot;tbSubmenu&quot; ID=&quot;SUBMENU&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="red" face="">Submenu</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=&quot;tbMenuItem&quot; 
    ID=SUBMENU1 onclick=&quot;alert('red');&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<font color="red" face="">&lt;span style=&quot;color:red&quot;&gt; Red 
    &lt;/span&gt;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div 
    class=&quot;tbMenuItem&quot; ID=SUBMENU2 
    onclick=&quot;alert('green');&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<font color="red" face="">&lt;span style=&quot;color:green&quot;&gt; Green 
    &lt;/span&gt;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div 
    class=&quot;tbMenuItem&quot; ID=SUBMENU3 onclick=&quot;alert('bold 
    yellow');&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="red" face="">&lt;span style=&quot;color:yellow&quot;&gt; &lt;b&gt; 
    Bold Yellow &lt;/b&gt; &lt;/span&gt;<br></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp; 
    &lt;/div&gt;</font></p>
<p>&nbsp;Note how menu items and submenus are nested 
    within a menu div. Also note how a submenu is both an entry in the parent 
    menu as well as containing its own menu items (and submenus).</p>
<p>Next, lets look at tbGeneral items. Here's the 
    source to the font name element:</p>
<p><font face="System">&lt;select 
    ID=&quot;FontName&quot; class=&quot;tbGeneral&quot; 
    style=&quot;width:140&quot; TITLE=&quot;Font Name&quot; 
    onchange=&quot;alert('Font name set to: ' + FontName.value);&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;option value=Arial&gt;Arial<br>&nbsp;&nbsp;&nbsp; &lt;option value=&quot;Arial 
    Narrow&quot;&gt;Arial Narrow<br>&nbsp;&nbsp;&nbsp; 
    &lt;option value=System&gt;System<br>&nbsp;&nbsp;&nbsp; 
    &lt;option value=&quot;Times New Roman&quot;&gt;Times New Roman<br>&nbsp;&nbsp;&nbsp; &lt;option 
    value=Verdana&gt;Verdana<br>&nbsp; 
    &lt;/select&gt;</font></p>
<p>Note that you must always specify an explicit width 
    for tbGeneral items (<font face="System">style=&quot;width:140&quot;</font> in this example). tbGeneral 
    elements are much more open-ended than other toolbar elements. The Toolbar 
    package doesn't support TBTYPE or TBSTATE. for tbGeneral items; you need to 
    do these operations on your own, in an appropriate fashion for the element 
    you are using. You also need to decide which events to handle for the 
    particular element (the onchange event is used in this example).</FONT></p>
<h2>Handling Toolbar Events</h2>
<p>Toolbar buttons (tbButton) and menu items 
    (tbMenuItem) only support the <strong>onclick</strong> 
    event; no other events are fired. The onclick event does not use the 
    standard <em>event</em> object; instead, you should use 
    the <em>tbEventSrcElement</em> object defined in 
    toolbars.js if you have a common event handler and need to figure out which 
    element generated the event. Event handlers cannot be modified or reset at 
    runtime.</p>
<p>Menus (tbMenu) and submens (tbSubmenu) support the 
<strong>tbOnMenuShow</strong> event. This event is 
    fired immediately before the menu is shown. This gives the host the 
    opportunity to dynamically set menu state. Menus and submenus do not support 
    any other events besides tbOnMenuShow.</p>
<p>As mentioned above, tbGeneral elements fire all 
    events and you need to choose which ones you pick up.</p>
<p>No events are fired for the other toolbar elements. 
    </p>
<h2>Setting Toolbar Element State</h2>
<p>You can programmatically set the state of a&nbsp; 
    toolbar element state at any time by calling the <strong>TBSetState(<em>element, newState)</em></strong> 
    function. This allows you to check, uncheck or gray out an element. 
    TBSetState takes an element&nbsp; object and the new state value for the 
    object. </p>
<p>When changing the state of a menu item, 
    TBRebuildMenu must be called in order that the new menu item state is 
    reflected in the menu. Typically the state of menu items on a given menu are 
    updated before the menu is shown in the menu's tbOnMenuShow handler, then 
    TBRebuildMenu is called.&nbsp; See the reference documentation section for 
    details on TBRebuildMenu.
<h2><a name="ContentElement">Specifying the Content Element</a></h2>
<p>The DHTML Toolbars package manages the layout of the 
    entire page. Thefore, you need to create a contents element that contains 
    all the non-toolbar data on the page. You identify the content element by 
    setting its ID to &quot;tbContentElement&quot; and its CLASS to 
    &quot;tbContentElement&quot;.</p>
<p>To host arbitrary content on the page, wrap a 
    &lt;div&gt; around it, as follows:</p>
<p><font face="System">&lt;div 
    id=&quot;tbContentElement&quot; class=&quot;tbContentElement&quot; 
    style=&quot;overflow:auto; background-color: white; border: 2 inset white; 
    padding-left:10; padding-right:10&quot;&gt;<br></font><font face="System">&nbsp; ... Content Here 
    ...<br></font><font face="System">&lt;/div&gt;</font></p>
<p>You can also have the contents of the page be 
    composed of a control, such as the DHTML Editing control. For 
    example:</FONT></p>
<p><font face="System">&lt;OBJECT 
    id=&quot;tbContentElement&quot; class=&quot;tbContentElement&quot; 
    classid=&quot;clsid:683364AF-B37D-11D1-ADC5-006008A5848C&quot;&gt;<br>&lt;/OBJECT&gt;</font></p>
<p>Another approach is to have the contents and the 
    toolbars be on seperate pages and use an &lt;iframe&gt; to put the contents 
    into the toolbar page. This allows you to cleanly seperate contents from 
    code, and easily reuse a set of toolbars on many different pages, 
    ie:</FONT></p>
<p></FONT><font face="System">&lt;iframe id=&quot;tbContentElement&quot; 
    class=&quot;tbContentElement&quot;&nbsp; 
    src=&quot;contentFile.htm&quot;&gt;&lt;/iframe&gt;</font></p>
<p>The downside of this approach is that menus will not 
    be dismissed if you click inside the &lt;iframe&gt;; there is no way to get 
    the mousedown event from the &lt;iframe&gt; to outer page.</p>
<p>A final approach which solves this problem is to use 
    the DHTML Edit control in browse mode to host the inner page, ie:</p>
<p><font face="System">&lt;OBJECT 
    id=&quot;tbContentElement&quot; class=&quot;tbContentElement&quot; 
    classid=&quot;clsid:683364AF-B37D-11D1-ADC5-006008A5848C&quot;&gt;<br>&lt;PARAM NAME=&quot;BrowseMode&quot; 
    VALUE=&quot;-1&quot;&gt;<BR></font><font face="System">&lt;/OBJECT&gt;</font></p>
<p>You then use the LoadURL method to load up the 
    document with the inner page.</p>
<p>It is important that you do not have anything other 
    than toolbar definitions, a content element and the script file includes in 
    the &lt;body&gt; section of your page.</p>
<p>The WebEdit sample shows how the Toolbars package 
    can be used to build a complete HTML editor on a Web page without menus. 
    From the WebEdit sample directory, load the file NoMenus.htm to see an 
    example of this. Load the file FullEdit.htm for an example of an HTML editor 
    that uses menus. Note: you must <a target=_blank href="http://www.microsoft.com/workshop/author/dhtml/edit/download.asp">install the DHTML Editing component</a> 
    in order to run this sample.</FONT></p></FONT>
<H1></FONT><FONT face=Arial>Advanced Tutorial</FONT></H1>
<P><FONT face=Arial></FONT><FONT face=Arial>This section shows some of the more advanced 
    techniques.</FONT></P>
<h2>Docking, Hiding and Moving Toolbars</FONT></h2>
<p></FONT>Toolbars themselves have state. The 
<strong>TBSTATE</strong> attribute can be usedon any toolbar. 
    It has the following values when used on a toolbar:</FONT></p>
<ul>
    <li></FONT><strong>dockedTop:</strong> Docked to the top of the screen</FONT>
    <li><strong>dockedBottom: 
 
    </strong>Docked to the bottom of the screen</FONT>
    <li><strong>hidden: 
        </strong>Not visible.</FONT></li></ul>
<p></FONT>Toolbar state can be specified initially or 
    changed dynamically via TBSetState().</FONT></p>
<p></FONT>Toolbars will be able to be dragged around by 
    the user to reorder them and move them between the top and bottom docking 
    locations. At present this functionality is not yet implemented. 
    Unfortunately it is not be possible to implement floating toolbars, since 
    they can't always be kept on top when there are windowed controls on the 
    page.</FONT></p>
<H2></FONT><FONT face=Arial>Building Toolbars and Menus on the Fly</FONT></H2>
<P><FONT face=Arial></FONT><FONT face=Arial>An extremely useful facility is the ability to 
    specify the contents of toolbars and menus on the fly programmatically. The 
    Toolbar package allows you to add and delete any element (and entire 
    toolbars). You can also change any aspect of an existing element on the 
    fly.</FONT></P>
<P><FONT face=Arial></FONT><FONT face=Arial>The basic approach is to make your changes 
    to the toolbar divs using the standard IE4 DOM, then call a function to let 
    the toolbar package know that you've made changes. In order to optimize 
    performance, you should make all your changes via the DOM, then call the 
    toolbar package once.</FONT></P>
<P><FONT face=Arial>There are two 
    Toolbar package functions that you call to notify of changes:</FONT></P>
<UL>
    <LI><FONT face=Arial><STRONG>TBRebuildToolbar.</STRONG> Use when the contents of 
        a toolbar has changed, or to add a completely new toolbar.</FONT>
    <LI><FONT face=Arial><STRONG>TBRebuildMenu. </STRONG>Use when the contents of a 
        menu or submenu has changed. Can add new submenus.</FONT></LI></UL>
<P><FONT face=Arial>See the 
    reference documentation section for details on these calls.</FONT></P>
<P><FONT face=Arial>The Contents 
    menu on <A href="tutorial.htm" >the current 
    page</A> is a good example of how to build menus on the fly. It creates a 
    heirarchical menu structure for all the &lt;H1&gt; and &lt;H2&gt; elements 
    on this page. Try it out!</FONT></P>
<P><FONT face=Arial>There is one 
    tricky issue with building menus on the fly. The toolbar package needs to 
    know the maximum nesting depth of the submenu on the page when the page is 
    first being built. Therefore, you might need to statically declare some 
    dummy submenus if you are building your menus on the fly. That is exactly 
    what the Contents menu example does, declaring a 
    &quot;DummyContentsSubmenu&quot; so that there is one level of nesting when 
    this page is first built.</FONT></P>
<h1></FONT></FONT><FONT face=Arial>Reference Documentation</FONT></h1>
<H2></FONT></FONT><FONT face=Arial>Styles</FONT></H2>
<P>Set the class attribute of a toolbar div to one of 
    these styles in order to specify the type of toolbar element it is.</P>
<P><STRONG>tbToolbar. 
 
 </STRONG>Toolbar.<BR><STRONG>tbButton.</STRONG> Toolbar button <BR><STRONG>tbIcon.</STRONG> Toolbar or menu icon 
<BR><STRONG>tbSeparator.</STRONG> Toolbar or menu 
    sepertor 
<BR><STRONG>tbMenu.</STRONG> Pulldown menu <BR><STRONG>tbMenuItem.</STRONG> Menu item <BR><STRONG>tbSubmenu.</STRONG> Submenu <BR><STRONG>tbGeneral.</STRONG> 
    Arbitrary HTML element in a toolbar. <BR><STRONG>tbContentElement.</STRONG> Identifies an HTML element 
    as the page body. One and only one element on the page must have this class. 
    The element must also have its ID set to &quot;tbContentElement&quot;.</P>
<H2><FONT face=Arial>Attributes</FONT> 
 </H2>
<P><STRONG></STRONG>Optional 
    toolbar element characteristics are set via these attributes.</P>
<P><STRONG>TBTYPE.</STRONG> 
    Element type. If no TBTYPE attribute is specified then the element is a 
    simple button. Possible values are: </P>
<UL>
    <LI><STRONG>toggle</STRONG><STRONG>. </STRONG>Toggle 
        between on and off each time a button is pressed.
    <LI><STRONG>radio.</STRONG> 
        Only one button is on in a group. Buttons with the same NAME attribute 
        belong to a group.</LI></UL>
<P>Toolbars: can have a TBTYPE attribute. Values 
    are:</P>
<UL>
    <LI><STRONG>noMouseOver. 
 
    </STRONG>Don't show mouse-over visual feedback.</LI></UL>
<P><STRONG>TBSTATE.</STRONG> State 
    of the element. Possible values are: </P>
<UL>
    <LI><STRONG>gray</STRONG> 
        (Disabled)
    <LI><STRONG>checked</STRONG>
    <LI><STRONG>unchecked</STRONG> 
 
 </LI></UL>
<P>If no TBSTATE attribute is specified then the state 
    is unchecked. Toolbars can also have a TBSTATE attribute. Values are:</P>
<UL>
    <LI><STRONG>dockedTop</STRONG>
    <LI><STRONG>dockedBottom</STRONG>
    <LI><STRONG>hidden</STRONG></LI></UL>
<P>Default is dockedTop.</P>
<P><STRONG>tbOnMenuShow. 
    </STRONG>For tbMenu and tbSubmenu only. Event handler that is called 
    immediately prior to showing a menu or submenu. Use this to set the state of 
    menu items. This attribute can either be set on individual menus and 
    submenus, or on a toolbar, in which case it is fired for every menu and 
    submenu within that toolbar. The menu that is about to be shown is provided 
    in tbEventSrcElement (see below).</P>
<H2><FONT face=Arial>Functions</FONT></H2>
<P>Programmatic interfaces to the toolbar package.</P>
<P><STRONG>TBSetState(<EM>element</EM>,</STRONG><STRONG> <EM>newState</EM>) 
<BR></STRONG>Sets 
    the state of <EM>element</EM> to <EM>newState</EM>. 
<EM>element </EM>is an object. <EM>newState 
 </EM>is a string containing a TBSTATE 
    value.</P>
<P><STRONG>TBRebuildToolbar(</STRONG><STRONG><EM>toolbar</EM></STRONG><STRONG>, 
<EM>rebuildMenus</EM>)&nbsp; </STRONG><BR>Use this routine to change the contents of a toolbar on the fly. Make 
    all changes (adding, removing and modifying toolbar elements), then call 
    this routine once. This routine can also be used to add an entirely new 
    toolbar. <EM>toolbar</EM> is an object, the toolbar to 
    rebuild. 
<EM>rebuildMenus </EM>is a boolean that 
    specifies whether the menus and submenus contained in the toolbar should 
    also be rebuilt. Only set this to true if you need them rebuilt; its an 
    expensive operation. </P>
<P><STRONG>TBRebuildMenu(<EM>menu</EM>, <EM>rebuildSubmenus</EM>)</STRONG> 
<BR>Use this 
    routine to change the contents of a menu or a submenu on the fly. Make all 
    changes (adding, removing and modifying menu items), then call this routine 
    once.<EM> menu </EM>is an object; the menu to rebuild. 
<EM>rebuildSubmenus</EM> is a boolean that specifies 
    whether the submenus on this menu should also be rebuilt. TBRebuildMenu must 
    be called after changing the state of menu items using TBSetState. </P>
<H2><FONT face=Arial>Global 
    Variables</FONT></H2>
<P><STRONG>tbEventSrcElement.</STRONG> Contains the element object that an event 
    was fired on. The toolbar package can't support the standard event object; 
    this object performs a similar function. </P>
<H2><FONT face=Arial>Error Return 
    Values 
 </FONT></H2>
<P><STRONG>TB_STS_OK. 
 
 </STRONG>Successful return value.<BR><STRONG>TB_E_INVALID_CLASS. </STRONG>An element has an 
    unrecognized class attribute (probably a misspelling).<BR><STRONG>TB_E_INVALID_TYPE. 
</STRONG>Invalid 
    TBTYPE value.<BR><STRONG>TB_E_INVALID_STATE.</STRONG> Invalid TBSTATE value.<BR><STRONG>TB_E_NO_ID. 
 </STRONG>Element does not 
    have an ID. </P>
<h1><a name="Troubleshooting">Troubleshooting Tips</a></FONT></FONT></h1>
<ol>
    <li></FONT>The Toolbar package does as much error 
        checking as possible. If it finds a problem it will put up an alert 
        dialog with the nature of the problem, and try to pinpoint the element 
        that caused the problem. However, it can't catch 
        everything.</FONT></FONT>
    <li></FONT>The biggest problem people seem to 
        encounter when setting up toolbars is ensuring that every toolbar 
        element (except separators) has an id, and that all ids are unique. This 
        problem often comes up when you create a new set of toolbars by copying 
        previous ones.</FONT>
    <li></FONT>The next biggest problem is improper 
        nesting of divs. It is useful to keep a strict indentation style when 
        declaring toolbars; that makes it easier to see when the nesting is 
        off.</FONT>
    <li></FONT>Another common problem is missing quotes 
        in attribute strings and onclick handlers. If you miss a finishing quote 
        then the browser will sometimes include part of the next div in the 
        string, throwing everything off.</FONT>
    <li></FONT><FONT 
    face=Arial>Be 
        sure that you get the class names correct, including capitalization. For 
        example, class=&quot;tbSubMenu&quot; won't work, its got to be 
        class=&quot;tbSubmenu&quot;.</FONT>
    <li></FONT>Sometimes you will get a JavaScript 
        runtime error while the page is initializing. This almost always means 
        that one of the problems listed above has occured. The most effective 
        way to troubleshoot&nbsp; the problem in this case is to comment out 
        your toolbar definitions, and incrementally uncomment elements until you 
        find the problem.</FONT>
    <li>Does the name of any of your functions, 
        attributes or variables start with 'tb' or 'TB'? Those names might be 
        colliding with internal Toolbar package names.</FONT>
    <li></FONT>Note to Visual Interdev 6.0 users: Quick 
        View sometimes fails to run complex toolbar pages. One or more scripting 
        errors are displayed when this happens. Always try Viewing in Browser 
        first thing if you run into a problem in Quick View.</FONT><br></li></ol>
</body>
</html>
Return current item: Content*Builder