<script type="text/javascript" src="../../codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../codebase/dhtmlxtoolbar.js"></script>
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"></link>
 
<div style="height: 150px;"><div id="toolbarObj"></div></div>
<script>
var toolbar;
function doOnLoad() {
    var toolbarData = {
        parent: "toolbarObj",
        icon_path: "../common/imgs/",
        items: [{
            type: "buttonSelect",
            id: "new",
            text: "New",
            img: "new.gif",
            img_disabled: "new_dis.gif",
            options: [{
                id: "new_text",
                type: "obj",
                text: "Text Document",
                img: "text_document.gif"
            }, {
                id: "new_excel",
                type: "obj",
                text: "Stylesheet",
                img: "stylesheet.gif"
            }, {
                id: "new_db",
                type: "obj",
                text: "Database",
                img: "database.gif"
            }, {
                id: "new_pp",
                type: "obj",
                text: "Presentation",
                img: "presentation.gif"
            }, {
                id: "new_s1",
                type: "sep"
            }, {
                id: "new_other",
                type: "obj",
                text: "Other",
                img: "other.gif"
            }]
            }, {
            type: "separator",
            id: "sep1"
        }, {
            type: "button",
            id: "open",
            img: "open.gif"
        }, {
            type: "buttonTwoState",
            id: "autosave",
            text: "Autosave",
            img: "save.gif",
            pressed: true,
            tooltip: "Autosave every 5 minutes"
        }, {
            type: "button",
            id: "save_as",
            text: "Save As...",
            disabled: true,
            img: "save_as.gif",
            img_disabled: "save_as_dis.gif"
        }, {
            type: "separator",
            id: "sep2"
        }, {
            type: "buttonInput",
            id: "inp",
            text: "Input",
            width: 50
        }, {
            type: "slider",
            id: "sld",
            length: 70,
            value_min: 10,
            value_max: 100,
            value_now: 70,
            text_min: "10 MBit",
            text_max: "100 MBit",
            tip_template: "Limit connection speed to %v MBit"
        }, {
            type: "separator",
            id: "sep3"
        }, {
            type: "button",
            id: "cut",
            img: "cut.gif"
        }, {
            type: "button",
            id: "copy",
            img: "copy.gif"
        }, {
            type: "buttonTwoState",
            id: "paste",
            img: "paste.gif"
        }, {
            type: "separator",
            id: "sep4"
        }, {
            type: "buttonSelect",
            id: "print",
            text: "Print",
            img: "print.gif",
            img_disabled: "print_dis.gif",
            options: [{
                id: "print_page",
                type: "obj",
                text: "Page",
                img: "page.gif"
            }, {
                id: "print_range",
                type: "obj",
                text: "Page Range",
                img: 'page_range.gif'
            }, {
                id: "print_sel",
                type: "obj",
                text: "Selection",
                img: 'selection.gif'
            }, {
                id: "print_sep1",
                type: "sep"
            }, {
                id: "print_cfg",
                type: "obj",
                text: "Settings",
                img: 'settings.gif'
            }]
            }, {
            type: "separator",
            id: "sep5"
        }, {
            type: "text",
            id: "info",
            text: "dhtmlxToolbar Demo"
        }]
        };
    toolbar = new dhtmlXToolbarObject(toolbarData);
    // toolbar.attachEvent("onValueChange", function(id,val){toolbar.setValue("inp",val+" MBit");});
    }</script>