mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Merge branch 'master' into selectmenu
This commit is contained in:
kborchers
commit
a53916b454
@ -35,6 +35,15 @@
|
||||
},
|
||||
select: select
|
||||
});
|
||||
|
||||
$("#bar3").menubar({
|
||||
position: {
|
||||
within: $("#demo-frame").add(window).first()
|
||||
},
|
||||
select: select,
|
||||
items: ".menubarItem",
|
||||
menuElement: ".menuElement"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
@ -136,6 +145,52 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="bar3" class="menubar">
|
||||
<div class="menubarItem">
|
||||
<a href="#File">File</a>
|
||||
<div class="menuElement">
|
||||
<div><a href="#Open...">Open...</a></div>
|
||||
<div class="ui-state-disabled">Open recent...</div>
|
||||
<div><a href="#Save">Save</a></div>
|
||||
<div><a href="#Save as...">Save as...</a></div>
|
||||
<div><a href="#Close">Close</a></div>
|
||||
<div><a href="#Quit">Quit</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menubarItem">
|
||||
<a href="#Edit">Edit</a>
|
||||
<div class="menuElement">
|
||||
<div><a href="#Copy">Copy</a></div>
|
||||
<div><a href="#Cut">Cut</a></div>
|
||||
<div class="ui-state-disabled">Paste</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menubarItem">
|
||||
<a href="#View">View</a>
|
||||
<div class="menuElement">
|
||||
<div><a href="#Fullscreen">Fullscreen</a></div>
|
||||
<div><a href="#Fit into view">Fit into view</a></div>
|
||||
<div>
|
||||
<a href="#Encoding">Encoding</a>
|
||||
<div class="menuElement">
|
||||
<div class="ui-state-disabled">Auto-detect</div>
|
||||
<div><a href="#UTF-8">UTF-8</a></div>
|
||||
<div>
|
||||
<a href="#UTF-16">UTF-16</a>
|
||||
<div class="menuElement">
|
||||
<div><a href="#Option 1">Option 1</a></div>
|
||||
<div><a href="#Option 2">Option 2</a></div>
|
||||
<div class="ui-state-disabled">Option 3</div>
|
||||
<div><a href="#Option 4">Option 4</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><a href="#Customize...">Customize...</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
@ -5,7 +5,7 @@ commonWidgetTests( "menu", {
|
||||
my: "left top",
|
||||
at: "right top"
|
||||
},
|
||||
items: "ul",
|
||||
menus: "ul",
|
||||
trigger: null,
|
||||
|
||||
// callbacks
|
||||
|
||||
@ -27,7 +27,7 @@ test("handle click on custom item menu", function() {
|
||||
select: function(event, ui) {
|
||||
menu_log();
|
||||
},
|
||||
items: "div"
|
||||
menus: "div"
|
||||
});
|
||||
menu_log("click",true);
|
||||
menu_click($('#menu5'),"1");
|
||||
@ -38,6 +38,8 @@ test("handle click on custom item menu", function() {
|
||||
equals( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid.");
|
||||
});
|
||||
|
||||
/* Commenting out these tests until a way to handle the extra focus and blur events
|
||||
fired by IE is found
|
||||
test( "handle blur: click", function() {
|
||||
expect( 4 );
|
||||
var $menu = $( "#menu1" ).menu({
|
||||
@ -78,6 +80,7 @@ test( "handle blur on custom item menu: click", function() {
|
||||
|
||||
$("#remove").remove();
|
||||
});
|
||||
*/
|
||||
|
||||
asyncTest( "handle submenu auto collapse: mouseleave", function() {
|
||||
expect( 4 );
|
||||
@ -100,7 +103,7 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() {
|
||||
|
||||
asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function() {
|
||||
expect( 5 );
|
||||
var $menu = $( "#menu5" ).menu( { items: "div" } );
|
||||
var $menu = $( "#menu5" ).menu( { menus: "div" } );
|
||||
|
||||
$menu.children( ":nth-child(7)" ).trigger( "mouseover" );
|
||||
setTimeout(function() {
|
||||
|
||||
@ -28,14 +28,14 @@
|
||||
select: function(event, ui) {
|
||||
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
|
||||
},
|
||||
items: "div"
|
||||
menus: "div"
|
||||
});
|
||||
|
||||
$("#menu6").menu({
|
||||
select: function(event, ui) {
|
||||
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
|
||||
},
|
||||
items: ".menuElement"
|
||||
menus: ".menuElement"
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
2
themes/base/jquery.ui.menu.css
vendored
2
themes/base/jquery.ui.menu.css
vendored
@ -14,7 +14,7 @@
|
||||
.ui-menu .ui-menu-item a.ui-state-focus,
|
||||
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }
|
||||
|
||||
.ui-menu li.ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; }
|
||||
.ui-menu .ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; }
|
||||
|
||||
/* icon support */
|
||||
.ui-menu-icons { position: relative; }
|
||||
|
||||
2
themes/base/jquery.ui.menubar.css
vendored
2
themes/base/jquery.ui.menubar.css
vendored
@ -12,4 +12,4 @@
|
||||
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
|
||||
.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; }
|
||||
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; }
|
||||
|
||||
50
ui/jquery.ui.menu.js
vendored
50
ui/jquery.ui.menu.js
vendored
@ -54,14 +54,13 @@ $.widget( "ui.menu", {
|
||||
},
|
||||
"click .ui-menu-item:has(a)": function( event ) {
|
||||
event.stopImmediatePropagation();
|
||||
var target = $( event.currentTarget );
|
||||
// it's possible to click an item without hovering it (#7085)
|
||||
if ( !this.active || ( this.active[ 0 ] !== target[ 0 ] ) ) {
|
||||
this.focus( event, target );
|
||||
}
|
||||
this.select( event );
|
||||
// Redirect focus to the menu.
|
||||
// Redirect focus to the menu with a delay for firefox
|
||||
this._delay( function() {
|
||||
if ( !this.element.is(":focus") ) {
|
||||
this.element.focus();
|
||||
}
|
||||
}, 20);
|
||||
},
|
||||
"mouseover .ui-menu-item": function( event ) {
|
||||
event.stopImmediatePropagation();
|
||||
@ -72,9 +71,21 @@ $.widget( "ui.menu", {
|
||||
},
|
||||
"mouseleave": "collapseAll",
|
||||
"mouseleave .ui-menu": "collapseAll",
|
||||
"mouseout .ui-menu-item": "blur",
|
||||
"focus": function( event ) {
|
||||
this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) );
|
||||
var firstItem = this.element.children( ".ui-menu-item" ).eq( 0 );
|
||||
if ( this._hasScroll() && !this.active ) {
|
||||
var menu = this.element;
|
||||
menu.children().each( function() {
|
||||
var currentItem = $( this );
|
||||
if ( currentItem.offset().top - menu.offset().top >= 0 ) {
|
||||
firstItem = currentItem;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} else if ( this.active ) {
|
||||
firstItem = this.active;
|
||||
}
|
||||
this.focus( event, firstItem );
|
||||
},
|
||||
blur: function( event ) {
|
||||
this._delay( function() {
|
||||
@ -283,21 +294,6 @@ $.widget( "ui.menu", {
|
||||
focus: function( event, item ) {
|
||||
this.blur( event );
|
||||
|
||||
if ( this._hasScroll() ) {
|
||||
var borderTop = parseFloat( $.curCSS( this.activeMenu[0], "borderTopWidth", true ) ) || 0,
|
||||
paddingTop = parseFloat( $.curCSS( this.activeMenu[0], "paddingTop", true ) ) || 0,
|
||||
offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop,
|
||||
scroll = this.activeMenu.scrollTop(),
|
||||
elementHeight = this.activeMenu.height(),
|
||||
itemHeight = item.height();
|
||||
|
||||
if ( offset < 0 ) {
|
||||
this.activeMenu.scrollTop( scroll + offset );
|
||||
} else if ( offset + itemHeight > elementHeight ) {
|
||||
this.activeMenu.scrollTop( scroll + offset - elementHeight + itemHeight );
|
||||
}
|
||||
}
|
||||
|
||||
this.active = item.first()
|
||||
.children( "a" )
|
||||
.addClass( "ui-state-focus" )
|
||||
@ -463,7 +459,6 @@ $.widget( "ui.menu", {
|
||||
},
|
||||
|
||||
nextPage: function( event ) {
|
||||
if ( this._hasScroll() ) {
|
||||
if ( !this.active ) {
|
||||
this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
|
||||
return;
|
||||
@ -471,7 +466,7 @@ $.widget( "ui.menu", {
|
||||
if ( this.last() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( this._hasScroll() ) {
|
||||
var base = this.active.offset().top,
|
||||
height = this.element.height(),
|
||||
result;
|
||||
@ -488,7 +483,6 @@ $.widget( "ui.menu", {
|
||||
},
|
||||
|
||||
previousPage: function( event ) {
|
||||
if ( this._hasScroll() ) {
|
||||
if ( !this.active ) {
|
||||
this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
|
||||
return;
|
||||
@ -496,7 +490,7 @@ $.widget( "ui.menu", {
|
||||
if ( this.first() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( this._hasScroll() ) {
|
||||
var base = this.active.offset().top,
|
||||
height = this.element.height(),
|
||||
result;
|
||||
@ -512,7 +506,7 @@ $.widget( "ui.menu", {
|
||||
},
|
||||
|
||||
_hasScroll: function() {
|
||||
return this.element.height() < this.element.prop( "scrollHeight" );
|
||||
return this.element.outerHeight() < this.element.prop( "scrollHeight" );
|
||||
},
|
||||
|
||||
select: function( event ) {
|
||||
|
||||
109
ui/jquery.ui.menubar.js
vendored
109
ui/jquery.ui.menubar.js
vendored
@ -22,6 +22,8 @@ $.widget( "ui.menubar", {
|
||||
options: {
|
||||
autoExpand: false,
|
||||
buttons: false,
|
||||
items: "li",
|
||||
menuElement: "ul",
|
||||
menuIcon: false,
|
||||
position: {
|
||||
my: "left top",
|
||||
@ -30,19 +32,21 @@ $.widget( "ui.menubar", {
|
||||
},
|
||||
_create: function() {
|
||||
var that = this;
|
||||
var items = this.items = this.element.children( "li" )
|
||||
this.menuItems = this.element.children( this.options.items );
|
||||
this.items = this.menuItems.children( "button, a" );
|
||||
|
||||
this.menuItems
|
||||
.addClass( "ui-menubar-item" )
|
||||
.attr( "role", "presentation" )
|
||||
.children( "button, a" );
|
||||
.attr( "role", "presentation" );
|
||||
// let only the first item receive focus
|
||||
items.slice(1).attr( "tabIndex", -1 );
|
||||
this.items.slice(1).attr( "tabIndex", -1 );
|
||||
|
||||
this.element
|
||||
.addClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
|
||||
.attr( "role", "menubar" );
|
||||
this._focusable( items );
|
||||
this._hoverable( items );
|
||||
items.next( "ul" )
|
||||
this._focusable( this.items );
|
||||
this._hoverable( this.items );
|
||||
this.items.siblings( this.options.menuElement )
|
||||
.menu({
|
||||
position: {
|
||||
within: this.options.position.within
|
||||
@ -53,7 +57,8 @@ $.widget( "ui.menubar", {
|
||||
// TODO what is this targetting? there's probably a better way to access it
|
||||
$(event.target).prev().focus();
|
||||
that._trigger( "select", event, ui );
|
||||
}
|
||||
},
|
||||
menus: that.options.menuElement
|
||||
})
|
||||
.hide()
|
||||
.attr({
|
||||
@ -66,19 +71,19 @@ $.widget( "ui.menubar", {
|
||||
return;
|
||||
switch ( event.keyCode ) {
|
||||
case $.ui.keyCode.LEFT:
|
||||
that._left( event );
|
||||
that.previous( event );
|
||||
event.preventDefault();
|
||||
break;
|
||||
case $.ui.keyCode.RIGHT:
|
||||
that._right( event );
|
||||
that.next( event );
|
||||
event.preventDefault();
|
||||
break;
|
||||
};
|
||||
});
|
||||
items.each(function() {
|
||||
this.items.each(function() {
|
||||
var input = $(this),
|
||||
// TODO menu var is only used on two places, doesn't quite justify the .each
|
||||
menu = input.next( "ul" );
|
||||
menu = input.next( that.options.menuElement );
|
||||
|
||||
input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) {
|
||||
// ignore triggered focus event
|
||||
@ -109,11 +114,11 @@ $.widget( "ui.menubar", {
|
||||
event.preventDefault();
|
||||
break;
|
||||
case $.ui.keyCode.LEFT:
|
||||
that._prev( event, $( this ) );
|
||||
that.previous( event );
|
||||
event.preventDefault();
|
||||
break;
|
||||
case $.ui.keyCode.RIGHT:
|
||||
that._next( event, $( this ) );
|
||||
that.next( event );
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
@ -166,17 +171,16 @@ $.widget( "ui.menubar", {
|
||||
},
|
||||
|
||||
_destroy : function() {
|
||||
var items = this.element.children( "li" )
|
||||
this.menuItems
|
||||
.removeClass( "ui-menubar-item" )
|
||||
.removeAttr( "role" )
|
||||
.children( "button, a" );
|
||||
.removeAttr( "role" );
|
||||
|
||||
this.element
|
||||
.removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
|
||||
.removeAttr( "role" )
|
||||
.unbind( ".menubar" );
|
||||
|
||||
items
|
||||
this.items
|
||||
.unbind( ".menubar" )
|
||||
.removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" )
|
||||
.removeAttr( "role" )
|
||||
@ -243,55 +247,48 @@ $.widget( "ui.menubar", {
|
||||
}, this.options.position ) )
|
||||
.removeAttr( "aria-hidden" )
|
||||
.attr( "aria-expanded", "true" )
|
||||
.menu("focus", event, menu.children( "li" ).first() )
|
||||
.menu("focus", event, menu.children( ".ui-menu-item" ).first() )
|
||||
// TODO need a comment here why both events are triggered
|
||||
.focus()
|
||||
.focusin();
|
||||
this.open = true;
|
||||
},
|
||||
|
||||
// TODO refactor this and the next three methods
|
||||
_prev: function( event, button ) {
|
||||
button.attr( "tabIndex", -1 );
|
||||
var prev = button.parent().prevAll( "li" ).children( ".ui-button" ).eq( 0 );
|
||||
if ( prev.length ) {
|
||||
prev.removeAttr( "tabIndex" )[0].focus();
|
||||
} else {
|
||||
var lastItem = this.element.children( "li:last" ).children( ".ui-button:last" );
|
||||
lastItem.removeAttr( "tabIndex" )[0].focus();
|
||||
}
|
||||
next: function( event ) {
|
||||
this._move( "next", "first", event );
|
||||
},
|
||||
|
||||
_next: function( event, button ) {
|
||||
button.attr( "tabIndex", -1 );
|
||||
var next = button.parent().nextAll( "li" ).children( ".ui-button" ).eq( 0 );
|
||||
if ( next.length ) {
|
||||
next.removeAttr( "tabIndex")[0].focus();
|
||||
} else {
|
||||
var firstItem = this.element.children( "li:first" ).children( ".ui-button:first" );
|
||||
firstItem.removeAttr( "tabIndex" )[0].focus();
|
||||
}
|
||||
},
|
||||
|
||||
// TODO rename to parent
|
||||
_left: function( event ) {
|
||||
var prev = this.active.parent().prevAll( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 );
|
||||
if ( prev.length ) {
|
||||
this._open( event, prev );
|
||||
} else {
|
||||
var lastItem = this.element.children( "li:last" ).children( ".ui-menu:first" );
|
||||
this._open( event, lastItem );
|
||||
}
|
||||
},
|
||||
|
||||
// TODO rename to child (or something like that)
|
||||
_right: function( event ) {
|
||||
var next = this.active.parent().nextAll( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 );
|
||||
previous: function( event ) {
|
||||
this._move( "prev", "last", event );
|
||||
},
|
||||
|
||||
_move: function( direction, filter, event ) {
|
||||
var next,
|
||||
wrapItem;
|
||||
if ( this.open ) {
|
||||
next = this.active.closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
|
||||
wrapItem = this.menuItems[ filter ]().children( ".ui-menu" ).eq( 0 );
|
||||
} else {
|
||||
if ( event ) {
|
||||
next = $( event.target ).closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).children( ".ui-menubar-link" ).eq( 0 );
|
||||
wrapItem = this.menuItems[ filter ]().children( ".ui-menubar-link" ).eq( 0 );
|
||||
} else {
|
||||
next = wrapItem = this.menuItems.children( "a" ).eq( 0 );
|
||||
}
|
||||
}
|
||||
|
||||
if ( next.length ) {
|
||||
if ( this.open ) {
|
||||
this._open( event, next );
|
||||
} else {
|
||||
var firstItem = this.element.children( "li:first" ).children( ".ui-menu:first" );
|
||||
this._open( event, firstItem );
|
||||
next.removeAttr( "tabIndex")[0].focus();
|
||||
}
|
||||
} else {
|
||||
if ( this.open ) {
|
||||
this._open( event, wrapItem );
|
||||
} else {
|
||||
wrapItem.removeAttr( "tabIndex")[0].focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user