Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/demos/button/toolbar.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>jQuery UI Button - Toolbar</title>
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7 <script src="../../jquery-1.5.1.js"></script>
8 <script src="../../ui/jquery.ui.core.js"></script>
9 <script src="../../ui/jquery.ui.widget.js"></script>
10 <script src="../../ui/jquery.ui.button.js"></script>
11 <link rel="stylesheet" href="../demos.css">
12 <style>
13 #toolbar {
14 padding: 10px 4px;
15 }
16 </style>
17 <script>
18 $(function() {
19 $( "#beginning" ).button({
20 text: false,
21 icons: {
22 primary: "ui-icon-seek-start"
23 }
24 });
25 $( "#rewind" ).button({
26 text: false,
27 icons: {
28 primary: "ui-icon-seek-prev"
29 }
30 });
31 $( "#play" ).button({
32 text: false,
33 icons: {
34 primary: "ui-icon-play"
35 }
36 })
37 .click(function() {
38 var options;
39 if ( $( this ).text() === "play" ) {
40 options = {
41 label: "pause",
42 icons: {
43 primary: "ui-icon-pause"
44 }
45 };
46 } else {
47 options = {
48 label: "play",
49 icons: {
50 primary: "ui-icon-play"
51 }
52 };
53 }
54 $( this ).button( "option", options );
55 });
56 $( "#stop" ).button({
57 text: false,
58 icons: {
59 primary: "ui-icon-stop"
60 }
61 })
62 .click(function() {
63 $( "#play" ).button( "option", {
64 label: "play",
65 icons: {
66 primary: "ui-icon-play"
67 }
68 });
69 });
70 $( "#forward" ).button({
71 text: false,
72 icons: {
73 primary: "ui-icon-seek-next"
74 }
75 });
76 $( "#end" ).button({
77 text: false,
78 icons: {
79 primary: "ui-icon-seek-end"
80 }
81 });
82 $( "#shuffle" ).button();
83 $( "#repeat" ).buttonset();
84 });
85 </script>
86 </head>
87 <body>
88
89 <div class="demo">
90
91 <span 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" /><label for="shuffle">Shuffle</label>
100
101 <span id="repeat">
102 <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
103 <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
104 <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
105 </span>
106 </span>
107
108 </div><!-- End demo -->
109
110
111
112 <div class="demo-description">
113 <p>
114 A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
115 an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
116 </p>
117 </div><!-- End demo-description -->
118
119 </body>
120 </html>