diff options
| -rw-r--r-- | demos/menubar/default.html | 67 | ||||
| -rw-r--r-- | tests/visual/position/position_within.html | 50 | ||||
| -rw-r--r-- | ui/jquery.ui.menubar.js | 17 |
3 files changed, 43 insertions, 91 deletions
diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 79662bd9f..8f15be516 100644 --- a/demos/menubar/default.html +++ b/demos/menubar/default.html @@ -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 & 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> diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index ac1009d3e..f120a4b47 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -1,20 +1,20 @@ -<!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%; @@ -22,7 +22,7 @@ /* 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,15 +126,15 @@ <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;"> @@ -142,7 +142,7 @@ <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>
\ No newline at end of file +</html> diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index a0e9afb3c..39e75924e 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -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() ) |