微软风格的标签

最近我问了关于多行标签页的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

微软风格的标签

回答

相关问题