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, 
 
补充：web前端 , JavaScript ,