本例为使用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 > |