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