你好,游客 登录 注册 搜索
背景:
阅读新闻

jQuery 入门教程(27): 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





收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻