DHTMLX Docs & Samples Explorer

### Object API Extended Init

Source

    <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>