Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Vertical orientation support

  • Loading branch information...
commit 95ac701a7123894173bc1283b63017700a32280a 1 parent 2e12073
Steven G. Harms authored
View
56 demos/menubar/default.html
@@ -44,10 +44,18 @@
items: ".menubarItem",
menuElement: ".menuElement"
});
+
+ $("#bar4").menubar({
+ position: {
+ within: $("#demo-frame").add(window).first()
+ },
+ select: select,
+ orientation: "vertical"
+ });
});
</script>
<style>
- #bar1, #bar2 { margin: 0 0 4em; }
+ #bar1, #bar2, #bar3 { margin: 0 0 4em; }
</style>
</head>
<body>
@@ -194,6 +202,52 @@
</div>
</div>
+<ul id="bar4" class="menubar">
+ <li><a href="#About">About</a></li>
+ <li>
+ <a href="#File">File</a>
+ <ul>
+ <li><a href="#Open...">Open...</a></li>
+ <li class="ui-state-disabled"><a href="#">Open recent...</a></li>
+ <li><a href="#Save">Save</a></li>
+ <li><a href="#Save%20as...">Save as...</a></li>
+ <li><a href="#Close">Close</a></li>
+ <li><a href="#Quit">Quit</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Edit">Edit</a>
+ <ul>
+ <li><a href="#Copy">Copy</a></li>
+ <li><a href="#Cut">Cut</a></li>
+ <li class="ui-state-disabled"><a href="#">Paste</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#View">View</a>
+ <ul>
+ <li><a href="#Fullscreen">Fullscreen</a></li>
+ <li><a href="#Fit%20into%20view">Fit into view</a></li>
+ <li>
+ <a href="#Encoding">Encoding</a>
+ <ul>
+ <li><a href="#Auto-detect">Auto-detect</a></li>
+ <li><a href="#UTF-8">UTF-8</a></li>
+ <li>
+ <a href="#UTF-16">UTF-16</a>
+ <ul>
+ <li><a href="#Option%201">Option 1</a></li>
+ <li><a href="#Option%202">Option 2</a></li>
+ <li><a href="#Option%203">Option 3</a></li>
+ <li><a href="#Option%204">Option 4</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#Customize...">Customize...</a></li>
+ </ul>
+ </li>
+</ul>
<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>
View
3  tests/unit/menubar/menubar_common.js
@@ -10,8 +10,9 @@ TestHelpers.commonWidgetTests( "menubar", {
at: "left bottom"
},
disabled: false,
+ orientation: "horizontal",
// callbacks
create: null
}
-});
+});
View
25 tests/unit/menubar/menubar_core.js
@@ -11,6 +11,21 @@ test( "markup structure", function() {
});
});
+test( "Passing a vertical orientation parameter adds vertical classes on ui elements", function() {
+ expect( 4 );
+
+ var element = $( "#bar1" ).menubar({ orientation: "vertical" }),
+ widget = element.data( "ui-menubar" ),
+ options = widget.options,
+ menuItemCount = element.children( ".ui-menubar-item" ).length,
+ defaultOrientation = $( "#bar2" ).menubar().data( "ui-menubar" ).options.orientation;
+
+ equal( "horizontal", defaultOrientation, "menubars shoud have horizontal orientation by default" );
+ equal( "vertical", options.orientation, "options should reflect vertical option being set" );
+ ok( element.hasClass( "vertical" ) , "menubar should have a vertical class applied" );
+ equal( element.children( ".ui-menubar-item.vertical" ).length, menuItemCount, "menuItems should have a vertical class applied" );
+});
+
test( "accessibility", function () {
expect( 2 );
var element = $( "#bar1" ).menubar();
@@ -34,14 +49,14 @@ test( "Cursor keys should move the focus", function() {
});
test ( "_destroy should successfully unwrap 'span.ui-button-text' elements" , function() {
- expect(1);
+ expect(1);
var containedButtonTextSpans,
- element = $( "#bar1" ).menubar();
+ element = $( "#bar1" ).menubar();
- element.menubar( "destroy" );
- containedButtonTextSpans = element.find( "span.ui-button-text" ).length
- equal( containedButtonTextSpans, 0, "All 'span.ui-button-text' should be removed by destroy" );
+ element.menubar( "destroy" );
+ containedButtonTextSpans = element.find( "span.ui-button-text" ).length
+ equal( containedButtonTextSpans, 0, "All 'span.ui-button-text' should be removed by destroy" );
});
View
7 themes/base/jquery.ui.menubar.css
@@ -13,3 +13,10 @@
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; }
+
+/* Vertical orientation support */
+.ui-menubar-item.vertical { float: none; }
+.ui-menubar.vertical .ui-button { float: none; }
+.ui-menubar.vertical .ui-button.ui-state-focus, .ui-menubar.vertical .ui-button:hover {
+ float: none; border: solid 1px transparent;
+}
View
40 ui/jquery.ui.menubar.js
@@ -23,6 +23,7 @@ $.widget( "ui.menubar", {
items: "li",
menuElement: "ul",
menuIcon: false,
+ orientation: "horizontal",
position: {
my: "left top",
at: "left bottom"
@@ -42,12 +43,37 @@ $.widget( "ui.menubar", {
this._initializeWidget();
this._initializeMenuItems();
this._initializeItems();
+
+ if ( this.options.orientation === "vertical" ) {
+ function findLargestWidth( set ) {
+ return set.map(function(){
+ return parseInt($( this ).css( 'width' ))
+ }).sort()[ 0 ];
+ }
+
+ var cssWidth = findLargestWidth( this.items ) + "px";
+
+ this.element.css( "width", cssWidth );
+ this.element.css({
+ border: "1px solid transparent/*{borderColorHeader}*/",
+ color: "#222222/*{fcHeader}*/",
+ "background-position": "0% 0%"
+ });
+
+ this.items.css( "width", cssWidth);
+ }
+
},
_initializeWidget: function() {
this.element
.addClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
.attr( "role", "menubar" );
+
+ if ( this.options.orientation === "vertical" ) {
+ this.element.addClass( "vertical" );
+ }
+
this._on( this.element, {
keydown: function( event ) {
var active;
@@ -99,6 +125,10 @@ $.widget( "ui.menubar", {
"border-style": "hidden"
});
+ if ( this.options.orientation === "vertical" ) {
+ this.menuItems.addClass( "vertical" );
+ }
+
subMenus = this.menuItems.children( menubar.options.menuElement ).menu({
position: {
within: this.options.position.within
@@ -298,7 +328,7 @@ $.widget( "ui.menubar", {
// If we have an open menu and we see a click on the menuItem
// and the menu thereunder is the same as the active menu, close it.
- // Succinctly: toggle menu open / closed on the menuItem
+ // Succinctly: toggle menu open / closed on the menuItem
isClickingToCloseOpenMenu = event.type === "click" &&
menu.is( ":visible" ) &&
this.active &&
@@ -319,11 +349,11 @@ $.widget( "ui.menubar", {
// we clicked on a new menuItem (whether open or not) or if we auto expand (i.e.
// we expand regardless of click if there is a submenu
if ( ( this.open && event.type === "mouseenter" ) || event.type === "click" || this.options.autoExpand ) {
- clearTimeout( this.closeTimer );
+ clearTimeout( this.closeTimer );
this._open( event, menu );
- // Stop propagation so that menuItem mouseenter doesn't fire. If it does it
- // takes the "selected" status off off of the first element of the submenu.
- event.stopPropagation();
+ // Stop propagation so that menuItem mouseenter doesn't fire. If it does it
+ // takes the "selected" status off off of the first element of the submenu.
+ event.stopPropagation();
}
},
Please sign in to comment.
Something went wrong with that request. Please try again.