r3343 committed - cleaned out extra markup examples to make for a more workable static p...
Revision: 3343
Author: scottjehl
Date: Thu Oct 1 07:48:50 2009
Log: cleaned out extra markup examples to make for a more workable static
page. CSS and classes still yet to be updated.
http://code.google.com/p/jquery-ui/source/detail?r=3343
Modified:
/branches/dev/tests/static/button/default.html
=======================================
--- /branches/dev/tests/static/button/default.html Thu Oct 1 07:24:35 2009
+++ /branches/dev/tests/static/button/default.html Thu Oct 1 07:48:50 2009
@@ -9,158 +9,90 @@
<style>
div { margin: 0 0 1em; }
h2 { margin: 2em 0 1em; }
- #toolbar { margin-top: 2em; }
- #toolbar button, #toolbar .ui-button-set { float: left; }
</style>
</head>
<body>
+
+ <h2>Using button elements</h2>
<div>
- No icon
- <button 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></button>
- <button 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></button>
- <button 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></button>
- <button 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></button>
+ <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all">
+ <span class="ui-button-text">Button</span>
+ </button>
+
+ <button class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ </button>
+
+ <button class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ <span class="ui-button-text">Button</span>
+ </button>
+
+ <button class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
+ <span class="ui-button-text">Button</span>
+ <span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
+ </button>
</div>
+
+ <h2>Using anchor elements</h2>
+
<div>
- No icon (hover)
- <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all ui-state-hover"><span class="ui-button-text">Simple button,
only text</span></button>
- <button class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-hover"><span
class="ui-button-text">Secondary priority button</span></button>
- <button class="ui-state-highlight ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-hover"><span
class="ui-button-text">Highlight button</span></button>
- <button class="ui-state-error ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all ui-state-hover"><span
class="ui-button-text">Error button</span></button>
+ <a href="#" class="ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all">
+ <span class="ui-button-text">Button</span>
+ </a>
+
+ <a href="#" class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ </a>
+
+ <a href="#" class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ <span class="ui-button-text">Button</span>
+ </a>
+
+ <a href="#" class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
+ <span class="ui-button-text">Button</span>
+ <span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
+ </a>
</div>
- <div>
- No icon (active)
- <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all ui-state-active"><span class="ui-button-text">Simple button,
only text</span></button>
- <button class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-active"><span
class="ui-button-text">Secondary priority button</span></button>
- <button class="ui-state-highlight ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-active"><span
class="ui-button-text">Highlight button</span></button>
- <button class="ui-state-error ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all ui-state-active"><span
class="ui-button-text">Error button</span></button>
- </div>
- <div>
- No icon (disabled)
- <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all ui-state-disabled"><span class="ui-button-text">Simple
button, only text</span></button>
- <button class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-disabled"><span
class="ui-button-text">Secondary priority button</span></button>
- <button class="ui-state-highlight ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-disabled"><span
class="ui-button-text">Highlight button</span></button>
- <button class="ui-state-error ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all ui-state-disabled"><span
class="ui-button-text">Error button</span></button>
- </div>
- <div>
- With icon
- <button 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></button>
- <button 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></button>
- </div>
- <div>
- With icon, highlight
- <button class="ui-state-highlight 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></button>
- <button class="ui-state-highlight 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></button>
- </div>
- <div>
- With icon (hover)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover"><span class="ui-icon ui-icon-locked"></span> <span
class="ui-button-text">Button with icon on the left</span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
- </div>
- <div>
- With icon, highlight (hover)
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover"><span class="ui-icon ui-icon-locked"></span>
<span class="ui-button-text">Button with icon on the left</span></button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
- </div>
- <div>
- With icon (active)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active"><span class="ui-icon ui-icon-locked"></span> <span
class="ui-button-text">Button with icon on the left</span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
- </div>
- <div>
- With icon, highlight (active)
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active"><span class="ui-icon ui-icon-locked"></span>
<span class="ui-button-text">Button with icon on the left</span></button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
- </div>
- <div>
- With icon (disabled)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled"><span class="ui-icon ui-icon-locked"></span> <span
class="ui-button-text">Button with icon on the left</span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
- </div>
- <div>
- With icon, highlight (disabled)
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled"><span class="ui-icon
ui-icon-locked"></span> <span class="ui-button-text">Button with icon on
the left</span></button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
- </div>
- <div class="ui-button-set">
- Set
- <button class="ui-button ui-widget ui-state-default
ui-corner-left"><span class="ui-button-text">Simple button, only
text</span></button>
- <button class="ui-button ui-widget ui-state-default"><span
class="ui-button-text">Simple button, only text</span></button>
- <button class="ui-button ui-widget ui-state-default
ui-corner-right"><span class="ui-button-text">Simple button, only
text</span></button>
- </div>
- <div class="ui-button-set">
- Set (hover)
- <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-hover"><span class="ui-button-text">Simple button, only
text</span></button>
- <button class="ui-button ui-widget ui-state-default
ui-state-hover"><span class="ui-button-text">Simple button, only
text</span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-hover"><span class="ui-button-text">Simple button, only
text</span></button>
- </div>
- <div class="ui-button-set">
- Set (active)
- <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-active"><span class="ui-button-text">Simple button, only
text</span></button>
- <button class="ui-button ui-widget ui-state-default
ui-state-active"><span class="ui-button-text">Simple button, only
text</span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-active"><span class="ui-button-text">Simple button, only
text</span></button>
- </div>
- <div class="ui-button-set">
- Set (disabled)
- <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-disabled"><span class="ui-button-text">Simple button, only
text</span></button>
- <button class="ui-button ui-widget ui-state-default
ui-state-disabled"><span class="ui-button-text">Simple button, only
text</span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-disabled"><span class="ui-button-text">Simple button, only
text</span></button>
- </div>
-
- <div class="ui-widget-header ui-corner-all ui-helper-clearfix"
id="toolbar">
- <button class="ui-button ui-widget ui-state-default ui-corner-all"><span
class="ui-button-text">Toolbar</span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover"><span class="ui-button-text">Toolbar</span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active"><span class="ui-button-text">Toolbar</span></button>
- <span>
- <button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-folder-open"/></button>
- <button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-disk"/></button>
- <button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-trash"/></button>
- </span>
- <span class="ui-button-set">
- <input type="checkbox" id="check1" style="display: none;"/><button
class="ui-button ui-widget ui-state-default ui-corner-left"><span
class="ui-button-text">B</span></button><label for="check1" style="display:
none;">B</label>
- <input type="checkbox" id="check2" style="display: none;"/><button
class="ui-button ui-widget ui-state-default"><span
class="ui-button-text">I</span></button><label for="check2" style="display:
none;">I</label>
- <input type="checkbox" id="check3" style="display: none;"/><button
class="ui-button ui-widget ui-state-default ui-corner-right"><span
class="ui-button-text">U</span></button><label for="check3" style="display:
none;">U</label>
- </span>
- <span>
- <button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-print"/></button>
- <button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-mail-closed"/></button>
- </span>
- <span id="mode" class="ui-button-set">
- <input type="radio" name="radio" id="mode1" style="display:
none;"/><button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-active"><span class="ui-button-text">Edit</span></button><label
for="mode1" style="display: none;">Edit</label>
- <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>
+ <h2>Using label elements (used when proxying to radio or check
inputs)</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>
+ <label class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all">
+ <span class="ui-button-text">Button</span>
+ </label>
+
+ <label class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ </label>
+
+ <label class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ <span class="ui-button-text">Button</span>
+ </label>
+
+ <label class="ui-button ui-widget ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
+ <span class="ui-button-text">Button</span>
+ <span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
+ </label>
</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>
+ <h2>Button Sets</h2>
+
+ <div class="ui-button-set">
+ <button class="ui-button ui-widget ui-state-default
ui-corner-left"><span class="ui-button-text">Simple button</span></button>
+ <button class="ui-button ui-widget ui-state-default"><span
class="ui-button-text">Simple button</span></button>
+ <button class="ui-button ui-widget ui-state-default
ui-corner-right"><span class="ui-button-text">Simple button</span></button>
</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>