r3342 committed - added some examples using labels and anchors. set ui-button to inline-...

r3342 committed - added some examples using labels and anchors. set ui-button to inline-...


Revision: 3342
Author: scottjehl
Date: Thu Oct 1 07:24:35 2009
Log: added some examples using labels and anchors. set ui-button to
inline-block to normalize
http://code.google.com/p/jquery-ui/source/detail?r=3342
Modified:
/branches/dev/tests/static/button/default.html
/branches/dev/themes/base/ui.button.css
=======================================
--- /branches/dev/tests/static/button/default.html    Thu Oct 1 06:38:40 2009
+++ /branches/dev/tests/static/button/default.html    Thu Oct 1 07:24:35 2009
@@ -8,7 +8,7 @@
    <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
    <style>
        div { margin: 0 0 1em; }
-
+        h2 { margin: 2em 0 1em; }
        #toolbar { margin-top: 2em; }
        #toolbar button, #toolbar .ui-button-set { float: left; }
    </style>
@@ -131,6 +131,37 @@
            <input type="radio" name="radio" id="mode2" style="display:
none;"/><button class="ui-button ui-widget ui-state-default
ui-corner-right"><span class="ui-button-text">View</span></button><label
for="mode2" style="display: none;">View</label>
        </span>
    </div>
+
+
+    <h2>Using Anchor Elements</h2>
+    <div>
+        No icon
+        <a href="#" class="ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all"><span class="ui-button-text">Simple button,
only text</span></a>
+        <a href="#" class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all"><span
class="ui-button-text">Secondary priority button</span></a>
+        <a href="#" class="ui-state-highlight ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all"><span
class="ui-button-text">Highlight button</span></a>
+        <a href="#" class="ui-state-error ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all"><span
class="ui-button-text">Error button</span></a>
+    </div>
+    <div>
+        With icon
+        <a href="#" class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-locked"></span> <span
class="ui-button-text">Button with icon on the left</span></a>
+        <a href="#" class="ui-button ui-button-icon-right ui-widget
ui-state-default ui-corner-all"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></a>
+    </div>
+
+
+        <h2>Using Label Elements</h2>
+    <div>
+        No icon
+        <label class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all"><span class="ui-button-text">Simple button, only
text</span></label>
+        <label class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all"><span
class="ui-button-text">Secondary priority button</span></label>
+        <label class="ui-state-highlight ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all"><span class="ui-button-text">Highlight
button</span></label>
+        <label class="ui-state-error ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all"><span class="ui-button-text">Error
button</span></label>
+    </div>
+    <div>
+        With icon
+        <label class="ui-button ui-widget ui-state-default ui-corner-all"><span
class="ui-icon ui-icon-locked"></span> <span class="ui-button-text">Button
with icon on the left</span></label>
+        <label class="ui-button ui-button-icon-right ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-scissors"></span> <span
class="ui-button-text">Button with icon on the right</span></label>
+    </div>
+
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script>
=======================================
--- /branches/dev/themes/base/ui.button.css    Thu Oct 1 06:38:40 2009
+++ /branches/dev/themes/base/ui.button.css    Thu Oct 1 07:24:35 2009
@@ -4,7 +4,7 @@
/* reset extra padding in Firefox */
button::-moz-focus-inner { border: 0; padding: 0; }
-.ui-button { position: relative; outline: 0; margin: 0 4px 0 0; padding:
0; height: 2.5em; text-decoration: none !important; cursor: pointer;
text-align: center; zoom: 1; overflow: visible; } /* the overflow property
removes extra width in IE */
+.ui-button { display: inline-block; position: relative; outline: 0;
margin: 0 4px 0 0; padding: 0; height: 2.5em; text-decoration:
none !important; cursor: pointer; text-align: center; zoom: 1; overflow:
visible; } /* the overflow property removes extra width in IE */
.ui-button .ui-button-text { display: block; padding: .4em 1em .4em 2.3em;
}
.ui-button .ui-icon { display: block; position: absolute; top: 50%;
left: .5em; margin-top: -8px; }