diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-01-07 03:19:50 +0000 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-01-07 03:19:50 +0000 |
| commit | 90fb45dffafc2e891b1ebca948ad33e6b94de112 (patch) | |
| tree | 6bd09ea116ef2cdd86ec0fa70bf740617f67d441 /demos/button/toolbar.html | |
| parent | 975b02a82cdff29fd8469bfe4324472c2ae3f954 (diff) | |
| download | jquery-ui-90fb45dffafc2e891b1ebca948ad33e6b94de112.tar.gz jquery-ui-90fb45dffafc2e891b1ebca948ad33e6b94de112.zip | |
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests).
Diffstat (limited to 'demos/button/toolbar.html')
| -rw-r--r-- | demos/button/toolbar.html | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html new file mode 100644 index 000000000..dc35241cb --- /dev/null +++ b/demos/button/toolbar.html @@ -0,0 +1,123 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Toolbar demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #toolbar { + padding: 10px 4px; + } + </style> + <script type="text/javascript">
+ $(function() {
+ $('#beginning').button({ + text: false, + icons: { + primary: 'ui-icon-seek-start' + } + });
+ $('#rewind').button({ + text: false, + icons: { + primary: 'ui-icon-seek-prev' + } + });
+ $('#play').button({ + text: false, + icons: { + primary: 'ui-icon-play' + } + }) + .click(function() { + var options; + if ($(this).text() == 'play') { + options = { + label: 'pause', + icons: { + primary: 'ui-icon-pause' + } + }; + } else { + options = { + label: 'play', + icons: { + primary: 'ui-icon-play' + } + }; + } + $(this).button('option', options); + });
+ $('#stop').button({ + text: false, + icons: { + primary: 'ui-icon-stop' + } + })
+ .click(function() {
+ $('#play').button('option', {
+ label: 'play',
+ icons: {
+ primary: 'ui-icon-play'
+ }
+ });
+ });
+ $('#forward').button({ + text: false, + icons: { + primary: 'ui-icon-seek-next' + } + });
+ $('#end').button({ + text: false, + icons: { + primary: 'ui-icon-seek-end' + } + });
+ $("#shuffle").button();
+ $("#repeat").buttonset();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+ <span id="toolbar" class="ui-widget-header ui-corner-all"> + <button id="beginning">go to beginning</button> + <button id="rewind">rewind</button> + <button id="play">play</button> + <button id="stop">stop</button> + <button id="forward">fast forward</button> + <button id="end">go to end</button>
+
+ <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
+
+ <span id="repeat">
+ <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
+ <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
+ <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
+ </span> + </span>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>
+ A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
+ an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
+</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
|