5 <title>jQuery UI Button - Toolbar</title>
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7 <script src="../../jquery-1.9.1.js"></script>
8 <script src="../../ui/jquery.ui.core.js"></script>
9 <script src="../../ui/jquery.ui.widget.js"></script>
10 <script src="../../ui/jquery.ui.button.js"></script>
11 <link rel="stylesheet" href="../demos.css">
15 display: inline-block;
24 $( "#beginning" ).button({
27 primary: "ui-icon-seek-start"
30 $( "#rewind" ).button({
33 primary: "ui-icon-seek-prev"
39 primary: "ui-icon-play"
44 if ( $( this ).text() === "play" ) {
48 primary: "ui-icon-pause"
55 primary: "ui-icon-play"
59 $( this ).button( "option", options );
64 primary: "ui-icon-stop"
68 $( "#play" ).button( "option", {
71 primary: "ui-icon-play"
75 $( "#forward" ).button({
78 primary: "ui-icon-seek-next"
84 primary: "ui-icon-seek-end"
87 $( "#shuffle" ).button();
88 $( "#repeat" ).buttonset();
94 <div id="toolbar" class="ui-widget-header ui-corner-all">
95 <button id="beginning">go to beginning</button>
96 <button id="rewind">rewind</button>
97 <button id="play">play</button>
98 <button id="stop">stop</button>
99 <button id="forward">fast forward</button>
100 <button id="end">go to end</button>
102 <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
105 <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
106 <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
107 <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
111 <div class="demo-description">
113 A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
114 an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.