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] tooltip: options.tooltip[0]
}) : options || {}) }) : options || {})
.update({ .update({
disabled: function() { disabled: setDisabled,
that.attr({disabled: self.options.disabled}).toggleClass('OxDisabled');
self.options.disabled && that.$tooltip && that.$tooltip.hide();
},
//FIXME: check if this is still needed //FIXME: check if this is still needed
tooltip: function() { tooltip: function() {
that.$tooltip.options({title: self.options.disabled}); that.$tooltip.options({title: self.options.disabled});
@ -63,7 +60,7 @@ Ox.Button = function(options, self) {
).title; ).title;
setTitle(); setTitle();
} }
self.options.selectable && that.toggleClass('OxSelected'); self.options.selectable && setSelected();
}, },
width: function() { width: function() {
that.$element.css({width: (self.options.width - 14) + 'px'}); 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() { function setTitle() {
if (self.options.type == 'image') { if (self.options.type == 'image') {
that.attr({ that.attr({
src: Ox.UI.getImageURL( src: Ox.UI.getImageURL(
'symbol' + self.options.title[0].toUpperCase() '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 { } else {
@ -161,7 +173,7 @@ Ox.Button = function(options, self) {
} else { } else {
self.options.value = !self.options.value; self.options.value = !self.options.value;
} }
self.options.selectable && that.toggleClass('OxSelected'); self.options.selectable && setSelected();
return that; 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({ self.$button = Ox.Button({
id: self.options.id + 'Button', id: self.options.id + 'Button',
selectable: true,
style: 'symbol', style: 'symbol',
title: self.options.type == 'text' || !self.options.title title: self.options.type == 'text' || !self.options.title
? 'select' : self.options.title, ? 'select' : self.options.title,
@ -202,6 +203,7 @@ Ox.Select = function(options, self) {
function hideMenu() { function hideMenu() {
that.loseFocus(); that.loseFocus();
that.removeClass('OxSelected'); that.removeClass('OxSelected');
self.$button.options({value: false});
} }
function loseFocus() { function loseFocus() {
@ -215,6 +217,7 @@ Ox.Select = function(options, self) {
function showMenu() { function showMenu() {
that.gainFocus(); that.gainFocus();
that.addClass('OxSelected'); that.addClass('OxSelected');
self.$button.options({value: true});
self.options.tooltip && that.$tooltip.hide(); self.options.tooltip && that.$tooltip.hide();
self.$menu.showMenu(); 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({ self.$button = Ox.Button({
id: self.options.id + 'Button', id: self.options.id + 'Button',
selectable: true,
overlap: self.options.overlap, overlap: self.options.overlap,
style: 'symbol', style: 'symbol',
title: self.options.type == 'text' || !self.options.title title: self.options.type == 'text' || !self.options.title
@ -107,12 +108,14 @@ Ox.MenuButton = function(options, self) {
function hideMenu(data) { function hideMenu(data) {
that.loseFocus(); that.loseFocus();
that.removeClass('OxSelected'); that.removeClass('OxSelected');
self.$button.options({value: false});
that.triggerEvent('hide'); that.triggerEvent('hide');
} }
function showMenu() { function showMenu() {
that.gainFocus(); that.gainFocus();
that.addClass('OxSelected'); that.addClass('OxSelected');
self.$button.options({value: true});
self.options.tooltip && that.$tooltip.hide(); self.options.tooltip && that.$tooltip.hide();
self.$menu.showMenu(); self.$menu.showMenu();
that.triggerEvent('show'); that.triggerEvent('show');