r2815 - - add ui-button class to elements to optimise element lookup
Author: malk0.phpgtk
Date: Thu Jun 18 18:42:57 2009
New Revision: 2815
Modified:
branches/labs/button/demo.html
Log:
- add ui-button class to elements to optimise element lookup
Modified: branches/labs/button/demo.html
==============================================================================
--- branches/labs/button/demo.html (original)
+++ branches/labs/button/demo.html Thu Jun 18 18:42:57 2009
@@ -46,7 +46,7 @@
var buttonOptions={
checkButtonset:true
};
- $('[class*=ui-button]').button(buttonOptions);
+ $('.ui-button').button(buttonOptions);
$('#settingBar select').change(function(){
if($(this).is('#bodySizeSelector'))
@@ -70,9 +70,9 @@
<label>Set Icon:
<select id="iconSelector" class="ui-buttonset-small" name="icon">
<option value="">no icon</option>
- <option class="ui-icon-info" value="info">info</option>
- <option class="ui-icon-wrench" value="wrench">wrench</option>
- <option class="ui-icon-lightbulb" value="lightbulb">lightbulb</option>
+ <option class="ui-icon-info" value="ui-icon-info">info</option>
+ <option class="ui-icon-wrench" value="ui-icon-wrench">wrench</option>
+ <option class="ui-icon-lightbulb"
value="ui-icon-lightbulb">lightbulb</option>
<option class="ui-icon-image" value="go-home.png">image file</option>
</select>
</label>
@@ -115,18 +115,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-info">standard button</a>
- <a href="javascript:" class="ui-button-info toggle">toggle 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>
<h3>Using SPAN element</h3>
- <span class="ui-button-info">standard button</span>
- <span class="ui-button-info toggle">toggle button</span>
+ <span class="ui-button ui-button-info">standard button</span>
+ <span class="ui-button ui-button-info toggle">toggle button</span>
<h3>Using DIV element</h3>
- <div class="ui-button-info">standard button</div>
- <div class="ui-button-info toggle">toggle button</div>
+ <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-info" disabled="disabled">button
with attribute disabled</button>
- <button type="button" class="ui-button-toggle-info">toggle button</button>
+ <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>
</div>
<div id="demo2">
@@ -134,21 +134,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:" class="ui-button-info">standard button</a><a
href="javascript:" class="ui-button-info toggle">toggle button</a><a
href="javascript:" class="ui-button-info toggle">toggle button</a>
+ <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>
</div>
<h3>Using SPAN element (start with icon on the right )</h3>
<div class="ui-buttonset-r">
- <span class="ui-button-l">standard with icon on the left</span><span
class="ui-button-info">standard button</span><span class="ui-button-info
toggle">toggle button</span><span class="ui-button-info toggle">toggle
button</span>
+ <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>
</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-info">standard button</div><div
class="ui-button-toggle-info">toggle button</div><div
class="ui-button-toggle-info">toggle button</div>
+ <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>
<h3>Using BUTTON element</h3>
<div class="ui-buttonset">
- <button type="button" class="ui-button-info">standard
button</button><button type="button" class="ui-button-info">standard
button</button><button type="button" class="ui-button-info toggle">toggle
button</button>
+ <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>
</div>
</body>
</html>