0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

use themed modes in Ox.Button, Ox.MenuButton and Ox.Select

Browse source
This commit is contained in:
rolux 2012-12-28 18:55:52 +01:00
parent fc37155e22
commit 6364408236
3 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
source/Ox.UI/js/Form/Button.js
View file

@ -47,10 +47,7 @@ Ox.Button = function(options, self) {
tooltip: options.tooltip[0]
}) : options || {})
.update({
disabled: function() {
that.attr({disabled: self.options.disabled}).toggleClass('OxDisabled');
self.options.disabled && that.$tooltip && that.$tooltip.hide();
},
disabled: setDisabled,
//FIXME: check if this is still needed
tooltip: function() {
that.$tooltip.options({title: self.options.disabled});
@ -63,7 +60,7 @@ Ox.Button = function(options, self) {
).title;
setTitle();
}
self.options.selectable && that.toggleClass('OxSelected');
self.options.selectable && setSelected();
},
width: function() {
that.$element.css({width: (self.options.width - 14) + 'px'});
@ -130,12 +127,27 @@ Ox.Button = function(options, self) {
}
}
function setDisabled() {
that.attr({disabled: self.options.disabled});
that[self.options.disabled ? 'addClass' : 'removeClass']('OxDisabled');
self.options.disabled && that.$tooltip && that.$tooltip.hide();
self.options.type == 'image' && setTitle();
}
function setSelected() {
that[self.options.value ? 'addClass' : 'removeClass']('OxSelected');
self.options.type == 'image' && setTitle();
}
function setTitle() {
if (self.options.type == 'image') {
that.attr({
src: Ox.UI.getImageURL(
'symbol' + self.options.title[0].toUpperCase()
+ self.options.title.slice(1)
+ self.options.title.slice(1),
self.options.disabled ? 'disabled'
: self.options.selected ? 'selected'
: 'default'
)
});
} else {
@ -161,7 +173,7 @@ Ox.Button = function(options, self) {
} else {
self.options.value = !self.options.value;
}
self.options.selectable && that.toggleClass('OxSelected');
self.options.selectable && setSelected();
return that;
}

3
source/Ox.UI/js/Form/Select.js
View file

@ -140,6 +140,7 @@ Ox.Select = function(options, self) {
self.$button = Ox.Button({
id: self.options.id + 'Button',
selectable: true,
style: 'symbol',
title: self.options.type == 'text' || !self.options.title
? 'select' : self.options.title,
@ -202,6 +203,7 @@ Ox.Select = function(options, self) {
function hideMenu() {
that.loseFocus();
that.removeClass('OxSelected');
self.$button.options({value: false});
}
function loseFocus() {
@ -215,6 +217,7 @@ Ox.Select = function(options, self) {
function showMenu() {
that.gainFocus();
that.addClass('OxSelected');
self.$button.options({value: true});
self.options.tooltip && that.$tooltip.hide();
self.$menu.showMenu();
}

3
source/Ox.UI/js/Menu/MenuButton.js
View file

@ -73,6 +73,7 @@ Ox.MenuButton = function(options, self) {
self.$button = Ox.Button({
id: self.options.id + 'Button',
selectable: true,
overlap: self.options.overlap,
style: 'symbol',
title: self.options.type == 'text' || !self.options.title
@ -107,12 +108,14 @@ Ox.MenuButton = function(options, self) {
function hideMenu(data) {
that.loseFocus();
that.removeClass('OxSelected');
self.$button.options({value: false});
that.triggerEvent('hide');
}
function showMenu() {
that.gainFocus();
that.addClass('OxSelected');
self.$button.options({value: true});
self.options.tooltip && that.$tooltip.hide();
self.$menu.showMenu();
that.triggerEvent('show');