2009-07-18 144 views
0

我使用這個jQuery的菜單腳本:jQuery的菜單

(function($) { 
    $.fn.blowfish = function() { 

    // hide original ul dom tree 
    $(this).hide(); 

    // create container from top-level li tags 
    var top = $(this).children('li'); 
    var container = $('<div/>').addClass('bfcontainer').attr('id', 'cv' + Math.floor(Math.random()*10e10)).insertAfter(this); 
    var topdiv = $('<div class="top"></div>').appendTo(container); 

    // check if IE and set fixed width for first column 
    if($.browser.msie) { 
     $('.top').width('200px'); 
    } 

    $.each(top, function(i, item) { 
     var topitem = $(':eq(0)', item).clone().data('sub', $(item).children('ul')).appendTo(topdiv); 

     if($(topitem).data('sub').length) { 
      $(topitem).addClass('hasChildMenu'); 

      if($.browser.safari) { 
       $(topitem).css({'margin-right' : '15px'}); 
      } 
     } 
    }); 

    // event handlers 
    $('a', container).live('click', function() { 
     var container = $(this).parents('.bfcontainer'); 

     // click handler 
     var level = $('div', container).index($(this).parents('div')); 

     // remove blocks to the right in the tree, and 'deactivate' other links within the same level 
     $('div:gt('+level+')', container).remove(); 
     $('div:eq('+level+') a', container).removeClass('active').removeClass('inpath'); 
     $('.active', container).addClass('inpath'); 
     $(this).addClass('active'); 

     if($(this).data('sub').children('li').length) { 
      // add submenu if container has children 
      submenu(container, this); 
     } 
     else { 
      // show title or link if container has no children 
      var title = $('<a/>').attr({href : $(this).attr('href')}).text($(this).attr('title') ? $(this).attr('title') : $(this).text()); 
      var featurebox = $('<div/>').html(title).addClass('feature').appendTo(container); 

      // set width 
      var remainingspace = 0; 

      $.each($(container).children('div').slice(0, -1), function(i, item) { 
       remainingspace += $(item).width(); 
      }); 

      var fillwidth = $(container).width() - remainingspace; 

      $(featurebox).css({'top': 0, 'left' : remainingspace}).width(fillwidth).show('slow'); 
     } 

     return false; 
    }); 
}; 

// create submenus 
function submenu(container, item) { 
    var leftPos = 0; 

    $.each($(container).children('div'), function(i, mydiv) { 
     leftPos += $(mydiv).width(); 
    }); 

    var submenu = $('<div/>').css({'top' : 0, 'left' : leftPos}).appendTo(container).fadeIn(); 

    // check if IE and set fixed width for submenu column 
    if($.browser.msie) { 
     $(submenu).width('200px'); 
    } 

    var subitems = $(item).data('sub').children('li'); 

    $.each(subitems, function(i, subitem) { 
     var subsubitem = $(':eq(0)', subitem).clone().data('sub', $(subitem).children('ul')).appendTo(submenu); 

     if($(subsubitem).data('sub').length) { 
      $(subsubitem).addClass('hasChildMenu'); 

      if($.browser.safari) { 
       $(subsubitem).css({'margin-right' : '15px' }); 
      } 
     } 
    }); 
} 
})(jQuery); 

原來的DOM樹是這樣的:

<ul> 
    <li> 
     <a href="#">Item</a> 

     <ul> 
      <li> 
       <a href="#">Item 2</a> 
      </li> 

      <li> 
       <a href="#">Item 2</a> 

       <ul> 
        <li> 
         <a href="#">Item 3</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 

    <li> 
     <a href="#">Item 4</a> 
    </li> 
</ul> 

jQuery的腳本添加一個新列的每個子菜單(比如Mac OS X發現者),我想修改它,所以如果沒有更多的子菜單,它實際上獲得鏈接的href屬性,並像一個正常行爲(我使用AJAX加載內容到另一個div如果你點擊一個項目沒有子項目,所以我不能在腳本本身使用window.location,而是必須禁用返回fa在那個特定的情況下。我該怎麼做呢?

你可以在這裏查看工作示例:http://mxms.me/blowfish

非常感謝。

回答

1

好吧,回答我自己的問題:D!

這裏是更新JS:

(function($) { 
    $.fn.blowfish = function() { 

    // hide original ul dom tree 
    $(this).hide(); 

    // create container from top-level li tags 
    var top = $(this).children('li'); 
    var container = $('<div/>').addClass('bfcontainer').attr('id', 'cv' + Math.floor(Math.random()*10e10)).insertAfter(this); 
    var topdiv = $('<div class="top"></div>').appendTo(container); 

    // check if IE and set fixed width for first column 
    if($.browser.msie) { 
     $('.top').width('200px'); 
    } 

    $.each(top, function(i, item) { 
     var topitem = $(':eq(0)', item).clone().data('sub', $(item).children('ul')).appendTo(topdiv); 

     if($(topitem).data('sub').length) { 
      $(topitem).addClass('hasChildMenu'); 

      if($.browser.safari) { 
       $(topitem).css({'margin-right' : '15px'}); 
      } 
     } 
    }); 

    // event handlers 
    $('a', container).live('click', function() { 
     var container = $(this).parents('.bfcontainer'); 

     // click handler 
     var level = $('div', container).index($(this).parents('div')); 

     // remove blocks to the right in the tree, and 'deactivate' other links within the same level 
     $('div:gt('+level+')', container).remove(); 
     $('div:eq('+level+') a', container).removeClass('active').removeClass('inpath'); 
     $('.active', container).addClass('inpath'); 
     $(this).addClass('active'); 

     if($(this).data('sub').children('li').length) { 
      // add submenu if container has children 
      submenu(container, this); 

      return false; 
     } 
     else { 
      // show title or link if container has no children 
      /* 
var title = $('<a/>').attr({href : $(this).attr('href')}).text($(this).attr('title') ? $(this).attr('title') : $(this).text()); 
      var featurebox = $('<div/>').html(title).addClass('feature').appendTo(container); 

      // set width 
      var remainingspace = 0; 

      $.each($(container).children('div').slice(0, -1), function(i, item) { 
       remainingspace += $(item).width(); 
      }); 

      var fillwidth = $(container).width() - remainingspace; 

      $(featurebox).css({'top': 0, 'left' : remainingspace}).width(fillwidth).show('slow'); 
*/ 
      /* window.location($(this).attr('href')); */ 
     } 
    }); 
}; 

// create submenus 
function submenu(container, item) { 
    var leftPos = 0; 

    $.each($(container).children('div'), function(i, mydiv) { 
     leftPos += $(mydiv).width(); 
    }); 

    var submenu = $('<div/>').css({'top' : 0, 'left' : leftPos}).appendTo(container).fadeIn(); 

    // check if IE and set fixed width for submenu column 
    if($.browser.msie) { 
     $(submenu).width('200px'); 
    } 

    var subitems = $(item).data('sub').children('li'); 

    $.each(subitems, function(i, subitem) { 
     var subsubitem = $(':eq(0)', subitem).clone().data('sub', $(subitem).children('ul')).appendTo(submenu); 

     if($(subsubitem).data('sub').length) { 
      $(subsubitem).addClass('hasChildMenu'); 

      if($.browser.safari) { 
       $(subsubitem).css({'margin-right' : '15px' }); 
      } 
     } 
    }); 
} 
})(jQuery); 

乾杯, 最大