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