jQuery bootstrap tabs template append

Я пытаюсь динамически добавлять вкладки начальной загрузки на основе нажатия кнопки.jQuery bootstrap tabs template append

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
<script src="//code.jquery.com/jquery-latest.min.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
<script src="//ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"> 
</script> 
</head> 
<body> 

<script id="tabTemplate" type="text/x-jquery-tmpl"> 
    <div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div> 
</script> 

<a href="#" id="btnAdd"><i class="icon-plus-sign-alt"></i> Add Tab</a> 

<ul class="nav nav-tabs" id="tabs"> 
    <li class="active"><a href="#tab1">Tab 1</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1">Hello tab #1 content...</div> 
</div> 

<script> 
$(document).ready(function() { 

$('#btnAdd').click(function (e) { 
    e.preventDefault(); 
    var nextTab = $('#tabs li').size()+1; 

    // create the tab 
    $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs'); 

    // create the tab content 
    $('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content'); 

    // make the new tab active 
    $('#tabs a:last').tab('show'); 
}); 

});

Я пытаюсь поставить «// создать содержимое вкладки» в шаблоне, но все еще есть приращение вкладки ID.

вот fiddle

Может кто-нибудь помочь с этим? Я не могу заставить его работать с помощью шаблона, и вам нужна вкладка, чтобы разместить намного больше информации.

источник

2015-02-18 mcneela86

я получил эту работу, увидеть это fiddle

мне нужно передать переменную JavaScript/значение с шаблоном:

$.tmpl(tabTemplate, { "device" : nextTab }).appendTo('.tab-content');

и Referance ее внутри моего шаблона:

<script id="tabTemplate" type="text/x-jquery-tmpl"> 
    <div class='tab-pane' id='tab${device}'>${device}</div> 
</script>

надеюсь, это поможет кому-то.

источник

2015-02-19 08:18:37 mcneela86

jQuery bootstrap tabs template append

ответ

Смежные вопросы