6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7 <script src="scripts/jquery-1.9.1.js"></script>
8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9 <style>
10 #toolbar {
11 padding: 4px;
12 display: inline-block;
13 }
14 /* support: IE7 */
15 * + html #toolbar {
16 display: inline;
17 }
18 </style>
19 <script>
20 $(function () {
21 $("#beginning").button({
22 text: false,
23 icons: {
24 primary: "ui-icon-seek-start"
25 }
26 });
27 $("#rewind").button({
28 text: false,
29 icons: {
30 primary: "ui-icon-seek-prev"
31 }
32 });
33 $("#play").button({
34 text: false,
35 icons: {
36 primary: "ui-icon-play"
37 }
38 })
39 .click(function () {
40 var options;
41 if ($(this).text() === "play") {
42 options = {
43 label: "pause",
44 icons: {
45 primary: "ui-icon-pause"
46 }
47 };
48 } else {
49 options = {
50 label: "play",
51 icons: {
52 primary: "ui-icon-play"
53 }
54 };
55 }
56 $(this).button("option", options);
57 });
58 $("#stop").button({
59 text: false,
60 icons: {
61 primary: "ui-icon-stop"
62 }
63 })
64 .click(function () {
65 $("#play").button("option", {
66 label: "play",
67 icons: {
68 primary: "ui-icon-play"
69 }
70 });
71 });
72 $("#forward").button({
73 text: false,
74 icons: {
75 primary: "ui-icon-seek-next"
76 }
77 });
78 $("#end").button({
79 text: false,
80 icons: {
81 primary: "ui-icon-seek-end"
82 }
83 });
84 $("#shuffle").button();
85 $("#repeat").buttonset();
86 });
87 </script>
88 </head>
89 <body>
90
91 <div 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" />
100 <label for="shuffle">Shuffle</label>
101
102 <span id="repeat">
103 <input type="radio" id="repeat0" name="repeat"
104 checked="checked" />
105 <label for="repeat0">No Repeat</label>
106 <input type="radio" id="repeat1" name="repeat" />
107 <label for="repeat1">Once</label>
108 <input type="radio" id="repeatall" name="repeat" />
109 <label for="repeatall">All</label>
我要投稿
