|
Toolbar = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
config.css = util.combine(config.css, {
|
container: null
|
});
|
|
this.groups = {};
|
this.items = [];
|
Control.call(this, config);
|
},
|
|
getContainerTemplate: function() {
|
return $(Toolbar_Template.container.join(""));
|
},
|
|
createContent: function() {
|
var items = this.config.items;
|
|
if (!items || !items.length) {
|
return;
|
}
|
|
var group = null;
|
var max = items.length;
|
|
for (var i = 0; i < max; i++) {
|
var item = items[i];
|
|
if (item.group) {
|
group = this.getGroup(item.group);
|
}
|
|
var parent = group || this.container;
|
this.createItem(parent, item);
|
}
|
},
|
|
getGroup: function(name) {
|
var result = this.groups[name];
|
|
if (!result) {
|
result = $(Toolbar_Template.group.join(""));
|
this.groups[name] = result;
|
this.container.append(result);
|
}
|
|
return result;
|
},
|
|
createItem: function(parent, option) {
|
//1. element
|
var button = $(Toolbar_Template.button.join(""));
|
button.html(option.caption);
|
|
if (option.active === false) {
|
button.addClass("btn-unactive");
|
}
|
else {
|
button.addClass("btn-active");
|
}
|
|
//2. click
|
button.click(function() {
|
if (option.onClick) {
|
option.onClick.call(this);
|
}
|
});
|
|
//3. append
|
parent.append(button);
|
return result;
|
}
|
});
|
|
|
//*************************************
|
Toolbar_Template = {};
|
|
Toolbar_Template.container = [
|
'<div class="toolbar"></div>'
|
];
|
|
Toolbar_Template.group = [
|
'<div class="btn-group">',
|
'</div>'
|
];
|
|
Toolbar_Template.button = [
|
'<div class="btn"></div>'
|
];
|
