jQuery UI ipod向下钻取菜单
当我试图弄清楚如何整齐地显示很长的导航链接时，我遇到了这个插件（源文章：）。我尝试将它作为一个小部件实现到我的解决方案中，但我认为问题在于它的一些不推荐的方法，例如.left和.right 我目前正在使用jQuery1.9.0和jQueryUI1.10.0 我在编写小部件/升级小部件方面没有太多经验，因此非常感谢您提供的任何帮助，因为它似乎是显示复杂菜单的非常有用的小部件 CSS Snipet:jQuery UI ipod向下钻取菜单,jquery,css,jquery-ui,Jquery,Css,Jquery Ui,当我试图弄清楚如何整齐地显示很长的导航链接时，我遇到了这个插件（源文章：）。我尝试将它作为一个小部件实现到我的解决方案中，但我认为问题在于它的一些不推荐的方法，例如.left和.right 我目前正在使用jQuery1.9.0和jQueryUI1.10.0 我在编写小部件/升级小部件方面没有太多经验，因此非常感谢您提供的任何帮助，因为它似乎是显示复杂菜单的非常有用的小部件 CSS Snipet: .ios-style, .ios-style ul, .ios-style ol { bac
.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; }
<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>
.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; }
<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>
在firebug中引发“菜单”未定义错误。也遇到了相同的错误。我花了很长时间才找到罪犯，但事情是这样的： jquery.ui.menu.js 增加
this.mouseHandled = false;
$.data( element, this.widgetName, this );
menu.active = menu.active || $( event.target ).closest( ".ui-menu-item" );
（在_create中）this.mouseHandled = false;
$.data( element, this.widgetName, this );
menu.active = menu.active || $( event.target ).closest( ".ui-menu-item" );
\u createWidgetthis.mouseHandled = false;
$.data( element, this.widgetName, this );
menu.active = menu.active || $( event.target ).closest( ".ui-menu-item" );
菜单。选择
希望这有帮助我不使用其他更改。我想使用jQueryUI的CDN版本，所以我没有弄乱它们。这是我的兼容版本
$.widget( "ui.iosMenu", {
options: {
backText: 'Back',
slideDuration: 200,
slideEasing: 'linear'
},
_insertBackButtons: function() {
this.element.find( 'li ul, li ol' ).prepend(
$( '<li class="ui-menu-item ios-menu-back-link" role="presentation">' +
' <a href="#menu-back" class="ui-corner-role" tabindex="-1" role="menuitem" aria-haspopup="true" >' +
' <span class="ui-menu-icon ui-icon ui-icon-carat-1-w"></span>' +
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( 'uiMenu' );
// Override menu#select to account for nesting and back buttons:
menu.select = function( event ) {
//menu.active = menu.active || $( event.target ).closest( ".ui-menu-item" ); //new random line
if ( menu.active && menu.active.find('a').attr("href") == "#menu-back" ) {
// if you selected "back", go back:
menu.focus( event, menu.active );
menu.collapse( event );
/*
if ( menu.collapse( 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 );
menu.expand( event );
/*
if ( menu.expand( event ) ) {
event.stopImmediatePropagation();
}
event.preventDefault();*/
} else {
menu._trigger( 'select', event, { item: menu.active } );
}
};
/*
// Override menu#expand to add return true:
menu.expand = function( event ) {
var newItem = this.active &&
this.active
.children( ".ui-menu " )
.children( ".ui-menu-item" )
.first();
if ( newItem && newItem.length ) {
this._open( newItem.parent() );
// Delay so Firefox will not hide activedescendant change in expanding submenu from AT
this._delay(function() {
this.focus( event, newItem );
});
return true;
}
};*/
// Override menu#collapse to enable sliding behavior:
menu.collapse = 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,
height: menu.element[0].clientHeight - 4 ,
width: menu.element[0].clientWidth
}, iosMenu.options.slideDuration, iosMenu.options.slideEasing);
};
// Override menu#_startOpening so that hovering doesn't
// initiate the sliding:
menu._startOpening = function( submenu ) {
clearTimeout( this.timer );
// Don't open if already open fixes a Firefox bug that caused a .5 pixel
// shift in the submenu position when mousing over the carat icon
if ( submenu.attr( "aria-hidden" ) !== "true" ) {
return;
}
}
},
destroy: function() {
var menu = this.element && this.element.data( 'uiMenu' );
menu && menu.destroy();
}
});
$.widget（“ui.iosMenu”{
选项：{
backText:“Back”，
教育程度：200，
幻灯片显示：“线性”
},
_insertBackButtons:function（）{
this.element.find（'liul，liol'）.prepend(
$（“”+
' ' +
“ ”
) );
归还这个；
},
_创建：函数（选项）{
var iosMenu=此；
菜单
._insertBackButtons（）
.元素
.addClass（'ios样式'）
.菜单({
//当显示子菜单时，将其放置在右侧
//当前菜单的。稍后，我们将其滑入视图。
职位：{
我的‘左上’，
在“右上角”，
of:ioscmenu.element
}
});
var menu=ioscmenu.element.data（'uiMenu'）；
//覆盖菜单#选择以说明嵌套和后退按钮：
menu.select=功能（事件）{
//menu.active=menu.active | |$（event.target）.closest（“.ui菜单项”）；//新的随机行
if（menu.active&&menu.active.find（'a'）.attr（“href”）=“菜单返回”）{
//如果选择“返回”，请返回：
menu.focus（事件，menu.active）；
菜单.折叠（事件）；
/*
if（菜单折叠（事件））{
事件。stopImmediatePropagation（）；
}
event.preventDefault（）*/
}else if（menu.active&&menu.active.find（'>ul'）.length）{
//如果选择了带有子对象的对象，请显示子对象：
menu.focus（事件，menu.active）；
菜单。展开（事件）；
/*
if（菜单展开（事件））{
事件。stopImmediatePropagation（）；
}
event.preventDefault（）*/
}否则{
菜单。_触发器（'select'，event，{item:menu.active}）；
}
};
/*
//覆盖菜单#展开以添加返回真值：
menu.expand=函数（事件）{
var newItem=this.active&&
这个是主动的
.children（“.ui菜单”）
.children（“.ui菜单项”）
.first（）；
if（newItem&&newItem.length）{
此项已打开（newItem.parent（））；
//延迟，以便Firefox不会从中隐藏展开子菜单中的ActiveSubstant更改
这是延迟（函数（）{
此。焦点（事件、新项目）；
});
返回true；
}
};*/
//覆盖菜单#折叠以启用滑动行为：
menu.collapse=函数（事件）{
var newItem=this.active&&this.active.parents（'li:not（.ui菜单项）'）。first（），
self=这个，
父母亲
if（newItem&&newItem.length）{
newItem.find（'>a'）.addClass（'ui-state-focus'）.removeClass（'ui-state-active'）；
parent=this.active.parent（）；
父母亲
.attr（'aria hidden'，'true'）
.attr（'aria expanded'，'false'）
.制作动画({
左：self.element.css（'width'）
}，ioscmenu.options.slideDuration，ioscmenu.options.slideEasing，函数（）{
parent.hide（）；
自我关注（事件、新项目）；
})
//返回true；
}else if（event&&event.which===$.ui.keyCode.ESCAPE）{
//#左箭头和逃跑都会被调用。如果是
//后者，我们在顶端，发射一个“关闭”事件：
自身触发（“关闭”，事件）；
}
};
//覆盖菜单#_打开以启用滑动行为：
var menuOpenWithoutSliding=菜单。\u打开；
菜单。\打开=功能（子菜单）{
MENUOPENWITHOUTHSLIDING.call（此，子菜单）；
子菜单。设置动画({
左:0,，
高度：menu.element[0]。clientHeight-4，
宽度：菜单。元素[0]。客户端宽度
}，ioscmenu.options.slideDuration，ioscmenu.options.slideEasing）；
};
//覆盖菜单##(u开始变亮以便悬停不会
//启动滑动：
菜单