r2804 - - add png file to demonstrate the possibility of user define icon
Author: malk0.phpgtk
Date: Wed Jun 17 17:18:50 2009
New Revision: 2804
Added:
branches/labs/button/go-home.png (contents, props changed)
Modified:
branches/labs/button/demo.html
branches/labs/button/ui.button.js
Log:
- add png file to demonstrate the possibility of user define icon
- replace isToggle option with buttonMode as decided in specs
- removed toggle events triggering as commented on the specification page
Modified: branches/labs/button/demo.html
==============================================================================
--- branches/labs/button/demo.html (original)
+++ branches/labs/button/demo.html Wed Jun 17 17:18:50 2009
@@ -44,8 +44,7 @@
jQuery().ready(function(){
var icon = "info";
var buttonOptions={
- checkButtonset:true,
- toggle:function(event,ui){alert('toggle
button '+(ui.isActive()?'on':'off'))},
+ checkButtonset:true
};
$('[class*=ui-button]').button(buttonOptions);
@@ -56,6 +55,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'))})
});
</script>
</head>
@@ -126,7 +126,7 @@
<div class="ui-button-info toggle">toggle button</div>
<h3>Using BUTTON element</h3>
<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>
+ <button type="button" class="ui-button-toggle-info">toggle button</button>
</div>
<div id="demo2">
@@ -144,7 +144,7 @@
<h3>Using DIV element (start with no labels at all even if they're in the
original markup)</h3>
<div class="ui-buttonset-i">
- <div class="ui-button-info">standard button</div><div
class="ui-button-info toggle">toggle button</div><div class="ui-button-info
toggle">toggle button</div>
+ <div class="ui-button-info">standard button</div><div
class="ui-button-toggle-info">toggle button</div><div
class="ui-button-toggle-info">toggle button</div>
</div>
<h3>Using BUTTON element</h3>
<div class="ui-buttonset">
Added: branches/labs/button/go-home.png
==============================================================================
Binary file. No diff available.
Modified: branches/labs/button/ui.button.js
==============================================================================
--- branches/labs/button/ui.button.js (original)
+++ branches/labs/button/ui.button.js Wed Jun 17 17:18:50 2009
@@ -19,12 +19,14 @@
_elmt_label:null,
_iconIsImage:false,
_iconBeforeLabel:true,
- _isToggleCB:null,
_buttonset:null,
+
_cornersValue:'',
_orientationValue:'',
_sizeValue:'',
+ _cbToggle:null,
+
_init:function(){
var self = this;
//-- should think about aborting or not init when ui-button-none,
ui-buttonset are used.
@@ -33,7 +35,7 @@
}
// read inline options from class attribute (that can't be null!!!)
- var inlineOptions=self._readClassNameOpts('ui-button',{size:'|auto|tiny|
small|normal|big|huge',orientation:'|auto|[trbli]',icon:'|[a-zA-Z0-9_-]+'})
+ var inlineOptions=self._readClassNameOpts('ui-button',{buttonMode:'|
toggle',size:'|auto|tiny|small|normal|big|huge',orientation:'|auto|
[trbli]',icon:'|[a-zA-Z0-9_-]+'})
self._mergeOpts(inlineOptions);
self.element.addClass($.ui.button.classes.base+'
ui-widget '+$.ui.button.classes.stateDefault)
@@ -44,8 +46,8 @@
self._wrapIcon();
// detect some toggle markup options
- if( self.element.hasClass('toggle') ){
- self.options.isToggle = true;
+ if( self.element.hasClass('toggle') ||
self.element.hasClass($.ui.button.classes.modeToggle)){
+ self.options.buttonMode = 'toggle';
}
if( self.element.hasClass('active') ||
self.element.hasClass($.ui.button.classes.stateActive)){
self.options.active = true;
@@ -53,7 +55,7 @@
// apply some settings
self._applyOpts(['size','orientation','icon','corners'])
- ._applyOpts(['toggle','active','label','isToggle'],true);
+ ._applyOpts(['buttonMode','active','label'],true);
if( null!==self.options.disabled ){
self._setData('disabled',self.options.disabled);
@@ -149,7 +151,7 @@
self._cornersValue = value=='auto'?'all':value;
self._rmExpClass('ui-corner-*','ui-corner-'+self._cornersValue);
break;
- case 'label':
+ case 'label': // @todo should think of a way to revert to original
label if changed
if( null!==value){
if( ''===value){
self._elmt_label.addClass($.ui.button.classes.wrapperLabelEmpty).html(' ');
@@ -177,18 +179,25 @@
case 'disabled':
self.element.toggleClass($.ui.button.stateDisabled,value);
break;
- case 'isToggle':
- if(! self.isToggleCB){
- self._isToggleCB = function(event){return self.toggle(event);};
- }
- if( value){
- self.element.bind('click',self._isToggleCB);
- }else{
- self.element.unbind('click',self._isToggleCB);
+ case 'buttonMode':
+ switch(value){
+ case 'toggle':
+ if(! self._cbToggle){
+ self._cbToggle = function(event){return self.toggle(event);};
+ }
+ self.element.addClass($.ui.button.classes.modeToggle);
+ self.element.bind('click.ui.button',self._cbToggle);
+ break;
+ default:
+ if(! self._cbToggle){
+ self.element.unbind('click.ui.button',self._cbToggle);
+ self.element.removeClass($.ui.button.classes.modeToggle);
+ }
+
}
break;
case 'active':
- if(! self._getData('isToggle'))
+ if( self._getData('buttonMode') !== 'toggle')
return false;
self.element.toggleClass($.ui.button.classes.stateActive+'
active',value?true:false);
self._trigger('setactive',0,self);
@@ -228,7 +237,6 @@
//** callbacks **//
toggle: function(event){
this._setData('active',this._getData('active')?false:true);
- this._trigger('toggle',event,this);
return this;
}
@@ -243,11 +251,10 @@
corners:'auto',
icon:'',
label:null,
+ buttonMode:null,
disabled:null,
- isToggle:false,
- toggle:false,
- active:false,
- checkButtonset:false
+ active:false, // set toggle button to active state
+ checkButtonset:false // check for .ui-buttonset parent and trigger
parent buttonset rendering if found
},
classes:{
base: 'ui-button',
@@ -255,6 +262,10 @@
wrapperLabelEmpty: 'ui-button-label-empty',
wrapperIcon: 'ui-button-icon',
wrapperIconEmpty: 'ui-icon-none',
+ modeToggle: 'ui-button-toggle',
+ modeSplit: 'ui-button-split',
+ modeMenu: 'ui-button-menu',
+ modeSplit: 'ui-button-split',
stateDefault: 'ui-state-default',
stateActive: 'ui-state-active',
stateHover: 'ui-state-hover',