虽然我一直在试图弄清楚如何巧妙地显示很长的导航链接，但我遇到了这个jQuery IOS Drill Down Menu插件（来源文章：jQuery Wiki Menu）。我已经尝试将它作为一个小部件实现到我的解决方案中，但我认为问题在于它的一些已弃用的方法，例如 .left 和 .right。
我目前正在使用 jquery 1.9.0 和 jQuery UI 1.10.0。
我在编写小部件/升级它们方面并没有真正的经验，因此我们将不胜感激任何帮助，因为它似乎是一个用于显示复杂菜单的非常有用的小部件。
CSS 片段：
.ios-style, .ios-style ul, .ios-style ol { background: #fff; height: 200px; padding: 2px; width: 260px; }
.ios-style { overflow-x: hidden; overflow-y: auto; }
.ios-style::-webkit-scrollbar { width: 5px; height: 5px; }
.ios-style::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.6); border-radius: 4px; }
.ios-style ul, .ios-style ol { overflow-y: visible; border: none; }
.ios-style.ui-menu-icons .ui-menu-item a { position: inherit; }
.ios-style .ui-menu-item a { cursor: pointer; outline: none; }
jQuery 小部件代码：
<script type="text/javascript">
$.widget( "ui.iosMenu", {
options: {
backText: 'Back',
slideDuration: 400,
slideEasing: 'linear'
},
_insertBackButtons: function() {
this.element.find( 'li ul, li ol' ).prepend(
$( '<li>' +
' <span class="ui-icon ui-icon-carat-1-w"></span>' +
' <a href="#menu-back" class="ios-menu-back-link">' +
this.options.backText +
' </a>' +
'</li>'
) );
return this;
},
_create: function( options ) {
var iosMenu = this;
iosMenu
._insertBackButtons()
.element
.addClass( 'ios-style' )
.menu({
// When a submenu shows up, place it just to the right
// of the current menu. Later, we'll slide it into view.
position: {
my: 'left top',
at: 'right top',
of: iosMenu.element
}
});
var menu = iosMenu.element.data( 'menu' );
// Override menu#select to account for nesting and back buttons:
menu.select = function( event ) {
if ( menu.active && menu.active.find( '> .ios-menu-back-link' ).length ) {
// if you selected "back", go back:
menu.focus( event, menu.active );
if ( menu.left( event ) ) {
event.stopImmediatePropagation();
}
event.preventDefault();
} else if ( menu.active && menu.active.find( '> ul' ).length ) {
// if you selected something with children, show the children:
menu.focus( event, menu.active );
if ( menu.right( event ) ) {
event.stopImmediatePropagation();
}
event.preventDefault();
} else {
menu._trigger( 'select', event, { item: menu.active } );
}
};
// Override menu#left to enable sliding behavior:
menu.left = function( event ) {
var newItem = this.active && this.active.parents( 'li:not(.ui-menubar-item) ').first(),
self = this,
parent;
if ( newItem && newItem.length ) {
newItem.find( '> a' ).addClass( 'ui-state-focus' ).removeClass( 'ui-state-active' );
parent = this.active.parent();
parent
.attr( 'aria-hidden', 'true' )
.attr( 'aria-expanded', 'false' )
.animate({
left: self.element.css( 'width' )
}, iosMenu.options.slideDuration, iosMenu.options.slideEasing, function() {
parent.hide();
self.focus( event, newItem );
})
return true;
} else if ( event && event.which === $.ui.keyCode.ESCAPE ) {
// #left gets called both for left-arrow and escape. If it's the
// latter and we're at the top, fire a "close" event:
self._trigger( 'close', event );
}
};
// Override menu#_open to enable sliding behavior:
var menuOpenWithoutSliding = menu._open;
menu._open = function ( submenu ) {
menuOpenWithoutSliding.call( this, submenu );
submenu.animate({
left: 0
}, iosMenu.options.slideDuration, iosMenu.options.slideEasing);
};
// Override menu#_startOpening so that hovering doesn't
// initiate the sliding:
menu._startOpening = function() {
clearTimeout( this.timer );
}
},
destroy: function() {
var menu = this.element && this.element.data( 'menu' );
menu && menu.destroy();
}
});
$(function() {
var list = $( '#breakfast-menu' );
var firstLI = list.find( 'li' ).first();
list
.iosMenu()
.focus()
.menu( 'focus', {}, firstLI )
.bind( 'menuselect', function( event, ui ) {
$('#log').append( '<li>' + $(ui.item).text() + '</li>' );
});
});
</script>
运行时错误
var menu = iosMenu.element.data( 'menu' );
在萤火虫中引发“菜单”未定义错误。