jQuery 入门教程(27): jQuery UI Button示例（二）

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

20130318001

posted @ 2013-03-25 12:54  xinyuyuanm  阅读(242)  评论(0)    收藏  举报