jQueryタブをカスタマイズする

jQueryのデフォルトタブをカスタマイズしたいと思います。ナビゲーションバーにタブを追加するボタンを追加しました。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/

出典

2012-05-09 Muhammad Usman

正確には動作しません。フィドルのページでは、新しいタブを追加するためのボタンが正常に動作することがわかります。 – arma

ボタンの前にタブを追加したい... –

http://jsfiddle.net/armababy/6VrwD/17/ – arma

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

最初に、「タブの追加」ボタンを配置する最後の<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-09 11:12:11 naota

jQueryタブをカスタマイズする

答えて

関連する問題