r3302 committed - button: added toolbar test/example
Revision: 3302
Author: joern.zaefferer
Date: Sat Sep 26 04:15:45 2009
Log: button: added toolbar test/example
http://code.google.com/p/jquery-ui/source/detail?r=3302
Modified:
/branches/dev/tests/visual/button/default.html
=======================================
--- /branches/dev/tests/visual/button/default.html Sat Sep 26 04:12:14 2009
+++ /branches/dev/tests/visual/button/default.html Sat Sep 26 04:15:45 2009
@@ -10,9 +10,9 @@
<script type="text/javascript">
$(function() {
function enable() {
- $("#push button").button();
- $("#toggle input").toggleButton();
- $("#radio").radioButton();
+ $("#push button, #toolbar button").button();
+ $("#toggle input, #toolbar :checkbox").toggleButton();
+ $("#radio, #mode").radioButton();
}
enable();
@@ -21,23 +21,27 @@
});
$("#disable-widgets").toggle(function() {
- $("#push button").button("disable");
- $("#toggle input").toggleButton("disable");
- $("#radio").radioButton("disable");
+ $("#push button, #toolbar button").button("disable");
+ $("#toggle input, #toolbar :checkbox").toggleButton("disable");
+ $("#radio, #mode").radioButton("disable");
}, function() {
- $("#push button").button("enable");
- $("#toggle input").toggleButton("enable");
- $("#radio").radioButton("enable");
+ $("#push button, #toolbar button").button("enable");
+ $("#toggle input, #toolbar :checkbox").toggleButton("enable");
+ $("#radio, #mode").radioButton("enable");
});
$("#toggle-widgets").toggle(function() {
- $("#push button").button("destroy");
- $("#toggle input").toggleButton("destroy");
- $("#radio").radioButton("destroy");
+ $("#push button, #toolbar button").button("destroy");
+ $("#toggle input, #toolbar :checkbox").toggleButton("destroy");
+ $("#radio, #mode").radioButton("destroy");
}, function() {
enable();
});
});
</script>
+ <style>
+ #toolbar { margin-top: 2em; }
+ #toolbar span { margin-right: 1em }
+ </style>
</head>
<body>
@@ -67,6 +71,27 @@
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice
3</label>
</div>
+<div id="toolbar" class="ui-widget-header ui-corner-all
ui-helper-clearfix">
+ <span>
+ <button><span class="ui-icon ui-icon-folder-open"></span></button>
+ <button><span class="ui-icon ui-icon-disk"></span></button>
+ <button><span class="ui-icon ui-icon-trash"></span></button>
+ </span>
+ <span>
+ <input type="checkbox" id="check1" /><label for="check1">B</label>
+ <input type="checkbox" id="check2" /><label for="check2">I</label>
+ <input type="checkbox" id="check3" /><label for="check3">U</label>
+ </span>
+ <span>
+ <button><span class="ui-icon ui-icon-print"></span></button>
+ <button><span class="ui-icon ui-icon-mail-closed"></span></button>
+ </span>
+ <span id="mode">
+ <input type="radio" id="mode1" name="radio" /><label
for="mode1">Edit</label>
+ <input type="radio" id="mode2" name="radio" /><label
for="mode2">View</label>
+ </span>
+</div>
+
<div style="margin-top: 2em;">
<button id="disable-widgets">Toggle disabled</button>
<button id="toggle-widgets">Toggle widget</button>