r2836 - - ui.classnameoptions.js method _rmExpClass() don't use eval anymore (performance optimis...
Author: malk0.phpgtk
Date: Wed Jun 24 17:13:13 2009
New Revision: 2836
Modified:
branches/labs/button/demo.html
branches/labs/button/ui-button.css
branches/labs/button/ui.button.js
branches/labs/button/ui.classnameoptions.js
Log:
- ui.classnameoptions.js method _rmExpClass() don't use eval anymore
(performance optimisation)
- ui.button.js bug correction that lead in firing twice the click event +
now setting orientation to auto or empty look for parent button set
orientation before going to left.
- ui.button.css add negative text indent on empty labels.
- demo.html add a click counter and use differents icons for variety.
Modified: branches/labs/button/demo.html
==============================================================================
--- branches/labs/button/demo.html (original)
+++ branches/labs/button/demo.html Wed Jun 24 17:13:13 2009
@@ -46,7 +46,16 @@
var buttonOptions={
checkButtonset:true
};
- $('.ui-button').button(buttonOptions);
+ function clickCounter(){
+ var label = $(this).find('.ui-button-label');
+ var count = label.html().match(/\d+/);
+ if(null!==count){
+ label.html(label.html().replace(/(\d+)/,1+parseInt(count[0])))
+ }else{
+ label.append(' (#1 )')
+ }
+ }
+ $('.ui-button').click(clickCounter).button(buttonOptions);
$('#settingBar select').change(function(){
if($(this).is('#bodySizeSelector'))
@@ -116,18 +125,18 @@
<h3>Using A element</h3>
<a href="javascript:" class="ui-button">standard button starting with no
icon</a>
- <a href="javascript:" class="ui-button ui-button-info">standard button</a>
+ <a href="javascript:" class="ui-button ui-button-check">standard
button</a>
<a href="javascript:" class="ui-button ui-button-info toggle">toggle
button</a>
<h3>Using SPAN element</h3>
- <span class="ui-button ui-button-info">standard button</span>
- <span class="ui-button ui-button-info toggle">toggle button</span>
+ <span class="ui-button ui-button-wrench">standard button</span>
+ <span class="ui-button ui-button-flag toggle">toggle button</span>
<h3>Using DIV element</h3>
- <div class="ui-button ui-button-info">standard button</div>
- <div class="ui-button ui-button-info toggle">toggle button</div>
+ <div class="ui-button ui-button-plus">standard button</div>
+ <div class="ui-button ui-button-circle-triangle-w toggle">toggle
button</div>
<h3>Using BUTTON element</h3>
- <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>
+ <button type="button" class="ui-button ui-button-document"
disabled="disabled" id="unable">button with attribute disabled</button>
+ <button type="button" class="ui-button ui-button-toggle-active-cancel"
id="toggleUnable">toggle previous button disable or not</button>
</div>
<div id="demo2">
@@ -135,21 +144,21 @@
<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: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>
+ <a href="javascript:" class="ui-button">standard button</a><a
href="javascript:" class="ui-button ui-button-trash">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>
+ <h3>Using SPAN element</h3>
<div class="ui-buttonset-r">
- <span class="ui-button ui-button-l">standard with icon on the
left</span><span class="ui-button ui-button-info">standard
button</span><span class="ui-button ui-button-info toggle">toggle
button</span><span class="ui-button ui-button-toggle-info">toggle
button</span>
+ <span class="ui-button ui-button-l-calendar">standard with
icon</span><span class="ui-button ui-button-contact">standard
button</span><span class="ui-button ui-button-person toggle">toggle
button</span><span class="ui-button ui-button-toggle-close">toggle
button</span>
</div>
<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 ui-button-info">standard button</div><div
class="ui-button ui-button-toggle-info">toggle button</div><div
class="ui-button ui-button-toggle-info">toggle button</div>
+ <div class="ui-button ui-button-home">standard button</div><div
class="ui-button ui-button-toggle-eject">toggle button</div><div
class="ui-button ui-button-toggle-power">toggle button</div>
</div>
<h3>Using BUTTON element</h3>
<div class="ui-buttonset">
- <button type="button" class="ui-button ui-button-info">standard
button</button><button type="button" class="ui-button
ui-button-info">standard button</button><button type="button"
class="ui-button ui-button-info toggle">toggle button</button>
+ <button type="button" class="ui-button ui-button-folder-open">standard
button</button><button type="button" class="ui-button
ui-button-disk">standard button</button><button type="button"
class="ui-button ui-button-zoomin toggle">toggle button</button>
</div>
</body>
</html>
Modified: branches/labs/button/ui-button.css
==============================================================================
--- branches/labs/button/ui-button.css (original)
+++ branches/labs/button/ui-button.css Wed Jun 24 17:13:13 2009
@@ -50,6 +50,7 @@
width:0px;
zoom:1;
overflow:visible;
+ text-indent:-99999px;
white-space:nowrap;
padding:0.2em 0;
margin:0 !important;
Modified: branches/labs/button/ui.button.js
==============================================================================
--- branches/labs/button/ui.button.js (original)
+++ branches/labs/button/ui.button.js Wed Jun 24 17:13:13 2009
@@ -105,8 +105,8 @@
}
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();
if( event.type==='keydown'){
+ self.element.click();
return false;
}
}
@@ -220,8 +220,12 @@
}
break;
case 'orientation':
- if( value=='')
+ if( ! value){
value = 'auto';
+ }
+ if( value==='auto' && self._buttonset &&
self._buttonset.buttonset('option','orientation') ){
+ value = self._buttonset.buttonset('option','orientation');
+ }
self._orientationValue = (value=='auto'||value=='i')?'l':value;
if( value==='i'){
self._setData('label','');
Modified: branches/labs/button/ui.classnameoptions.js
==============================================================================
--- branches/labs/button/ui.classnameoptions.js (original)
+++ branches/labs/button/ui.classnameoptions.js Wed Jun 24 17:13:13 2009
@@ -76,7 +76,7 @@
*/
_rmExpClass:function(exp,add,elmt){
elmt=(!elmt)?this.element:$(elmt);
- eval('exp = /(?:^|\\s)'+exp.replace(/\*/g,'[a-zA-Z_0-9-]*')+'(?=$|
\\s)/g;');
+ 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);