Mercer Mercer - 4 months ago 15
jQuery Question

How can Create dynamic tab content

I have a first tab in my application,

I want to know if it's possible to create a new tab when I click on my bouton ?



<html>
<head>
<title>How to Create dynamic tab content</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
$(document).ready(function() {
$('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor

//get displaying tab content jQuery selector
var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');

//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');

//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');

//show target tab content
var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');
});
});
</script>
<style>
/** Start: to style navigation tab **/
.nav {
margin-bottom: 18px;
margin-left: 0;
list-style: none;
}

.nav > li > a {
display: block;
}

.nav-tabs{
*zoom: 1;
}

.nav-tabs:before,
.nav-tabs:after {
display: table;
content: "";
}

.nav-tabs:after {
clear: both;
}

.nav-tabs > li {
float: left;
}

.nav-tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}

.nav-tabs {
border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
margin-bottom: -1px;
}

.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 18px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}

li {
line-height: 18px;
}

.tab-content.active{
display: block;
}

.tab-content.hide{
display: none;
}


/** End: to style navigation tab **/
</style>
</head>
<body>
<div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1">Show Tab 1</a>
</li>
</ul>
</div>
<section id="tab1" class="tab-content active">
<div>
<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Open</a>
</div>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <h3>Create new tab</h3>
            <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Create Me !</button>
        </div>
    </form>
</div>
</section>
</body>
</html>




Answer

Working fiddle

Sure you could, you have just to attach click event to Create me button then append the new tab to the DOM.

$('body').on('click','#create_me',function(){
   //get the index of new tab
    var index = $('.nav-tabs li').length+1; 

    //Create new tab link
    $('.nav-tabs').append('<li><a href="#tab'+index+'">Show Tab '+index+'</a></li>');

    //Create new tab section
    $('.ui-page').append('<section id="tab'+index+'" class="tab-content hide">Tab '+index+' content</section>');

    //Close popup
    $( "#popupLogin" ).popup("close");
})

To active the newly created tab just add :

$('a[href="#tab'+index+'"]').click();

NOTE : You have to attach click event to .nav-tabs li > a using event delegation on() so it'll be able to detect dynamically added tabs :

$('.nav-tabs').on('click','li > a',function(event){

Hope this helps.

$(document).ready(function() {
  $('body').on('click','#create_me',function(){
    var index = $('.nav-tabs li').length+1;
    $('.nav-tabs').append('<li><a href="#tab'+index+'">Show Tab '+index+'</a></li>');
    $('.ui-page').append('<section id="tab'+index+'" class="tab-content hide">Tab '+index+' content</section>');

    $( "#popupLogin" ).popup( "close" );
    $('a[href="#tab'+index+'"]').click();
  })

  $('.nav-tabs').on('click','li > a',function(event){
    event.preventDefault();//stop browser to take action for clicked anchor

    //get displaying tab content jQuery selector
    var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');					

    //find actived navigation and remove 'active' css
    var actived_nav = $('.nav-tabs > li.active');
    actived_nav.removeClass('active');

    //add 'active' css into clicked navigation
    $(this).parents('li').addClass('active');

    //hide displaying tab content
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hide');

    //show target tab content
    var target_tab_selector = $(this).attr('href');

    $(target_tab_selector).removeClass('hide');
    $(target_tab_selector).addClass('active');
  });
});
.nav {
  margin-bottom: 18px;
  margin-left: 0;
  list-style: none;
}

.nav > li > a {
  display: block;
}

.nav-tabs{
  *zoom: 1;
}

.nav-tabs:before,
.nav-tabs:after {
  display: table;
  content: "";
}

.nav-tabs:after {
  clear: both;
}

.nav-tabs > li {
  float: left;
}

.nav-tabs > li > a {
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 2px;
  line-height: 14px;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 18px;
  border: 1px solid transparent;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

li {
  line-height: 18px;
}

.tab-content.active{
  display: block;
}

.tab-content.hide{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div>
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#tab1">Show Tab 1</a>
    </li>
  </ul>	
</div>
<section id="tab1" class="tab-content active">
  <div>
    <a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Open</a>
  </div>
  <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
      <div style="padding:10px 20px;">
        <h3>Create new tab</h3>
        <button type="button" id='create_me' class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Create Me !</button>
      </div>
    </form>
  </div>
</section>