本例为使用jQuery的一个实用的例子，显示媒体播放器的控制条。其中按钮的图标使用jQuery库自带的CSS定义的一些图标（比如ui-icon-seek-end等）。
1 | <!doctype html> |
2 | <html lang="en"> |
3 | <head> |
4 | <meta charset="utf-8" /> |
5 | <title>jQuery UI Demos</title> |
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> |
110 | </span> |
111 | </div> |
112 | </body> |
113 | </html> |
1140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
