How to create dynamic tab content

advertisements

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>

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>

Related Articles

In jquery-ui 1.9, how to create new tabs dynamically?

According to the upgrade guide for jquery-ui 1.9 tabs - http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method - when adding new tabs dynamically, you only have to do something like this: HTML: <div id=

How to create dynamic data entry forms in a WPF application?

I'm planning a WPF application which will be able to create dynamic data entry forms (meaning the form gets the fields to display, their order, etc. from data in the database, not from the XAML) use the MVVM pattern if possible Here is how I plan to

How to create a tabbed activity with ListViews - Android

First of all, I'm a beginner in Android programming. What I'm trying to do is to program three Tabs with each a ListView inside (you know it from e.g. WhatsApp). Android Studio makes it easy to automatically create a Tabbed Activity. So the question

How to create dynamic pages in drupal?

I have contents in the following url: mysite.com/project/node-id But then i want the user to be directed to mysite.com/entries/node-id when they click on entries link. How do i achieve this? In the entries page i want to show a view which takes the n

How to create dynamic external javascript files?

I am thinking about how some online services create dynamic JavaScript files. These files have the .js extension, but their content is not static. I found a sample file here. It seems that this script is generated with a higher level programming lang

How to make dynamic tabs using jquery

I have this code for now aiming to create tabs: <ul class="nav nav-tabs"> <li class="active"> <a href="#custom-tab-0-8cf04a9734132302f96da8e113e80ce5" data-toggle="tab">Home</a> </li> &

How to create a round content cursor?

Who knows how to create such slider? May be there is some plugins, Google search has not suggested anything.. By clicking on the arrows or on the icons themselves - slider to spin, clicked icon appears at the top, and accordingly changes the content

How to create a tabbed html form with a common div

I'm trying to create a html tabbed form where each named tab has a common set of inputs defined in a common div. When submit is hit, I'd like all the inputs from all the tabs are returned. Not a problem if unchecked checkboxes are missed. Each input

How to create multiple tabs without xml in Android

I found a lot of examples to create tabs using an xml file in android, but I need to create multiple tabs programmatically. Please guide me. <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_

Android - how to create fixed tabs

I'm trying to create fixed tabs in android, but all code examples I tried has deprecated functions. Does anybody have an updated link that explains how to make fixed tabs? EDIT: I tried using tabhost and actionbar... ThanksYou refer at this tabs? htt

How to create simple tabs with jQuery?

I have the following code: fiddle Which works great in websites I create my self and with no JS the tabs act as jump links to the relevant sections. When placed in the bespoke CMS I am forced to use at the moment the jump links don't work. I have tri