library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Menu: Refactored next/previousPage logic and activate-scrolling, improved much!

Browse Source
This commit is contained in:
jzaefferer 2010-10-28 19:15:27 +02:00
parent 184ad699df
commit c55977d2ef
2 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tests/visual/menu/menu.html
View File

@ -8,7 +8,6 @@
<script type="text/javascript" src="../../../ui/jquery.ui.core.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.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$.fn.themeswitcher && $('<div/>').css({ $.fn.themeswitcher && $('<div/>').css({

51
ui/jquery.ui.menu.js vendored
View File

@ -122,13 +122,16 @@ $.widget("ui.menu", {
activate: function( event, item ) { activate: function( event, item ) {
this.deactivate(); this.deactivate();
if ( this._hasScroll() ) { if ( this._hasScroll() ) {
var offset = item.offset().top - this.element.offset().top, var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true) ) || 0,
paddingtop = parseFloat( $.curCSS( this.element[0], "paddingTop", true) ) || 0,
offset = item.offset().top - this.element.offset().top - borderTop - paddingtop,
scroll = this.element.attr( "scrollTop" ), scroll = this.element.attr( "scrollTop" ),
elementHeight = this.element.height(); elementHeight = this.element.height(),
if (offset < 0) { itemHeight = item.height();
if ( offset < 0 ) {
this.element.attr( "scrollTop", scroll + offset ); this.element.attr( "scrollTop", scroll + offset );
} else if (offset > elementHeight) { } else if ( offset + itemHeight > elementHeight ) {
this.element.attr( "scrollTop", scroll + offset - elementHeight + item.height() ); this.element.attr( "scrollTop", scroll + offset - elementHeight + itemHeight );
} }
} }
this.active = item.first() this.active = item.first()
@ -187,19 +190,16 @@ $.widget("ui.menu", {
} }
var base = this.active.offset().top, var base = this.active.offset().top,
height = this.element.height(), height = this.element.height(),
// TODO replace children with nextAll result;
// TODO replace filter with each, break once close > 0 and use that item as the result this.active.nextAll( ".ui-menu-item" ).each( function() {
result = this.element.children( ".ui-menu-item" ).filter( function() { var close = $( this ).offset().top - base - height;
var close = $( this ).offset().top - base - height + $( this ).height(); if (close >= 0) {
// TODO replace with check close > 0 result = $( this );
return close < 10 && close > -10; return false;
}
}); });
// TODO try to catch this earlier when scrollTop indicates the last page anyway this.activate( event, result || this.element.children( ".ui-menu-item" ).last() );
if ( !result.length ) {
result = this.element.children( ".ui-menu-item" ).last();
}
this.activate( event, result );
} else { } else {
this.activate( event, this.element.children( ".ui-menu-item" ) this.activate( event, this.element.children( ".ui-menu-item" )
// TODO use .first()/.last() // TODO use .first()/.last()
@ -216,18 +216,17 @@ $.widget("ui.menu", {
} }
var base = this.active.offset().top, var base = this.active.offset().top,
height = this.element.height(); height = this.element.height(),
result = this.element.children( ".ui-menu-item" ).filter( function() { result;
var close = $(this).offset().top - base + height - $(this).height(); this.active.prevAll( ".ui-menu-item" ).each( function() {
// TODO improve approximation var close = $(this).offset().top - base + height;
return close < 10 && close > -10; if (close <= 0) {
result = $( this );
return false;
}
}); });
// TODO try to catch this earlier when scrollTop indicates the last page anyway this.activate( event, result || this.element.children( ".ui-menu-item" ).first() );
if (!result.length) {
result = this.element.children( ".ui-menu-item" ).first();
}
this.activate( event, result );
} else { } else {
this.activate( event, this.element.children( ".ui-menu-item" ) this.activate( event, this.element.children( ".ui-menu-item" )
// TODO use .first()/.last() // TODO use .first()/.last()