动态添加编辑删除引导选项卡 [英] Dynamically add edit remove bootstrap tab

问题描述

我正在尝试动态创建像edit一样的脚本删除引导选项卡。这是一个演示

I am trying to make a script like edit remove bootstrap tab dynamically. Here is a demo

var button='<button class="close" type="button" title="Remove this page">×</button>';
var tabID = 1;
function resetTab(){
	var tabs=$("#tab-list li:not(:first)");
	var len=1
	$(tabs).each(function(k,v){
		len++;
		$(this).find('a').html('Tab ' + len + button);
	})
	tabID--;
}

$(document).ready(function() {
    $('#btn-add-tab').click(function() {
        tabID++;
        $('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab">Tab ' + tabID + '<button class="close" type="button" title="Remove this page">×</button></a></li>'));
        $('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>'));
    });
    $('#tab-list').on('click', '.close', function() {
        var tabID = $(this).parents('a').attr('href');
        $(this).parents('li').remove();
        $(tabID).remove();

        //display first tab
        var tabFirst = $('#tab-list a:first');
        resetTab();
        tabFirst.tab('show');
    });

    var list = document.getElementById("tab-list");
});

	#tab-list .close {
	    margin-left: 7px;
	}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>
                <button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button>
            </p>
            <!-- Nav tabs -->
            <ul id="tab-list" class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
            </ul>

            <!-- Tab panes -->
            <div id="tab-content" class="tab-content">
                <div class="tab-pane fade in active" id="tab1">Tab 1 content</div>
            </div>
        </div>
    </div>
</div>

但如何让这个可编辑？我想编辑标签标题和标签内容。最后如何在输入中获取输出/ html源代码？

But how to make this editable? I want to edit tab title and tab content. At last how to get the output/html source code in a input?

推荐答案

创建这样的编辑函数..

Create an edit function like this..

var editHandler = function() {
  var t = $(this);
  t.css("visibility", "hidden");
  $(this).prev().attr("contenteditable", "true").focusout(function() {
    $(this).removeAttr("contenteditable").off("focusout");
    t.css("visibility", "visible");
  });
};

然后将处理程序附加到每个新添加的标签中的编辑按钮..

Then attach the handler to an "edit" button in each newly added tab..

$('#btn-add-tab').click(function() {
    ...
    $(".edit").click(editHandler);
});

演示： http://www.codeply.com/go/4yGNCaA8Xs

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