source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/demos/button/toolbar.html@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

Oran code for supporting format changes to document.
  • Property svn:executable set to *
File size: 2.9 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Button - Toolbar demo</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.4.1.js"></script>
7 <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
9 <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
10 <link type="text/css" href="../demos.css" rel="stylesheet" />
11 <style type="text/css">
12 #toolbar {
13 padding: 10px 4px;
14 }
15 </style>
16 <script type="text/javascript">
17 $(function() {
18 $('#beginning').button({
19 text: false,
20 icons: {
21 primary: 'ui-icon-seek-start'
22 }
23 });
24 $('#rewind').button({
25 text: false,
26 icons: {
27 primary: 'ui-icon-seek-prev'
28 }
29 });
30 $('#play').button({
31 text: false,
32 icons: {
33 primary: 'ui-icon-play'
34 }
35 })
36 .click(function() {
37 var options;
38 if ($(this).text() == 'play') {
39 options = {
40 label: 'pause',
41 icons: {
42 primary: 'ui-icon-pause'
43 }
44 };
45 } else {
46 options = {
47 label: 'play',
48 icons: {
49 primary: 'ui-icon-play'
50 }
51 };
52 }
53 $(this).button('option', options);
54 });
55 $('#stop').button({
56 text: false,
57 icons: {
58 primary: 'ui-icon-stop'
59 }
60 })
61 .click(function() {
62 $('#play').button('option', {
63 label: 'play',
64 icons: {
65 primary: 'ui-icon-play'
66 }
67 });
68 });
69 $('#forward').button({
70 text: false,
71 icons: {
72 primary: 'ui-icon-seek-next'
73 }
74 });
75 $('#end').button({
76 text: false,
77 icons: {
78 primary: 'ui-icon-seek-end'
79 }
80 });
81 $("#shuffle").button();
82 $("#repeat").buttonset();
83 });
84 </script>
85</head>
86<body>
87
88<div class="demo">
89
90 <span id="toolbar" class="ui-widget-header ui-corner-all">
91 <button id="beginning">go to beginning</button>
92 <button id="rewind">rewind</button>
93 <button id="play">play</button>
94 <button id="stop">stop</button>
95 <button id="forward">fast forward</button>
96 <button id="end">go to end</button>
97
98 <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
99
100 <span id="repeat">
101 <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
102 <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
103 <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
104 </span>
105 </span>
106
107</div><!-- End demo -->
108
109
110
111<div class="demo-description">
112
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
118</div><!-- End demo-description -->
119
120
121
122</body>
123</html>
Note: See TracBrowser for help on using the repository browser.