1 | <!DOCTYPE html>
|
---|
2 | <html lang="en">
|
---|
3 | <head>
|
---|
4 | <meta charset="utf-8">
|
---|
5 | <title>jQuery UI Button - Toolbar</title>
|
---|
6 | <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
---|
7 | <script src="../../jquery-1.6.2.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">
|
---|
12 | <style>
|
---|
13 | #toolbar {
|
---|
14 | padding: 10px 4px;
|
---|
15 | }
|
---|
16 | </style>
|
---|
17 | <script>
|
---|
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 | <p>
|
---|
114 | A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
|
---|
115 | an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
|
---|
116 | </p>
|
---|
117 | </div><!-- End demo-description -->
|
---|
118 |
|
---|
119 | </body>
|
---|
120 | </html>
|
---|