Twitter Bootstrap - 动态添加/删除选项卡和选项卡内容 [英] Twitter Bootstrap - Dynamically Add/Remove Tabs and Tab Content

问题描述

提前感谢任何和所有输入/帮助/建议...

Thanks in advance for any and all input/help/advice...

我正在使用Twitter Bootstrap标签来组织一些信息。选项卡将位于表单页面上，每个选项卡将包含一个联系表单，用户可以在提交整个表单之前向该页面添加多个联系人。

I'm using Twitter Bootstrap tabs to organize some information. The tabs will be located on a form page, and each tab will consist of a "contact form", in which the user can add multiple contacts to this page prior to submitting the whole form.

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#contact_01" data-toggle="tab">Joe Smith</a><span>x</span></li>
        <li><a href="#contact_02" data-toggle="tab">Molly Lewis</a><span>x</span> </li>
        <li><a href="#" class="add-contact" data-toggle="tab">+ Add Contact</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
        <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
    </div>
</div>

此处的完整代码： http://jsfiddle.net/Harlow/zQnck/34/

我正试图模仿功能jQuery UI的简单操作选项卡示例。
（ http://jqueryui.com/tabs/#manipulation ）

I'm trying to mimic the functionality of jQuery UI's "simple manipulation" example of tabs. (http://jqueryui.com/tabs/#manipulation)

我目前所拥有的将添加一个新选项卡，但我希望能够添加一个新的，唯一的选项卡及其自己的ID（从代码继续，如contact_01，contact_02，等等）点击+添加新联系人，这将始终是最后一个选项卡，但实际上没有它自己的选项卡内容窗格。在动态添加内容的另一边，我希望能够通过单击每个选项卡上的小x来删除它。

What I currently have will add a new tab, but I want to be able to add a new, unique tab with it's own ID (continuing from the code, like "contact_01, contact_02, etc.") by clicking on the "+ Add New Contact" which will always be the last tab, but not actually have it's own tab content pane. On the other side of dynamically adding content, I want to be able to delete it by click the small "x" on each tab.

- 编辑 -

为了澄清，点击新标签后jQuery示例触发了一个模态。出于我的目的，我只想创建一个新选项卡而不输入选项卡名称或内容（内容将始终是相同的联系表单，我很好，选项卡名称与新生成的ID相同 - 我会让它自动更新到联系人的名字。）

Just to clarify, the jQuery example trigger's a modal upon clicking "New Tab". For my purposes, I just want to create a new tab without inputting the tab name or content (the content will always be the same contact form, and I'm fine with the tab name being the same as the newly generated ID - I will have it automatically update to the contact's name later.)

推荐答案

编辑：我尽可能最好地再现了原来的小提琴小提琴死了。

I reproduced the original fiddle as best as I could as both fiddles died.

新小提琴： http：/ /jsfiddle.net/dogoku/KdPdZ/2/

$(".nav-tabs").on("click", "a", function(e){
      e.preventDefault();
      $(this).tab('show');
    })
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

    $('.add-contact').click(function(e) {
        e.preventDefault();
        var id = $(".nav-tabs").children().length; //think about it ;)
        $(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');         
        $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>');
});

请注意，我删除了悬停功能，而是使用了css

Note that I removed the hover function and instead used css

.nav-tabs > li:hover > span {
    display:block;
}

这篇关于Twitter Bootstrap - 动态添加/删除选项卡和选项卡内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！