您的位置：首页 > Web前端 > JQuery

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

2014-01-15 12:53 477 查看


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





                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航