DHTMLX Toolbar

DHTMLX toolbar можно положить внутри ячейки, лейаута или DOM-элемента. К ячейку или лейауту нельзя цеплять больше одного тулбара.



Пример прикрепления тулбара к DOM-элементу:
document.body.innerHTML = "<div id='myToolbarCont'></div>";
new dhtmlXToolbarObject("myToolbarCont");

Пример прикрепления тулбара к лейату:
appLayout.attachToolbar();

Пример прикрепления тулбара к ячейке:
appLayout.cells("a").attachToolbar();

К контейнеру можно прикрепить только один тулбар, но это ограничение легко обходится:
var childLayout = appLayout.cells("a").attachLayout("1C");

appLayout.cells("a").attachToolbar(); // 1st toolbar
childLayout.attachToolbar(); // 2nd toolbar
childLayout.cells("a").hideHeader(); // hide cell header
childLayout.cells("a").attachToolbar(); // 3rd toolbar

У тулбара могут быть элементы следующих типов:
• Button
• Two-state button (Toggle)
• Button select (Select)
• Slider
• Input
• Text (Label)
• Separator
• Spacer

var myToolbar = appLayout.cells("a").attachToolbar();

myToolbar.addButton("myButtonId", // id
0, // позиция в тулбаре
"My Button" // заголовок
// enabled icon (optional), 
// disabled icon (optional)
);

myToolbar.addButtonTwoState("myButton2StateId", 1, "2 State");
// При изменении состояния кнопки вызывается событие onStateChange.
myToolbar.getItemState("myButton2StateId"); // Возвращает булево значение.

myToolbar.addSeparator("sepId", 2);

myToolbar.addText("myTextId", 3, "A Label: ");

myToolbar.addButtonSelect(
// ID, position, text, JavaScript array of the options
"mySelectId", 4, "Select Me",[
 // ID, type, text, and icon (optional)
 ["option1", "obj","Option 1"],
 ["option2", "obj","Option 2"]
]);

myToolbar.getListOptionSelected("mySelectId");

myToolbar.addSpacer("myButtonId");

myToolbar.removeSpacer("myButtonId");

myToolbar.addSlider(
"mySliderId", //  ID
5, // position
40, // length of slider in pixels as integer
1, // minimum value
10, // maximum value
4, // current value
"Low", // label left side
"High" // label right side
// tooltip (optional)
);

myToolbar.addInput("myInputId",6,"Hi", 30);
myToolbar.getValue("myInputId");

myToolbar.disableItem("myButtonId");
myToolbar.enableItem("myButtonId");

myToolbar.hideItem("myButtonId");
myToolbar.showItem("myButtonId");

myToolbar.removeItem("myInputId");

У тулбаров есть события: onClick, onStateChange, onValueChange и onEnter.
myToolbar.attachEvent("onClick", function(itemId){
 console.log(itemId);
});

Пример добавления тулбара в файл app.js:
// Toolbar
var appToolbar;
dhtmlxEvent(window, "load", function() {
    // create toolbar
    appToolbar = appLayout.cells("a").attachToolbar({
        items: [{
            type: "button",
            id: 1,
            text: "add"
        }, {
            type: "separator",
            id: 2
        }, {
            type: "button",
            id: 3,
            text: "remove"
        }, {
            type: "separator",
            id: 4
        }, ]
    });
    // attach toolbar events
    appToolbar.attachEvent("onClick", function(id) {
        switch (id) {
        case "1":
            callbacks.addClick();
            break;
        case "3":
            callbacks.removeClick();
            break;
        default:
            break;
        }
    });
});


Теги: