Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 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.4.2.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>