本例为使用jQuery的一个实用的例子，显示媒体播放器的控制条。其中按钮的图标使用jQuery库自带的CSS定义的一些图标（比如ui-icon-seek-end等）。
1 | <!doctype html> |
2 | <htmllang="en"> |
3 | <head> |
4 | <metacharset="utf-8"/> |
5 | <title>jQuery UI Demos</title> |
6 | <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> |
7 | <scriptsrc="scripts/jquery-1.9.1.js"></script> |
8 | <scriptsrc="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 | <divid="toolbar"class="ui-widget-header ui-corner-all"> |
92 | <buttonid="beginning">go to beginning</button> |
93 | <buttonid="rewind">rewind</button> |
94 | <buttonid="play">play</button> |
95 | <buttonid="stop">stop</button> |
96 | <buttonid="forward">fast forward</button> |
97 | <buttonid="end">go to end</button> |
98 |
99 | <inputtype="checkbox"id="shuffle"/> |
100 | <labelfor="shuffle">Shuffle</label> |
101 |
102 | <spanid="repeat"> |
103 | <inputtype="radio"id="repeat0"name="repeat" |
104 | checked="checked"/> |
105 | <labelfor="repeat0">No Repeat</label> |
106 | <inputtype="radio"id="repeat1"name="repeat"/> |
107 | <labelfor="repeat1">Once</label> |
108 | <inputtype="radio"id="repeatall"name="repeat"/> |
109 | <labelfor="repeatall">All</label> |
110 | </span> |
111 | </div> |
112 | </body> |
113 | </html> |
扫一扫
9117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
