Skip to content
Permalink
Browse files

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
  • Loading branch information
jzaefferer committed Jun 9, 2011
1 parent 433ed6e commit 7281f9f22904d97b3d244a1c8ed2450e6506d538
Showing with 43 additions and 91 deletions.
  1. +7 −60 demos/menubar/default.html
  2. +25 −25 tests/visual/position/position_within.html
  3. +11 −6 ui/jquery.ui.menubar.js
@@ -13,9 +13,10 @@
<script src="../../ui/jquery.ui.menubar.js"></script>
<script>
$(function() {
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");

$("#bar1, .menubar").menubar({
$("#bar1").menubar({
position: {
within: $("#demo-frame").add(window).first()
},
select: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
}
@@ -24,6 +25,9 @@
$(".menubar-icons").menubar({
menuIcon: true,
buttons: true,
position: {
within: $("#demo-frame").add(window).first()
},
select: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
}
@@ -160,63 +164,6 @@
</li>
</ul>

<!--
<table id="movies" class="ui-widget">
<thead>
<tr>
<th data-field="Name" class="ui-widget-header">Name</th>
<th data-field="ReleaseYear" class="ui-widget-header">Release Year</th>
<th data-field="AverageRating" class="ui-widget-header">Average Rating</th>
<th class="ui-widget-header"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td>
<td class="ui-widget-content">1993</td>
<td class="ui-widget-content">3.6</td>
<td class="ui-widget-content">
<ul class="menubar">
<li>
<a href="#Options">Options</a>
<ul>
<li><a href="#Order...">Order...</a></li>
<li class="ui-state-disabled">Write a Review...</li>
<li><a href="#Find Similar Movies...">Find Similar Movies...</a></li>
<li>
<a href="#Rate">Rate</a>
<ul>
<li><a href="#5 stars">5 stars</a></li>
<li><a href="#4 stars">4 stars</a></li>
<li><a href="#3 stars">3 stars</a></li>
<li><a href="#2 stars">2 stars</a></li>
<li><a href="#1 stars">1 stars</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
<td class="ui-widget-content">1991</td>
<td class="ui-widget-content">3.1</td>
</tr>
<tr>
<td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
<td class="ui-widget-content">1991</td>
<td class="ui-widget-content">3.9</td>
</tr>
<tr>
<td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
<td class="ui-widget-content">1997</td>
<td class="ui-widget-content">2.6</td>
</tr>
</tbody>
</table>
-->

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
@@ -1,28 +1,28 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Position Visual Test: Containing Element</title>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Position Visual Test: Containing Element</title>

<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />

<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<style>

<style>
html, body {
height:100%;
width:100%;
margin:0;
/* force scroll bar*/
min-height:800px;
min-width:800px;

/* IE6 needs this */
text-align:center;
}
@@ -32,9 +32,9 @@
}
.demo-container {
background:#aaa;
width:80%;
width:80%;
height:80%;

text-align:left;
margin:0 auto;
position:relative;
@@ -72,8 +72,8 @@
select, input {
margin-left: 15px;
}
</style>
<script>
</style>
<script>
$(function() {
function position( using ) {
$( ".positionable" ).position({
@@ -114,7 +114,7 @@
</script>
</head>
<body>

<div class="demo-description">
Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
<br/>Drag around the parent element to see collision detection in action.
@@ -126,23 +126,23 @@
<div id="parent">
<p>This is the position parent element.</p>
</div>

<div class="positionable">
<p>to position</p>
</div>

<div class="positionable" style="width:120px; height: 40px;">
<p>to position 2</p>
</div>

<div style="padding: 20px; margin-top: 75px;">
position...
<div style="padding-bottom: 20px;">
<b>my:</b>
<select id="my_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
<option value="right" selected="selected">right</option>
</select>
<select id="my_vertical">
<option value="top">top</option>
@@ -155,7 +155,7 @@
<select id="at_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
<option value="right" selected="selected">right</option>
</select>
<select id="at_vertical">
<option value="top">top</option>
@@ -181,9 +181,9 @@
</select>
</div>
</div>
</div><!-- End demo -->

</div><!-- End demo -->
</div>

</body>
</html>
</html>
@@ -21,7 +21,11 @@ $.widget( "ui.menubar", {
version: "@VERSION",
options: {
buttons: false,
menuIcon: false
menuIcon: false,
position: {
my: "left top",
at: "left bottom"
}
},
_create: function() {
var that = this;
@@ -39,6 +43,9 @@ $.widget( "ui.menubar", {
this._hoverable( items );
items.next( "ul" )
.menu({
position: {
within: this.options.position.within
},
select: function( event, ui ) {
ui.item.parents( "ul.ui-menu:last" ).hide();
that._trigger( "select", event, ui );
@@ -119,7 +126,7 @@ $.widget( "ui.menubar", {
// TODO ui-menubar-link is added above, not needed here?
input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" );
};

});
that._bind( {
keydown: function( event ) {
@@ -210,11 +217,9 @@ $.widget( "ui.menubar", {
var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 );
this.active = menu
.show()
.position( {
my: "left top",
at: "left bottom",
.position( $.extend({
of: button
})
}, this.options.position ) )
.removeAttr( "aria-hidden" )
.attr( "aria-expanded", "true" )
.menu("focus", event, menu.children( "li" ).first() )

0 comments on commit 7281f9f

Please sign in to comment.
You can’t perform that action at this time.