r2803 - - add disabled state
Author: malk0.phpgtk
Date: Wed Jun 17 16:32:58 2009
New Revision: 2803
Modified:
branches/labs/button/demo.html
branches/labs/button/ui-button.css
branches/labs/button/ui.button.js
branches/labs/button/ui.buttonset.js
Log:
- add disabled state
- move used classnames to extended properties
Modified: branches/labs/button/demo.html
==============================================================================
--- branches/labs/button/demo.html (original)
+++ branches/labs/button/demo.html Wed Jun 17 16:32:58 2009
@@ -43,7 +43,11 @@
<script>
jQuery().ready(function(){
var icon = "info";
-
$('[class*=ui-button]').button({checkButtonset:true,toggle:function(event,ui){alert('toggle
button '+(ui.isActive()?'on':'off'))}});
+ var buttonOptions={
+ checkButtonset:true,
+ toggle:function(event,ui){alert('toggle
button '+(ui.isActive()?'on':'off'))},
+ };
+ $('[class*=ui-button]').button(buttonOptions);
$('#settingBar select').change(function(){
if($(this).is('#bodySizeSelector'))
@@ -121,7 +125,7 @@
<div class="ui-button-info">standard button</div>
<div class="ui-button-info toggle">toggle button</div>
<h3>Using BUTTON element</h3>
- <button type="button" class="ui-button-info">standard button</button>
+ <button type="button" class="ui-button-info" disabled="disabled">button
with attribute disabled</button>
<button type="button" class="ui-button-info toggle">toggle button</button>
</div>
Modified: branches/labs/button/ui-button.css
==============================================================================
--- branches/labs/button/ui-button.css (original)
+++ branches/labs/button/ui-button.css Wed Jun 17 16:32:58 2009
@@ -82,8 +82,10 @@
.ui-button-inlineBlockFix.ui-button-orientation-t .ui-button-icon {
width:16px;}
.ui-button-inlineBlockFix.ui-button-orientation-b .ui-button-icon {
width:16px;}
+.ui-button-inlineBlockFix .ui-button-icon{ margin:0;}
/*
+ @todo should think to use zoom when possible must do some work on that
.ui-button-size-tiny .ui-icon {zoom:0.5;}
.ui-button-size-small .ui-icon {zoom:0.75;}
.ui-button-size-normal .ui-icon {zoom:1;}
Modified: branches/labs/button/ui.button.js
==============================================================================
--- branches/labs/button/ui.button.js (original)
+++ branches/labs/button/ui.button.js Wed Jun 17 16:32:58 2009
@@ -24,6 +24,7 @@
_cornersValue:'',
_orientationValue:'',
_sizeValue:'',
+
_init:function(){
var self = this;
//-- should think about aborting or not init when ui-button-none,
ui-buttonset are used.
@@ -35,7 +36,7 @@
var inlineOptions=self._readClassNameOpts('ui-button',{size:'|auto|tiny|
small|normal|big|huge',orientation:'|auto|[trbli]',icon:'|[a-zA-Z0-9_-]+'})
self._mergeOpts(inlineOptions);
- self.element.addClass('ui-button ui-widget ui-state-default')
+ self.element.addClass($.ui.button.classes.base+'
ui-widget '+$.ui.button.classes.stateDefault)
.hover(self._hover,self._blur);
// preapre wrapers elements
@@ -46,7 +47,7 @@
if( self.element.hasClass('toggle') ){
self.options.isToggle = true;
}
- if( self.element.hasClass('active') ||
self.element.hasClass('ui-state-active')){
+ if( self.element.hasClass('active') ||
self.element.hasClass($.ui.button.classes.stateActive)){
self.options.active = true;
}
@@ -54,16 +55,19 @@
self._applyOpts(['size','orientation','icon','corners'])
._applyOpts(['toggle','active','label','isToggle'],true);
+ if( null!==self.options.disabled ){
+ self._setData('disabled',self.options.disabled);
+ }else if( self.element.attr('disabled') ){
+ self._setData('disabled',true);
+ }
+
+
if(! $.support.style){
- this.element.addClass('ui-button-inlineBlockFix');
- this._elmt_iconContainer.css({margin:0});
- if(null !== this._elmt_icon){
- this._elmt_icon.css({margin:0});
- }
+ this.element.addClass($.ui.button.classes.blockFix);
}
// auto initialisation of button set on last buttonset element
if( self.options.checkButtonset){
- var buttonset = self.element.parent('[class*=ui-buttonset]');
+ var buttonset = self.element.parent('[class*=ui-buttonset]'); //@todo
replaced by $.ui.buttonset.base when will exist
if( buttonset.length > 0){
self._buttonset = buttonset;
if( this.element.is(':last-child')){
@@ -74,10 +78,10 @@
return this;
},
_hover: function(){
- $(this).addClass('ui-state-hover');
+ $(this).addClass($.ui.button.classes.stateHover);
},
_blur: function(){
- $(this).removeClass('ui-state-hover');
+ $(this).removeClass($.ui.button.classes.stateHover);
},
_setIcon:function(){
var ico = this._getData('icon');
@@ -106,24 +110,24 @@
if( null!==this._elmt_label ){
return;
}
- var _elmt_label=$('<span class="ui-button-label"></span>');
+ var _elmt_label=$('<span
class="'+$.ui.button.classes.wrapperLabel+'"></span>');
if( this.element.html().replace(/\s/,'').length > 0){
this.element.wrapInner(_elmt_label);
}else{
-
this.element.append(_elmt_label.append(' ').addClass('ui-button-label-empty'));
+
this.element.append(_elmt_label.append(' ').addClass($.ui.button.classes.wrapperLabelEmpty));
}
- this._elmt_label = this.element.find('>.ui-button-label');
+ this._elmt_label =
this.element.find('>.'+$.ui.button.classes.wrapperLabel);
},
_wrapIcon:function(){
if( null!==this._elmt_iconContainer){
return;
}
- this._elmt_iconContainer=$('<span class="ui-button-icon"></span>');
+ this._elmt_iconContainer=$('<span
class="'+$.ui.button.classes.wrapperIcon+'"></span>');
this.element.append(this._elmt_iconContainer);
},
_checkElmtPos: function(){
- var actual =
this.element.find('span:first').is('.ui-button-icon')?true:false;
+ var actual =
this.element.find('span:first').is('.'+$.ui.button.classes.wrapperIcon)?true:false;
if( actual==this._iconBeforeLabel)
return this;
if( this._iconBeforeLabel){
@@ -143,14 +147,14 @@
break;
case 'corners':
self._cornersValue = value=='auto'?'all':value;
-
self._rmExpClass(self.element,'ui-corner-*','ui-corner-'+self._cornersValue);
+ self._rmExpClass('ui-corner-*','ui-corner-'+self._cornersValue);
break;
case 'label':
if( null!==value){
if( ''===value){
- self._elmt_label.addClass('ui-button-label-empty').html(' ');
+
self._elmt_label.addClass($.ui.button.classes.wrapperLabelEmpty).html(' ');
}else{
- self._elmt_label.removeClass('ui-button-label-empty')
+ self._elmt_label.removeClass($.ui.button.classes.wrapperLabelEmpty)
.empty().append(value);
}
}
@@ -162,13 +166,16 @@
if( value==='i'){
self._setData('label','');
}
-
self._rmExpClass(self.element,'ui-button-orientation-*','ui-button-orientation-'+self._orientationValue);
+
self._rmExpClass($.ui.button.classes.base+'-orientation-*',$.ui.button.classes.base+'-orientation-'+self._orientationValue);
self._iconBeforeLabel=( self._orientationValue=='b' ||
self._orientationValue=='r')?false:true;
self._checkElmtPos();
break;
case 'size':
self._sizeValue = value=='auto'?'normal':value;
-
self._rmExpClass(self.element,'ui-button-size-*','ui-button-size-'+self._sizeValue);
+
self._rmExpClass($.ui.button.classes.base+'-size-*',$.ui.button.classes.base+'-size-'+self._sizeValue);
+ break;
+ case 'disabled':
+ self.element.toggleClass($.ui.button.stateDisabled,value);
break;
case 'isToggle':
if(! self.isToggleCB){
@@ -183,7 +190,7 @@
case 'active':
if(! self._getData('isToggle'))
return false;
- self.element.toggleClass('ui-state-active active',value?true:false);
+ self.element.toggleClass($.ui.button.classes.stateActive+'
active',value?true:false);
self._trigger('setactive',0,self);
break;
}
@@ -218,13 +225,6 @@
}
},
- _rmExpClass:function(elmt,exp,add){
- eval('exp = /(?:^|\\s)'+exp.replace(/\*/g,'[a-zA-Z_0-9-]*')+'(?=$|
\\s)/g;');
- elmt.attr('class',elmt.attr('class').replace(exp,''));
- if( undefined!==add ){
- elmt.addClass(add);
- }
- },
//** callbacks **//
toggle: function(event){
this._setData('active',this._getData('active')?false:true);
@@ -243,10 +243,25 @@
corners:'auto',
icon:'',
label:null,
+ disabled:null,
isToggle:false,
toggle:false,
active:false,
checkButtonset:false
+ },
+ classes:{
+ base: 'ui-button',
+ wrapperLabel: 'ui-button-label',
+ wrapperLabelEmpty: 'ui-button-label-empty',
+ wrapperIcon: 'ui-button-icon',
+ wrapperIconEmpty: 'ui-icon-none',
+ stateDefault: 'ui-state-default',
+ stateActive: 'ui-state-active',
+ stateHover: 'ui-state-hover',
+ stateDown: 'ui-state-highlight',
+ stateFocus: 'ui-state-focus',
+ stateDisabled: 'ui-state-disabled',
+ blockFix: 'ui-button-inlineBlockFix'
}
});//*/
})(jQuery);
Modified: branches/labs/button/ui.buttonset.js
==============================================================================
--- branches/labs/button/ui.buttonset.js (original)
+++ branches/labs/button/ui.buttonset.js Wed Jun 17 16:32:58 2009
@@ -19,13 +19,13 @@
_init:function(){
var self=this;
// read inline options
- var inlineOptions=self._readClassNameOpts('ui-buttonset',{size:'|auto|
tiny|small|normal|big|huge',orientation:'|auto|[trbli]'})
+ var
inlineOptions=self._readClassNameOpts($.ui.buttonset.classes.base,{size:'|
auto|tiny|small|normal|big|huge',orientation:'|auto|[trbli]'})
self._mergeOpts(inlineOptions);
- self.element.addClass('ui-buttonset
ui-widget'+(self.element.is('[class*=ui-corner]')?'':' ui-corner-all'));
+ self.element.addClass($.ui.buttonset.classes.base+'
ui-widget'+(self.element.is('[class*=ui-corner]')?'':' ui-corner-all'));
if( !$.support.style){
- self.element.addClass('ui-button-inlineBlockFix');
+ self.element.addClass($.ui.buttonset.classes.blockFix);
}
self._applyOpts(['size','orientation'])
self._initiated = true;
@@ -68,8 +68,11 @@
defaults:{
size:'auto',
orientation:'auto'
+ },
+ classes:{
+ base:'ui-buttonset',
+ blockFix: 'ui-button-inlineBlockFix'
}
-
});
/**
@@ -81,13 +84,13 @@
_init:function(){
var self=this;
// read inline options
- var inlineOptions=self._readClassNameOpts('ui-buttonset',{size:'|auto|
tiny|small|normal|big|huge',orientation:'|auto|[trbli]'})
+ var
inlineOptions=self._readClassNameOpts($.ui.buttonset.classes.base,{size:'|
auto|tiny|small|normal|big|huge',orientation:'|auto|[trbli]'})
self._mergeOpts(inlineOptions);
if( self.element.attr('multiple') ){
self.multiple = true;
}
- self.buttonset = $('<div class="ui-buttonset"></div>');
+ self.buttonset = $('<div
class="'+$.ui.buttonset.classes.base+'"></div>');
self.buttonset.buttonset(self.options);
self.element.hide();
self.element.after(self.buttonset);
@@ -116,7 +119,7 @@
var self = this;
if(! self.multiple){
// if no other buttons are activated we can't unselect that option.
- var siblingOptions = self.buttonset.find('.ui-button').not(buttonElmt);
+ var siblingOptions =
self.buttonset.find('.'+$.ui.button.classes.base).not(buttonElmt);
var canContinue=false;
siblingOptions.each(function(){
if($(this).button('option','active')){