Skip to content

Commit 7281f9f

Browse files
jzaeffererjzaefferer
committed
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
1 parent 433ed6e commit 7281f9f

File tree

3 files changed

+43
-91
lines changed

3 files changed

+43
-91
lines changed

‎demos/menubar/default.html‎

Lines changed: 7 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@
1313
<script src="../../ui/jquery.ui.menubar.js"></script>
1414
<script>
1515
$(function() {
16-
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
17-
18-
$("#bar1, .menubar").menubar({
16+
$("#bar1").menubar({
17+
position: {
18+
within: $("#demo-frame").add(window).first()
19+
},
1920
select: function(event, ui) {
2021
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
2122
}
@@ -24,6 +25,9 @@
2425
$(".menubar-icons").menubar({
2526
menuIcon: true,
2627
buttons: true,
28+
position: {
29+
within: $("#demo-frame").add(window).first()
30+
},
2731
select: function(event, ui) {
2832
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
2933
}
@@ -160,63 +164,6 @@
160164
</li>
161165
</ul>
162166

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 &amp; 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-
220167
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
221168
Log:
222169
<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>

‎tests/visual/position/position_within.html‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
<!doctype html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Position Visual Test: Containing Element</title>
6-
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Position Visual Test: Containing Element</title>
6+
77
<link rel="stylesheet" href="../visual.css" type="text/css" />
88
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
9-
9+
1010
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
1111
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
1212
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
13-
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
14-
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
13+
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
14+
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
1515
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
16-
17-
<style>
16+
17+
<style>
1818
html, body {
1919
height:100%;
2020
width:100%;
2121
margin:0;
2222
/* force scroll bar*/
2323
min-height:800px;
2424
min-width:800px;
25-
25+
2626
/* IE6 needs this */
2727
text-align:center;
2828
}
@@ -32,9 +32,9 @@
3232
}
3333
.demo-container {
3434
background:#aaa;
35-
width:80%;
35+
width:80%;
3636
height:80%;
37-
37+
3838
text-align:left;
3939
margin:0 auto;
4040
position:relative;
@@ -72,8 +72,8 @@
7272
select, input {
7373
margin-left: 15px;
7474
}
75-
</style>
76-
<script>
75+
</style>
76+
<script>
7777
$(function() {
7878
function position( using ) {
7979
$( ".positionable" ).position({
@@ -114,7 +114,7 @@
114114
</script>
115115
</head>
116116
<body>
117-
117+
118118
<div class="demo-description">
119119
Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
120120
<br/>Drag around the parent element to see collision detection in action.
@@ -126,23 +126,23 @@
126126
<div id="parent">
127127
<p>This is the position parent element.</p>
128128
</div>
129-
129+
130130
<div class="positionable">
131131
<p>to position</p>
132132
</div>
133-
133+
134134
<div class="positionable" style="width:120px; height: 40px;">
135135
<p>to position 2</p>
136136
</div>
137-
137+
138138
<div style="padding: 20px; margin-top: 75px;">
139139
position...
140140
<div style="padding-bottom: 20px;">
141141
<b>my:</b>
142142
<select id="my_horizontal">
143143
<option value="left">left</option>
144144
<option value="center">center</option>
145-
<option value="right">right</option>
145+
<option value="right" selected="selected">right</option>
146146
</select>
147147
<select id="my_vertical">
148148
<option value="top">top</option>
@@ -155,7 +155,7 @@
155155
<select id="at_horizontal">
156156
<option value="left">left</option>
157157
<option value="center">center</option>
158-
<option value="right">right</option>
158+
<option value="right" selected="selected">right</option>
159159
</select>
160160
<select id="at_vertical">
161161
<option value="top">top</option>
@@ -181,9 +181,9 @@
181181
</select>
182182
</div>
183183
</div>
184-
185-
</div><!-- End demo -->
184+
185+
</div><!-- End demo -->
186186
</div>
187187

188188
</body>
189-
</html>
189+
</html>

‎ui/jquery.ui.menubar.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ $.widget( "ui.menubar", {
2121
version: "@VERSION",
2222
options: {
2323
buttons: false,
24-
menuIcon: false
24+
menuIcon: false,
25+
position: {
26+
my: "left top",
27+
at: "left bottom"
28+
}
2529
},
2630
_create: function() {
2731
var that = this;
@@ -39,6 +43,9 @@ $.widget( "ui.menubar", {
3943
this._hoverable( items );
4044
items.next( "ul" )
4145
.menu({
46+
position: {
47+
within: this.options.position.within
48+
},
4249
select: function( event, ui ) {
4350
ui.item.parents( "ul.ui-menu:last" ).hide();
4451
that._trigger( "select", event, ui );
@@ -119,7 +126,7 @@ $.widget( "ui.menubar", {
119126
// TODO ui-menubar-link is added above, not needed here?
120127
input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" );
121128
};
122-
129+
123130
});
124131
that._bind( {
125132
keydown: function( event ) {
@@ -210,11 +217,9 @@ $.widget( "ui.menubar", {
210217
var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 );
211218
this.active = menu
212219
.show()
213-
.position( {
214-
my: "left top",
215-
at: "left bottom",
220+
.position( $.extend({
216221
of: button
217-
})
222+
}, this.options.position ) )
218223
.removeAttr( "aria-hidden" )
219224
.attr( "aria-expanded", "true" )
220225
.menu("focus", event, menu.children( "li" ).first() )

0 commit comments

Comments
 (0)