r3041 committed - - make classnameoptions extension optionnal...
Revision: 3041
Author: malk0.phpgtk
Date: Sun Aug 9 11:14:17 2009
Log: - make classnameoptions extension optionnal
- bug correction when deselecting buttons from selectbuttonset that are not
multiples
http://code.google.com/p/jquery-ui/source/detail?r=3041
Modified:
/branches/labs/button/demo.html
/branches/labs/button/ui.button.js
/branches/labs/button/ui.buttonset.js
=======================================
--- /branches/labs/button/demo.html Mon Aug 3 12:34:47 2009
+++ /branches/labs/button/demo.html Sun Aug 9 11:14:17 2009
@@ -44,7 +44,8 @@
jQuery().ready(function(){
var icon = "info";
var buttonOptions={
- checkButtonset:true
+ checkButtonset:true,
+ icon:$.ui.classnameoptions?'':'ui-icon-info'
};
function clickCounter(){
var label = $(this).find('.ui-button-label');
@@ -56,6 +57,16 @@
}
}
$('.ui-button').click(clickCounter).button(buttonOptions);
+
+ if(! $.ui.classnameoptions){ //-- some additional settings if
classnameoptions isn't used (a real pain for end user and so i won't set up
all icons here for the demo in this mode)
+ $('.ui-button').filter('[class*=toggle]')
+ .button('option','buttonMode','toggle')
+ .filter('[class*=active]')
+ .button('option','active',true);
+
$('.ui-buttonset-i').buttonset('option','orientation','i').find('.ui-button').button('option','orientation','auto');
+
$('.ui-buttonset-t').buttonset('option','orientation','t').find('.ui-button').button('option','orientation','auto');
+
$('.ui-buttonset-small').buttonset('option','size','small').find('.ui-button').button('option','size','auto');
+ }
$('#settingBar select').change(function(){
if($(this).is('#bodySizeSelector'))
@@ -138,9 +149,16 @@
<a href="javascript:" class="ui-button ui-button-info toggle">toggle
button</a>
<!--h3>Using INPUT element</h3>
+ <input class="ui-button" value="text input with no icon" type="text"/>
<input class="ui-button" value="standard button starting with no icon"
type="button"/>
<input class="ui-button ui-button-check" value="standard button"
type="submit" />
- <label for="testCheck">CheckBox</label><input class="ui-button
ui-button-info" value="toggle button" type="checkbox" id="testCheck"
checked="checked"/-->
+ <br />
+ <label for="testCheck">CheckBox</label><input class="ui-button
ui-button-info" value="toggle button" type="checkbox" id="testCheck"
checked="checked"/>
+ <br />
+ <input type="radio" name="radio" id="radio0" value="0" class="ui-button"
checked="checked" />
+ <input type="radio" name="radio" id="radio1" value="1" class="ui-button"
/>
+ <input type="radio" name="radio" id="radio2" value="2" class="ui-button"
/>
+ <input type="radio" name="radio" id="radio3" value="3" class="ui-button"
/-->
<h3>Using SPAN element</h3>
<span class="ui-button ui-button-wrench">standard button</span>
=======================================
--- /branches/labs/button/ui.button.js Mon Aug 3 12:34:47 2009
+++ /branches/labs/button/ui.button.js Sun Aug 9 11:14:17 2009
@@ -29,6 +29,7 @@
_init:function(){
var self = this;
+
//-- should think about aborting or not init when ui-button-none,
ui-buttonset are used.
if( this.element.attr('class').match(/(?:^|\s+)ui-button(set|-none(\s|
$))/) ){
@@ -36,11 +37,13 @@
}
self._originalClass = self.element.attr('class');
// read inline options from class attribute (that can't be null!!!)
- var inlineOptions=self._readClassNameOpts({buttonMode:'|
toggle',active:'|active',size:'|auto|tiny|small|normal|big|
huge',orientation:'|auto|[trbli]',icon:'|[a-zA-Z0-9_-]+'})
- if( inlineOptions.icon && ! inlineOptions.icon.match(/\.(gif|png|
jpe?g)$/i)){
- inlineOptions.icon = 'ui-icon-'+inlineOptions.icon;
- }
- self._mergeOpts(inlineOptions);
+ if( $.ui.classnameoptions){
+ var inlineOptions=self._readClassNameOpts({buttonMode:'|
toggle',active:'|active',size:'|auto|tiny|small|normal|big|
huge',orientation:'|auto|[trbli]',icon:'|[a-zA-Z0-9_-]+'})
+ if( inlineOptions.icon && ! inlineOptions.icon.match(/\.(gif|png|
jpe?g)$/i)){
+ inlineOptions.icon = 'ui-icon-'+inlineOptions.icon;
+ }
+ self._mergeOpts(inlineOptions);
+ }
self.element.addClass($.ui.button.classes.base+' ui-widget ');
if(! self.element.attr('tabindex')){
@@ -59,8 +62,24 @@
}
// apply some settings
- self._applyOpts(['size','orientation','icon','overrideDefaultState'])
- ._applyOpts(['buttonMode','active','label'],true);
+ if(self._applyOpts){
+ self._applyOpts(['size','orientation','icon','overrideDefaultState'])
+ ._applyOpts(['buttonMode','active','label'],true);
+ }else{
+ self._setData('size',self.options.size);
+ self._setData('orientation',self.options.orientation);
+ self._setData('icon',self.options.icon);
+
self._setData('overrideDefaultState',self.options.overrideDefaultState);
+ if( self.options.buttonMode ){
+ self._setData('buttonMode',self.options.buttonMode);
+ if( self.options.active ){
+ self._setData('active',self.options.active);
+ }
+ }
+ if( self.label !== null){
+ self._setData('label',self.options.label);
+ }
+ }
if( null!==self.options.disabled ){
self._setData('disabled',self.options.disabled);
@@ -313,6 +332,18 @@
toggle: function(event){
this._setData('active',this._getData('active')?false:true);
return this;
+ },
+ /**
+ * remove matching class names from element and eventually add new class
on given element (default to widget.element)
+ */
+ _rmExpClass:function(exp,add,elmt){
+ elmt=(!elmt)?this.element:$(elmt);
+ exp = new RegExp('(?:^|\\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);
+ }
+ return this;
}
}));
=======================================
--- /branches/labs/button/ui.buttonset.js Mon Aug 3 12:34:47 2009
+++ /branches/labs/button/ui.buttonset.js Sun Aug 9 11:14:17 2009
@@ -19,15 +19,18 @@
_init:function(){
var self=this;
// read inline options
- var inlineOptions=self._readClassNameOpts({size:'|auto|tiny|small|
normal|big|huge',orientation:'|auto|[trbli]'})
- self._mergeOpts(inlineOptions);
+ if(self._readClassNameOpts){
+ var inlineOptions=self._readClassNameOpts({size:'|auto|tiny|small|
normal|big|huge',orientation:'|auto|[trbli]'})
+ self._mergeOpts(inlineOptions);
+ }
self.element.addClass($.ui.buttonset.classes.base+' ui-widget');
if( !$.support.style){
self.element.addClass($.ui.buttonset.classes.blockFix);
}
- self._applyOpts(['size','orientation'])
+ self._setData('size',self.options.size);
+ self._setData('orientation',self.options.orientation);
self._initiated = true;
self.propagateSettings();
@@ -44,9 +47,10 @@
},
_setData:function(key,value){
var self = this;
+ var res = $.widget.prototype._setData.apply(this, arguments);
switch(key){
case 'orientation':
- self._orientationValue = value=='auto'?'w':value;
+ self._orientationValue = value=='auto'?'l':value;
if( self._initiated){
self.propagateSettings();
}
@@ -54,11 +58,11 @@
case 'size':
self._sizeValue = value=='auto'?'normal':value;
if( self._initiated){
- self.propagate();
+ self.propagateSettings();
}
break;
}
- return $.widget.prototype._setData.apply(this, arguments);
+ return res;
}
}));
@@ -84,8 +88,10 @@
_init:function(){
var self=this;
// read inline options
- var inlineOptions=self._readClassNameOpts({size:'|auto|tiny|small|
normal|big|huge',orientation:'|auto|[trbli]'},$.ui.buttonset.classes.base)
- self._mergeOpts(inlineOptions);
+ if(self._readClassNameOpts){
+ var inlineOptions=self._readClassNameOpts({size:'|auto|tiny|small|
normal|big|huge',orientation:'|auto|[trbli]'},$.ui.buttonset.classes.base)
+ self._mergeOpts(inlineOptions);
+ }
if( self.element.attr('multiple') ){
self.multiple = true;
@@ -98,17 +104,21 @@
},
refresh:function(){
var self = this;
- var orientation = self._getData('orientation');
- var size = self._getData('size');
var multiple = self.multiple;
self.element.children('option').each(function(i){
var option = $(this);
var label = option.html();
var optionIcon = option.attr('class').match(/(?:^|\s)ui-icon-(.+)(?:$|
\s)/);
- if(null !== optionIcon)
- optionIcon = optionIcon[1];
- $('<a type="button"
class="ui-button-'+size+('auto'===orientation?'':'-'+orientation)+(optionIcon?'-'+optionIcon:'')+'
toggle'+(option.is(':selected')?' active':'')+'">'+label+'</a>')
+ var optionOptions = {
+ buttonMode:'toggle',
+ active:option.is(':selected')?true:false,
+ size:self._getData('size'),
+ orientation:self._getData('orientation'),
+ icon:(null !== optionIcon)?optionIcon[0]:''
+ };
+ var a = $('<a type="button" class="ui-button">'+label+'</a>')
.appendTo(self.buttonset)
+ .button(optionOptions)
.click(function(e){self._toggle(e,this,option)});
});
},
@@ -130,7 +140,7 @@
}
siblingOptions.button('option','active',false);
}
- option.attr('selected',$(buttonElmt).button('isActive')?'selected':'');
+
option.attr('selected',$(buttonElmt).button('option','active')?'selected':'');
self.element.change();
}
}));