|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="UTF-8" /> |
|
5 <title>jQuery UI Button - Toolbar demo</title> |
|
6 <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
|
7 <script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
|
8 <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> |
|
9 <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> |
|
10 <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> |
|
11 <link type="text/css" href="../demos.css" rel="stylesheet" /> |
|
12 <style type="text/css"> |
|
13 #toolbar { |
|
14 padding: 10px 4px; |
|
15 } |
|
16 </style> |
|
17 <script type="text/javascript"> |
|
18 $(function() { |
|
19 $('#beginning').button({ |
|
20 text: false, |
|
21 icons: { |
|
22 primary: 'ui-icon-seek-start' |
|
23 } |
|
24 }); |
|
25 $('#rewind').button({ |
|
26 text: false, |
|
27 icons: { |
|
28 primary: 'ui-icon-seek-prev' |
|
29 } |
|
30 }); |
|
31 $('#play').button({ |
|
32 text: false, |
|
33 icons: { |
|
34 primary: 'ui-icon-play' |
|
35 } |
|
36 }) |
|
37 .click(function() { |
|
38 var options; |
|
39 if ($(this).text() == 'play') { |
|
40 options = { |
|
41 label: 'pause', |
|
42 icons: { |
|
43 primary: 'ui-icon-pause' |
|
44 } |
|
45 }; |
|
46 } else { |
|
47 options = { |
|
48 label: 'play', |
|
49 icons: { |
|
50 primary: 'ui-icon-play' |
|
51 } |
|
52 }; |
|
53 } |
|
54 $(this).button('option', options); |
|
55 }); |
|
56 $('#stop').button({ |
|
57 text: false, |
|
58 icons: { |
|
59 primary: 'ui-icon-stop' |
|
60 } |
|
61 }) |
|
62 .click(function() { |
|
63 $('#play').button('option', { |
|
64 label: 'play', |
|
65 icons: { |
|
66 primary: 'ui-icon-play' |
|
67 } |
|
68 }); |
|
69 }); |
|
70 $('#forward').button({ |
|
71 text: false, |
|
72 icons: { |
|
73 primary: 'ui-icon-seek-next' |
|
74 } |
|
75 }); |
|
76 $('#end').button({ |
|
77 text: false, |
|
78 icons: { |
|
79 primary: 'ui-icon-seek-end' |
|
80 } |
|
81 }); |
|
82 $("#shuffle").button(); |
|
83 $("#repeat").buttonset(); |
|
84 }); |
|
85 </script> |
|
86 </head> |
|
87 <body> |
|
88 |
|
89 <div class="demo"> |
|
90 |
|
91 <span id="toolbar" class="ui-widget-header ui-corner-all"> |
|
92 <button id="beginning">go to beginning</button> |
|
93 <button id="rewind">rewind</button> |
|
94 <button id="play">play</button> |
|
95 <button id="stop">stop</button> |
|
96 <button id="forward">fast forward</button> |
|
97 <button id="end">go to end</button> |
|
98 |
|
99 <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label> |
|
100 |
|
101 <span id="repeat"> |
|
102 <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label> |
|
103 <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label> |
|
104 <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> |
|
105 </span> |
|
106 </span> |
|
107 |
|
108 </div><!-- End demo --> |
|
109 |
|
110 |
|
111 |
|
112 <div class="demo-description"> |
|
113 |
|
114 <p> |
|
115 A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, |
|
116 an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. |
|
117 </p> |
|
118 |
|
119 </div><!-- End demo-description --> |
|
120 |
|
121 |
|
122 |
|
123 </body> |
|
124 </html> |