diff options
| author | Alexander Schmitz <arschmitz@gmail.com> | 2014-01-22 12:02:32 -0500 |
|---|---|---|
| committer | Alexander Schmitz <arschmitz@gmail.com> | 2015-10-07 10:57:59 -0400 |
| commit | 02033262ee0fb1d9f33c361b3c2ddfa168604854 (patch) | |
| tree | 645ed2427d14a598d02754b79e9eb8b889baf846 /demos/button/icons.html | |
| parent | 79d312f3f5cb5629d1bd7f9f899b41f304c388ef (diff) | |
| download | jquery-ui-02033262ee0fb1d9f33c361b3c2ddfa168604854.tar.gz jquery-ui-02033262ee0fb1d9f33c361b3c2ddfa168604854.zip | |
Button: Initial commit of button re-factor
Move to using element stats rather then js class states remove
ui-button-text spans.
Removed button set
Diffstat (limited to 'demos/button/icons.html')
| -rw-r--r-- | demos/button/icons.html | 78 |
1 files changed, 49 insertions, 29 deletions
diff --git a/demos/button/icons.html b/demos/button/icons.html index 0744218b2..f0b0f90fb 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -11,38 +11,58 @@ <script src="../../ui/button.js"></script> <link rel="stylesheet" href="../demos.css"> <script> - $(function() { - $( "button:first" ).button({ - icons: { - primary: "ui-icon-locked" - }, - text: false - }).next().button({ - icons: { - primary: "ui-icon-locked" - } - }).next().button({ - icons: { - primary: "ui-icon-gear", - secondary: "ui-icon-triangle-1-s" - } - }).next().button({ - icons: { - primary: "ui-icon-gear", - secondary: "ui-icon-triangle-1-s" - }, - text: false - }); - }); + $( function() { + $( ".widget button" ).first() + .button() + .next().button( { + icon: "ui-icon-gear", + showLabel: false + } ).next().button( { + icon: "ui-icon-gear" + } ).next().button( { + icon: "ui-icon-gear", + iconPosition: "end" + } ).next().button( { + icon: "ui-icon-gear", + iconPosition: "top" + } ).next().button( { + icon: "ui-icon-gear", + iconPosition: "bottom" + } ); + } ); </script> </head> <body> - -<button>Button with icon only</button> -<button>Button with icon on the left</button> -<button>Button with two icons</button> -<button>Button with two icons and no text</button> - +<div class="widget"> + <h1>Widget</h1> + <button>Button with only text</button> + <button>Button with icon only</button> + <button>Button with icon on the left</button> + <button>Button with icon on the right</button> + <button>Button with icon on the top</button> + <button>Button with icon on the bottom</button> +</div> +<div class="css"> + <h1>CSS</h1> + <button class="ui-button ui-widget ui-corner-all"> + Button with only text + </button> + <button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only"> + <span class="ui-icon ui-icon-gear"></span> Button with icon only + </button> + <button class="ui-button ui-widget ui-corner-all"> + <span class="ui-icon ui-icon-gear"></span> Button with icon on the left + </button> + <button class="ui-button ui-widget ui-corner-all"> + Button with icon on the right <span class="ui-icon ui-icon-gear"></span> + </button> + <button class="ui-button ui-widget ui-corner-all"> + <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> Button with icon on the top + </button> + <button class="ui-button ui-widget ui-corner-all"> + Button with icon on the bottom <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> + </button> +</div> <div class="demo-description"> <p>Some buttons with various combinations of text and icons.</p> </div> |