期待jQuery UI 的menu,先根据M2版改造一个无限层级菜单
废话少说先上代码:
$(function() {/*init menu*/var hideTimer;var setHover = function(o,state) {var p = o.parent;if (p == null) return;p.ishover = state;setHover(p,state);};var allmenuobj = function() {this.menus=new Array();};allmenuobj.prototype.add = function(menu) {menu.num = this.menus.push(menu)-1;return menu.num;};allmenuobj.prototype.get = function(num) {if (num < this.menus.length) return this.menus[num];return null;};allmenuobj.prototype.hideother = function(num) {for (var i=0;i<this.menus.length;i++) {this.menus[i].ishover = false;}if (num < this.menus.length -1 ) {var menu = this.menus[num];menu.ishover = true;setHover(menu, true);for (var i=this.menus.length-1;i>=0;i--) {var gmenu = this.menus[i];if (!gmenu.ishover) {gmenu.$$.hide();}}}return false;};var menuObj = function(o,p,n){this.$$ = o || null;this.parent = p || null;this.num = n || -1;this.ishover = false;};var allmenu = new allmenuobj();$(".demo > button").button({icons: {//primary: "ui-icon-home",secondary: "ui-icon-triangle-1-s"}}).each(function() {var menu = $(this).next();var menuo = new menuObj(menu,null);var n = allmenu.add(menuo);menu.attr('menuindex', n).menu({select: function(event, ui) {$(this).hide();location.href = ui.item.children('a').attr('href');},input: $(this)}).hide().find('li:has(ul)').each(function() {var cmenu = $(this).find('a:eq(0)').wrapInner('<span name="code"><style>.ui-menu { position: absolute; z-index:9999;min-width:9em;_width:9em;}.ui-menu-item a {position:relative; display: inline-block;zoom: 1; overflow: visible;white-space:nowrap;}* html .ui-menu-item a {width:120%;}*+html .ui-menu-item a {min-width:9em;}.ui-menu a span.ui-icon { right: .5em; position: absolute; top: 50%; margin-top: -8px; }.ui-menu a span.ui-menu-item-text {padding:0 2.1em 0 0;}</style>?
另外,咱不懂css,不知道怎么回事在ie6和ie7中a标签添加了箭头图标后,其它同级的a标签宽度不能自动增加,只能在样式里面重新定义,哪位大侠给俺解答一下,不胜感激。
* html .ui-menu-item a {width:120%;}/*ie6更是变态,居然要到120%才能完全充满li标签*/*+html .ui-menu-item a {min-width:9em;}/*for ie7*/
?在ie6中必须先隐藏下级菜单,才不会出现下级菜单隐藏不完全的问题,有兴趣的看官可将“childrenMenu.hide();”注销,将“for (var i=this.menus.length-1;i>=0;i--) {”改为“for (var i=0;i<this.menus.length;i++) {”然后测试(在浏览第一个菜单的时候,快速移动第二个菜单,然后再看第一个菜单)就会发现这个问题。当然能够告诉我为什么最后,不胜感激。
哪位有空也请帮忙优化一下代码,实在本人水平有限。
预览:
?
?
至于jQuery UI 1.9M2版可上googlecode下载:下载 jQuery UI 1.9 M2
修改的文件在压缩包里面。