首页 > 程序开发 > web前端 > JavaScript > 正文
jQuery UI Button示例(二)
2013-03-25       个评论      
收藏    我要投稿
本例为使用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
点击复制链接 与好友分享!回本站首页
相关TAG标签 示例
上一篇: jQuery UI Datepicker 示例(一)
下一篇:jQuery去掉字符串起始和结尾的空格
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站