Skip to content

Commit 5bc57a8

Browse files
jzaeffererjzaefferer
committed
Menu: Add menubar-with-one-button-in-table example.
1 parent 5a5a809 commit 5bc57a8

File tree

1 file changed

+67
-8
lines changed

1 file changed

+67
-8
lines changed

‎tests/visual/menu/menubar.html

Lines changed: 67 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
top: 10
2323
}).appendTo(document.body).themeswitcher();
2424

25-
$(".menubar").menubar({
25+
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
26+
27+
$("#bar1, .menubar").menubar({
2628
select: function(event, ui) {
2729
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
2830
}
@@ -35,13 +37,11 @@
3537
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
3638
}
3739
});
38-
39-
4040
});
4141
</script>
4242
<style type="text/css">
4343
body { font-size:62.5%; }
44-
.menubar { margin: 0 0 4em; } /* style for this page only */
44+
#bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */
4545
.ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; }
4646
.ui-menu .ui-icon { float: right; }
4747
.ui-menu li.ui-state-disabled {
@@ -55,12 +55,18 @@
5555
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; }
5656
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
5757

58-
59-
</style>
58+
table {
59+
border-collapse: collapse;
60+
}
61+
th, td {
62+
padding: 0.5em;
63+
border: 1px solid black;
64+
}
65+
</style>
6066
</head>
6167
<body>
6268

63-
<div class="menubar">
69+
<div id="bar1" class="menubar">
6470
<a href="#">File</a>
6571
<ul>
6672
<li><a href="#">Open...</a></li>
@@ -100,7 +106,7 @@
100106
</ul>
101107
</div>
102108

103-
<div class="menubar-icons">
109+
<div id="bar2" class="menubar-icons">
104110
<a href="#">File</a>
105111
<ul>
106112
<li><a href="#">Open...</a></li>
@@ -140,6 +146,59 @@
140146
</ul>
141147
</div>
142148

149+
<table id="movies" class="ui-widget">
150+
<thead>
151+
<tr>
152+
<th data-field="Name" class="ui-widget-header">Name</th>
153+
<th data-field="ReleaseYear" class="ui-widget-header">Release Year</th>
154+
<th data-field="AverageRating" class="ui-widget-header">Average Rating</th>
155+
<th class="ui-widget-header"></th>
156+
</tr>
157+
</thead>
158+
<tbody>
159+
<tr>
160+
<td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td>
161+
<td class="ui-widget-content">1993</td>
162+
<td class="ui-widget-content">3.6</td>
163+
<td class="ui-widget-content">
164+
<div class="menubar">
165+
<a href="#">Options</a>
166+
<ul>
167+
<li><a href="#">Order...</a></li>
168+
<li class="ui-state-disabled">Write a Review...</li>
169+
<li><a href="#">Find Similar Movies...</a></li>
170+
<li>
171+
<a href="#">Rate</a>
172+
<ul>
173+
<li><a href="#">5 stars</a></li>
174+
<li><a href="#">4 stars</a></li>
175+
<li><a href="#">3 stars</a></li>
176+
<li><a href="#">2 stars</a></li>
177+
<li><a href="#">1 stars</a></li>
178+
</ul>
179+
</li>
180+
</ul>
181+
</div>
182+
</td>
183+
</tr>
184+
<tr>
185+
<td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
186+
<td class="ui-widget-content">1991</td>
187+
<td class="ui-widget-content">3.1</td>
188+
</tr>
189+
<tr>
190+
<td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
191+
<td class="ui-widget-content">1991</td>
192+
<td class="ui-widget-content">3.9</td>
193+
</tr>
194+
<tr>
195+
<td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
196+
<td class="ui-widget-content">1997</td>
197+
<td class="ui-widget-content">2.6</td>
198+
</tr>
199+
</tbody>
200+
</table>
201+
143202
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
144203
Log:
145204
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>

0 commit comments

Comments
 (0)