1

つまり、基本的に、タブのクローンを作成して後で編集するための追加ボタンがあるタブバーがあります。私の問題は、非常に多くのタブが追加されると、私の（左矢印と右矢印）と私の追加ボタンが削除されることです。タブを追加し、ボタンが消えないようにするにはどうすればよいですか？固定位置はオプションではありません。最新のタブの横にボタンが必要です。バーが最大幅に達すると、ボタンはそこに留まります。矢印はタブをスクロールして、オーバーフロー時に非表示になるタブを確認します。http://jsfiddle.net/pHraC/1/

html

<div class="tabBox" style='max-width:800px'>
  <ul class="tabs">
    <li class="selected"><a href="#">Certificate of Quantity</a></li>
    <li><a href="#">COQ - Products/Chemicals</a></li>
    <li><a href="#">Movement Summary</a></li>
    <li><a href="#">Barge Survey</a></li>

    <ul class="tabButtons">
      <li><a href="#" class="tabNavLeft"><-</a></li>
      <li><a href="step-2b.html" class="tabNavRight">-></a></li>
      <li><div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
      <input type='button' value='add' class='addTab' /></div></li>
    </ul>            
    </ul>  
</div>

jquery

// add new tab
$("input.addTab").live("click", function (event) {
  var ultab = $(this).closest('.tabs'); // cache ul.tabs
  var li = ultab.children('li:not(.selected)').first(); // cache the row  
  ultab.children('li:last').after(li.clone().find('a').attr("href", "#").text('New Tab').end());
});
4

2 に答える 2

1

まず、.tabButtonsフォームを分離することをお勧めします.tabs

<div class="tabBox" style='max-width:800px'>
    <ul class="tabs">
        <li class="selected"><a href="#">Certificate of Quantity</a>
        </li>
        <li><a href="#">COQ - Products/Chemicals</a>
        </li>
        <li><a href="#">Movement Summary</a>
        </li>
        <li><a href="#">Barge Survey</a>
        </li>
    </ul>
    <ul class="tabButtons">
        <li><a href="#" class="tabNavLeft"> <- </a>
            </li>
        <li><a href="step-2b.html" class="tabNavRight">-></a>
        </li>
        <li>
            <div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
                <input type='button' value='add' class='addTab' />
            </div>
        </li>
    </ul>

次に、position:absoluteそれらを好きな場所に配置するために使用します。

.tabBox { position:relative;

表示：インラインブロック; -webkit-box-sizing：border-box; -moz-box-sizing：border-box; ボックスサイズ：border-box; パディング：0 50px 0 0;} .tabButtons {position：absolute; top：0px; 右：10px; z-index：2; }

また、これを機能させるには、静的以外の位置を定義.tabBoxし、追加ボタンにパディングを追加する必要があります。

最後に、次の.tabs liようにスタイルを設定します。

.tabBox .tabs li {
    display: inline-block;
    list-style: none;
    margin: 9px 0 0 0;
    padding: 3px 1px 0;
    height: 36px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

に追加white-space:nowrap;しdisplay:inline-block;ます.tabBox .tabs

結果は次のとおりです：http：//jsfiddle.net/pavloschris/pHraC/4/

于 2013-02-26T17:20:57.987 に答える
0

最も簡単な方法は<ul>、パディングでトップレベルをオフセットし、ボタンを絶対位置として配置することです。

これが簡単なデモです。

http://jsfiddle.net/ionko22/vURkK/

ああ、おそらくあなたの子供<ul>を内に置く方が良いでしょう<li>。

于 2013-02-26T17:35:10.143 に答える