+    Hi, I'm fond of jquery and jquery ui. I'm totally convinced by the "new"
ui-css-framework, but some stuff still need too more coding imho.
+
+

+    Part of the good stuff of this css-framework is you can easily change the
look and feel of a web application using theme-roller.
+    <br />
+    But the dark side started to show it's face on me when I wanted to use
simple buttons using for examples ui-icons
+

+So here we are, this is an attempt to create a jquery-ui-button plugin, my
first ui-plugin so i must learn all the standards of doing suchs things.
(please be kind if your see any bad practice or better way to do things
drop me a line by <a href="mailto:jgotti@jgotti.org">mail</a>)
+

+    This is page will be subject to many changes and is there only for
testing purpose, but don't hesitate to join me by mail for any ideas, bug
reports or any feedback you can provide
+    <br />
+    The reference project page i'm working from is <a
href="http://jqueryui.pbworks.com/Buttons" target="_blank">there</a>
+
+

+    <h2>current state</h2>
+    <ul>
+        <li>tested working under: firefox, chrome, midori, opera, ie6/7/8</li>
+        <li>Buttons elements don't succeed to render same size as other tags in
many browsers (notably ie)</li>
+        <li>
+            Opera fail to keep the full height when displaying only icons with
vertical orientations, but buttons behave like others elements regarding
padding
+        </li>
+
+        <li>Vertical orientations are buggy with ie6 (not >=7) and render the
full button as a block if original element is not a button.
+        <li>Destroy isn't functionnal for now (but will be soon)</li>
+        <li>
+            Toggle buttons are functionnal and use additional <em>toggle</em> and
<em>active</em> classes for detection and ui-state-highlight for rendering
the toggle state.
+            Toggle buttons have an option for toggle callback.
+        </li>
+        <li>
+            It totally work with theme-roller and jquery-ui css framework as it's
heavily based on it
+        </li>
+        <li>
+            you can parameter orientation, size and ui-icon all in one in the class
attribute like this:
+            ui-button-size-orientation-iconname for example at the start this demo
use class: ui-button-info        </li>
+        <li>
+            Buttonset can also be configured by class attribute to manage default
behaviour of contained buttons like this:
+            <br />ui-buttonset-size-orientation.
+        </li>
+        <li>
+            A special orientation <em>i</em> exists and mean Only icon so when
setted will hide the label (usefull to allow user to choose how to dispay
buttonset in future),
+            but for now changing orientation doesn't restore label (will be done at
same time than destroy support)
+        </li>
+
+        <li>
+            Select elements can be rendered as a group of toggle buttons using
ui-buttonset and a special $('select').selectbuttonset() method but this
will probably change as i doubt that it's the correct way to instantiate
this, but that's my first ui-widget try so a lot of reading is awaiting
me :)
+            you can see an example with the set icon selector.
+        </li>
+    </ul>
+    <h2>Changed</h2>
+    <ul>
+        <li>Now orientation are top left right bottom based instead of north
west south est</li>
+        <li>replace ui-icon- by ui-icon-none</li>
+        <li>change padding values to feat like existing buttons inside other
plugins</li>
+        <li>replace ui-widget-content on button by ui-widget but not for
buttonset</li>
+    </ul>
+

Play with selectors here to change settings