|
3 | 3 | <head> |
4 | 4 | <title>jQuery UI Menubar - Default demo</title> |
5 | 5 | <link rel="stylesheet" href="../demos.css" type="text/css" /> |
6 | | - <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> |
| 6 | + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" /> |
7 | 7 | <script src="../../jquery-1.6.2.js"></script> |
8 | 8 | <script src="../../ui/jquery.ui.core.js"></script> |
9 | 9 | <script src="../../ui/jquery.ui.widget.js"></script> |
|
13 | 13 | <script src="../../ui/jquery.ui.menubar.js"></script> |
14 | 14 | <script> |
15 | 15 | $(function() { |
16 | | - $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)"); |
17 | | - |
18 | | - $("#bar1, .menubar").menubar({ |
19 | | - select: function(event, ui) { |
20 | | - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); |
| 16 | + function select(event, ui) { |
| 17 | + $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); |
| 18 | + if (ui.item.text() == 'Quit') { |
| 19 | + $(this).menubar('destroy'); |
21 | 20 | } |
| 21 | + } |
| 22 | + $("#bar1&qu
8222
ot;).menubar({ |
| 23 | + position: { |
| 24 | + within: $("#demo-frame").add(window).first() |
| 25 | + }, |
| 26 | + select: select |
22 | 27 | }); |
23 | | - |
| 28 | + |
24 | 29 | $(".menubar-icons").menubar({ |
| 30 | + autoExpand: true, |
25 | 31 | menuIcon: true, |
26 | 32 | buttons: true, |
27 | | - select: function(event, ui) { |
28 | | - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); |
29 | | - } |
| 33 | + position: { |
| 34 | + within: $("#demo-frame").add(window).first() |
| 35 | + }, |
| 36 | + select: select |
30 | 37 | }); |
31 | 38 | }); |
32 | 39 | </script> |
33 | | - <style type="text/css"> |
34 | | - #bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */ |
35 | | - .ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; } |
36 | | - .ui-menu .ui-icon { float: right; } |
37 | | - .ui-menu li.ui-state-disabled { |
38 | | - font-weight: bold; |
39 | | - padding: .0em .4em; |
40 | | - margin: .4em 0 .2em; |
41 | | - line-height: 1.5; |
42 | | - } |
43 | | - |
44 | | - /* menubar styles */ |
45 | | - .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; } |
46 | | - .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } |
47 | | - |
48 | | - .ui-menubar { |
49 | | - list-style: none; |
50 | | - margin: 0; |
51 | | - padding-left: 0; |
52 | | - } |
53 | | - |
54 | | - .ui-menubar-item { |
55 | | - float: left; |
56 | | - } |
57 | | - /* |
58 | | - table { |
59 | | - border-collapse: collapse; |
60 | | - } |
61 | | - th, td { |
62 | | - padding: 0.5em; |
63 | | - border: 1px solid black; |
64 | | - } |
65 | | - */ |
| 40 | + <style> |
| 41 | + #bar1, #bar2 { margin: 0 0 4em; } |
66 | 42 | </style> |
67 | 43 | </head> |
68 | 44 | <body> |
|
160 | 136 | </li> |
161 | 137 | </ul> |
162 | 138 |
|
163 | | -<!-- |
164 | | -<table id="movies" class="ui-widget"> |
165 | | - <thead> |
166 | | - <tr> |
167 | | - <th data-field="Name" class="ui-widget-header">Name</th> |
168 | | - <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th> |
169 | | - <th data-field="AverageRating" class="ui-widget-header">Average Rating</th> |
170 | | - <th class="ui-widget-header"></th> |
171 | | - </tr> |
172 | | - </thead> |
173 | | - <tbody> |
174 | | - <tr> |
175 | | - <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td> |
176 | | - <td class="ui-widget-content">1993</td> |
177 | | - <td class="ui-widget-content">3.6</td> |
178 | | - <td class="ui-widget-content"> |
179 | | - <ul class="menubar"> |
180 | | - <li> |
181 | | - <a href="#Options">Options</a> |
182 | | - <ul> |
183 | | - <li><a href="#Order...">Order...</a></li> |
184 | | - <li class="ui-state-disabled">Write a Review...</li> |
185 | | - <li><a href="#Find Similar Movies...">Find Similar Movies...</a></li> |
186 | | - <li> |
187 | | - <a href="#Rate">Rate</a> |
188 | | - <ul> |
189 | | - <li><a href="#5 stars">5 stars</a></li> |
190 | | - <li><a href="#4 stars">4 stars</a></li> |
191 | | - <li><a href="#3 stars">3 stars</a></li> |
192 | | - <li><a href="#2 stars">2 stars</a></li> |
193 | | - <li><a href="#1 stars">1 stars</a></li> |
194 | | - </ul> |
195 | | - </li> |
196 | | - </ul> |
197 | | - </li> |
198 | | - </ul> |
199 | | - </td> |
200 | | - </tr> |
201 | | - <tr> |
202 | | - <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td> |
203 | | - <td class="ui-widget-content">1991</td> |
204 | | - <td class="ui-widget-content">3.1</td> |
205 | | - </tr> |
206 | | - <tr> |
207 | | - <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td> |
208 | | - <td class="ui-widget-content">1991</td> |
209 | | - <td class="ui-widget-content">3.9</td> |
210 | | - </tr> |
211 | | - <tr> |
212 | | - <td class="ui-widget-content">Spike and Mike's Sick & Twisted Festival of Animation</td> |
213 | | - <td class="ui-widget-content">1997</td> |
214 | | - <td class="ui-widget-content">2.6</td> |
215 | | - </tr> |
216 | | - </tbody> |
217 | | -</table> |
218 | | ---> |
219 | | - |
220 | 139 | <div class="ui-widget" style="margin-top:2em; font-family:Arial"> |
221 | 140 | Log: |
222 | 141 | <div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div> |
|
0 commit comments