微軟風格的標籤

最近我問了關於多行標籤頁的stackoverflow問題。下面是微軟風格的標籤

我只是想知道，如果可能，使他們喜歡的風格標籤窗口中的鏈接，即如果選擇在第一線片，我想把它推到第二行。我遇到的問題是我正在創建動態選項卡。是否有可能使用Javascript/jquery來計算每個標籤的寬度並確定在哪一點將啓動第二行標籤？

感謝

2011-02-23 DG3

如果你樂於使用JavaScript，然後解我給你在那之前的問題不是真的很好。 – thirtydot 2011-02-23 14:01:12

也許像[Ext JS]（http://dev.sencha.com/deploy/dev/examples/#sample-5）會更適合你。請參閱：[http://dev.sencha.com/deploy/dev/examples/tabs/tabs-adv.html](http://dev.sencha.com/deploy/dev/examples/tabs/tabs-adv。 html） – thirtydot 2011-02-23 14:04:23

@thirtydot。這個例子很有用。這是一個新的要求。如果所選標籤位於第一行，我想使用Javascript將選定標籤的位置移動到第二行。我希望我在這裏問的聽起來很合理。 – DG3 2011-02-23 14:04:50

已更新添加了Tab Auto-Resize。

測試在Chrome/FF

DEMO &來源：http://ask.altervista.org/demo/microsoft-styled-tabs/

$(function() { 
     setLines(); 
     $('#windows-properties li a').click(function(e) { 
     e.preventDefault(); 
     var $li = $(this).parent(); 
      $(this.hash).show().siblings('.property-content').hide(); 
      var liTp = parseInt($li.position().top); 
      if (liTp < lastLiPos) { 
       $('li.line-' + liTp).wrapAll('<div id="move-lis"></div>'); 
       $('#move-lis').insertAfter('#windows-properties li:last'); 
       $('li.line-' + liTp).unwrap(); 
       setLines(); 
      } 
      $li.addClass('selected').siblings('li').removeClass('selected'); 
     }); 
     var $lstLi = $('#windows-properties li:last'); 
     var lastLiPos = parseInt($lstLi.addClass('selected').position().top); 
     $('.property-content:last').show(); 
    }); 
//.... other part of code in the demo source ...

來源

2011-02-23 17:58:39

不適用於我（FF 3.6.13）。 – nico 2011-02-23 18:01:10

感謝您的建議，讓我檢查;） – 2011-02-23 18:04:20

現在確定它的工作！ ;） – 2011-02-23 18:20:04

我不知道窗戶是怎麼做的，但我不認爲這將有可能與動態的標籤。相反，您可以創建兩個列表而不是一個。或者更好的是，您還可以使用腳本從一個列表中創建兩個列表，以便這兩個列表跨越整個行寬&，您不必硬編碼任何內容。

來源

2011-02-23 14:07:20

微軟風格的標籤

回答

相關問題