r2831 - - destroy on button is working (not on buttonset)
Author: malk0.phpgtk
Date: Mon Jun 22 16:11:22 2009
New Revision: 2831
Modified:
branches/labs/button/demo.html
branches/labs/button/ui.button.js
branches/labs/button/ui.buttonset.js
Log:
- destroy on button is working (not on buttonset)
- correct a bug of double clicking on buttons when trigger by keystrokes
(under ie6/7)
Modified: branches/labs/button/demo.html
==============================================================================
--- branches/labs/button/demo.html (original)
+++ branches/labs/button/demo.html Mon Jun 22 16:11:22 2009
@@ -56,6 +56,7 @@
$('select[class*=ui-buttonset]').selectbuttonset().filter(':gt(0)').change();
$('#switcher').themeswitcher();
$('.ui-button-toggle:gt(18)').click(function(){alert('toggle button set
active: '+($(this).button('isActive')?'on':'off'))})
+
$('#toggleUnable').click(function(){$('#unable').button('option','disabled',$(this).button('isActive')?true:false);});
});
</script>
</head>
@@ -125,8 +126,8 @@
<div class="ui-button ui-button-info">standard button</div>
<div class="ui-button ui-button-info toggle">toggle button</div>
<h3>Using BUTTON element</h3>
- <button type="button" class="ui-button ui-button-info"
disabled="disabled">button with attribute disabled</button>
- <button type="button" class="ui-button ui-button-toggle-info">toggle
button</button>
+ <button type="button" class="ui-button ui-button-info"
disabled="disabled" id="unable">button with attribute disabled</button>
+ <button type="button" class="ui-button ui-button-toggle-active-info"
id="toggleUnable">toggle previous button disable or not</button>
</div>
<div id="demo2">
@@ -134,7 +135,7 @@
<h3>Using A element (start small size)</h3>
<div class="ui-buttonset-small">
- <a href="javascript:" class="ui-button">standard button</a><a
href="javascript:" class="ui-button ui-button-info">standard button</a><a
href="javascript:" class="ui-button ui-button-info toggle">toggle
button</a><a href="javascript:" class="ui-button ui-button-info
toggle">toggle button</a>
+ <a href="javascript:" class="ui-button">standard button</a><a
href="javascript:return false;" class="ui-button ui-button-info">standard
button</a><a href="javascript:" class="ui-button ui-button-info
toggle">toggle button</a><a href="javascript:" class="ui-button
ui-button-info toggle">toggle button</a>
</div>
<h3>Using SPAN element (start with icon on the right )</h3>
Modified: branches/labs/button/ui.button.js
==============================================================================
--- branches/labs/button/ui.button.js (original)
+++ branches/labs/button/ui.button.js Mon Jun 22 16:11:22 2009
@@ -13,6 +13,7 @@
// base ui-button plugin
$.widget("ui.button",$.extend({},$.ui.classnameoptions,{
+ _originalClass: '',
_elmt_icon:null,
_elmt_iconContainer:null,
@@ -33,9 +34,9 @@
if( this.element.attr('class').match(/(?:^|\s+)ui-button(set|-none(\s|
$))/) ){
return $.widget.prototype.destroy.apply(this, arguments);
}
-
+ self._originalClass = self.element.attr('class');
// read inline options from class attribute (that can't be null!!!)
- var inlineOptions=self._readClassNameOpts('ui-button',{buttonMode:'|
toggle',size:'|auto|tiny|small|normal|big|huge',orientation:'|auto|
[trbli]',icon:'|[a-zA-Z0-9_-]+'})
+ 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;
}
@@ -104,7 +105,10 @@
}
if( event.type==='mousedown' || (event.type==='keydown' &&
(event.keyCode == $.ui.keyCode.ENTER || event.keyCode == $.ui.keyCode.SPACE
)) ){
elmt.addClass($.ui.button.classes.stateDown);
- self.element.click()
+ self.element.click();
+ if( event.type==='keydown'){
+ return false;
+ }
}
};
var _released=function(event){
@@ -122,7 +126,7 @@
elmt.addClass($.ui.button.classes.stateFocus);
};
var _blur= function(){
- $(this).removeClass($.ui.button.classes.stateFocus);
+
$(this).removeClass($.ui.button.classes.stateFocus+' '+$.ui.button.classes.stateDown);
};
var events = {
mouseenter:_mouseenter,
@@ -132,11 +136,11 @@
mouseup:_released,
keyup:_released,
focus:_focus,
- blur:_blur,
+ blur:_blur
};
var eventName = '';
for( eventName in events){
- self.element.bind(eventName+'.ui-button',events[eventName]);
+ self.element.bind(eventName+'.uibutton',events[eventName]);
}
},
//--- markup ---//
@@ -231,9 +235,7 @@
self._rmExpClass($.ui.button.classes.base+'-size-*',$.ui.button.classes.base+'-size-'+self._sizeValue);
break;
case 'disabled':
- self.element.toggleClass($.ui.button.stateDisabled,value);
- self.element.attr('disabled',value?'disabled':false);
- self.element.bind('click.uibutton',function(){return false;})
+ self.element.attr('disabled',value?true:false);
break;
case 'buttonMode':
switch(value){
@@ -292,6 +294,13 @@
return this._getData('active');
},
//--- public methods ---//
+ destroy: function(){
+ this.element.unbind('.uibutton').attr('class',this._originalClass);
+ this._elmt_iconContainer.remove();
+ this._elmt_label.contents().insertAfter(this._elmt_label)
+ this._elmt_label.remove();
+ return $.widget.prototype.destroy.apply(this, arguments);
+ },
toggle: function(event){
this._setData('active',this._getData('active')?false:true);
return this;
@@ -328,7 +337,6 @@
stateHover: 'ui-state-hover',
stateDown: 'ui-state-highlight', // must be different than
active!
stateFocus: 'ui-state-focus',
- stateDisabled: 'ui-state-disabled',
blockFix: 'ui-button-inlineBlockFix'
}
});//*/
Modified: branches/labs/button/ui.buttonset.js
==============================================================================
--- branches/labs/button/ui.buttonset.js (original)
+++ branches/labs/button/ui.buttonset.js Mon Jun 22 16:11:22 2009
@@ -19,7 +19,7 @@
_init:function(){
var self=this;
// read inline options
- var
inlineOptions=self._readClassNameOpts($.ui.buttonset.classes.base,{size:'|
auto|tiny|small|normal|big|huge',orientation:'|auto|[trbli]'})
+ 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'+(self.element.is('[class*=ui-corner]')?'':' ui-corner-all'));
@@ -84,7 +84,7 @@
_init:function(){
var self=this;
// read inline options
- var
inlineOptions=self._readClassNameOpts($.ui.buttonset.classes.base,{size:'|
auto|tiny|small|normal|big|huge',orientation:'|auto|[trbli]'})
+ 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') ){
@@ -107,7 +107,7 @@
var optionIcon = option.attr('class').match(/(?:^|\s)ui-icon-(.+)(?:$|
\s)/);
if(null !== optionIcon)
optionIcon = optionIcon[1];
- $('<button type="button"
class="ui-button-'+size+('auto'===orientation?'':'-'+orientation)+(optionIcon?'-'+optionIcon:'')+'
toggle'+(option.is(':selected')?' active':'')+'">'+label+'</button>')
+ $('<a type="button"
class="ui-button-'+size+('auto'===orientation?'':'-'+orientation)+(optionIcon?'-'+optionIcon:'')+'
toggle'+(option.is(':selected')?' active':'')+'">'+label+'</a>')
.appendTo(self.buttonset)
.button({
'corners':(i==0?'left':(i+1<self.element.attr('options').length?'none':'right'))