0

jQuery のデフォルト タブをカスタマイズしたい。ナビゲーション バーに [タブの追加] ボタンを追加しました。

そのボタンの前に新しいタブを追加したい: どうすればいいですか?

HTML:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#tabs").tabs();
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><input type='button' id='addTab' value='Add Tab'></li>
    </ul>

    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

    <input type='button' id='removeTab' value='RemoveTab'>
</body>
</html>

JS:

$('#addTab').live('click', function() {
    $("#tabs").tabs("add", "http://google.com", "A newTab", [2])
});
$('#removeTab').live('click', function() {
    $("#tabs").tabs("remove", "http://google.com", "A newTab", [2])
});​

jsFiddle: http://jsfiddle.net/6VrwD/14/

4

1 に答える 1

1

私も同じ問題を抱えていました。それを回避するための少しトリッキーな方法を見つけました。すべてのブラウザ環境で動作するかはわかりませんが、よろしければ以下の方法をお試しください。

<li>まず、 「タブの追加」ボタンを配置する最後のタグにクラス名を付けます。

<ul id="mytabs">
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li class='list_btn'><input type='button' id='addTab' value='Add Tab'></li>
</ul>

次に、クリック機能で、最後の位置にタブを追加するだけです。また、新しいタブを最後の位置に追加した後、最後のタブと「タブの追加」ボタンの順序を入れ替えることができます。

$('#addTab').live('click', function() {
    // add a tab to the last position.
    $("#tabs").tabs("add", "http://google.com", "A newTab");

    // switch the order of the last tab and the "Add Tab" button.
    $(".list_btn").clone().appendTo("#mytabs");
    $(".list_btn:first").remove();
});

特にタブの順序を切り替える最後の部分で、コードをより洗練された方法で書き直すことができます。ありがとうございました。

于 2012-05-09T11:12:11.437 に答える