Update menubar to forward menu option to nested menus, update default demo to set...

diff --git a/demos/menubar/default.html b/demos/menubar/default.html
index 79662bd9fd8868b607ca9303d908eae773a6005b..8f15be51689bc2ef83bf94cf6115defaa00188df 100644 (file)
--- 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 &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>

diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html
index ac1009d3ed2c01fcda8df5e0ef71d0b83e33b976..f120a4b4775587dd9f8db4c5520694d8c5d9df5d 100644 (file)
--- 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 a0e9afb3c2b67d2f10efa31b613b5a8022dd0c92..39e75924eaf307e2b0001a142edaf4de6d24e38d 100644 (file)
--- 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() )