Create Dynamic Tabs

Building on the Quick Start example, you can use the add method and the tabTemplate option along with the Dialog widget to create dynamic tabs. You can use the remove method and the CSS style class "ui-icon-close" to supply a button to delete tabs.

For a complete listing of the CSS styling elements available for this widget, in your installation folder under Wijmo, open the wijtabs folder and see the jquery.wijmo.wijtabs.css file.

For a complete listing of the CSS styling elements available for the Dialog widget, in your installation folder under Wijmo, open the wijdialog folder and see the jquery.wijmo.wijdialog.css file.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which initializes the tab widget, sets tab widget options, creates an Add Tab function, and initializes and customizes a Dialog widget.

Tab Widget and Add Tab Function

Sets the sortable option to true, allowing users to reorder tabs by dragging them into new positions.
Sets the tab title and tab content to get values from the dialog box.
Sets the tab counter to append a tab in the third position, after the two existing tabs.
Sets the tabTemplate up to use the <li> element to render tabs.
Creates the add function to append a new tab in the widget when called.

Dialog Widget

Sets the autoOpen option to false, so that the dialog box only opens when you click the button.
Sets the modal option to true, so that the rest of the page is disabled until the dialog box is dismissed.
Adds Add and Cancel buttons to the dialog box, and sets up open and close functions.
Connects the dialog to the addTab function.
Sets the addTab function to collect information from the counter and the dialog box.
Sets the Add Tab button to open the dialog box.
Sets up the close icon to remove tabs on click.

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs({ sortable: true }); }); $(document).ready(function () { var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content'); var tab_counter = 3; // tabs initialize with a custom tab template and an "add" callback that fills in the content var $tabs = $('#tabs').wijtabs({ tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>', add: function (event, ui) { var tab_content = $tab_content_input.val() \|\| 'Tab ' + tab_counter + ' content.'; $(ui.panel).append('<p>' + tab_content + '</p>'); } }); // modal dialog box initializes with custom buttons and a "close" callback that resets the form inside var $dialog = $('#dialog').wijdialog({ autoOpen: false, modal: true, buttons: { 'Add': function () {addTab(); $(this).wijdialog('close');}, 'Cancel': function () {$(this).wijdialog('close');} }, open: function () {$tab_title_input.focus();}, close: function () {$form.find('input').val("").end().find('textarea').val("");} }); // addTab form: calls the addTab function on submit and closes the dialog box var $form = $('fieldset', $dialog).submit(function () { addTab(); $dialog.wijdialog('close'); return false; }); // actual addTab function: adds a new tab using the title input from the form above function addTab() { var tab_title = $tab_title_input.val() \|\| 'Tab ' + tab_counter; $tabs.wijtabs('add', '#tabs-' + tab_counter, tab_title); tab_counter++; } // addTab button: opens the Add tab dialog box $('#add_tab') .button() .click(function () { $dialog.wijdialog('open'); }); // close icon: removes the tab on click $('#tabs').on('click', 'span.ui-icon-close', function () { var index = $('li', $tabs).index($(this).parent()); $tabs.wijtabs('remove', index); }); }); </script>

Script

Copy Code

<script type="text/javascript">
     $(document).ready(function () {
          $("#tabs").wijtabs({ sortable: true });
     });
 
     $(document).ready(function () {
          var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content');
          var tab_counter = 3;
 
          // tabs initialize with a custom tab template and an "add" callback that fills in the content
          var $tabs = $('#tabs').wijtabs({
               tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
               add: function (event, ui) {
                    var tab_content = $tab_content_input.val() || 'Tab ' + tab_counter + ' content.';
                    $(ui.panel).append('<p>' + tab_content + '</p>');
                    }
          });
 
     // modal dialog box initializes with custom buttons and a "close" callback that resets the form inside
     var $dialog = $('#dialog').wijdialog({
          autoOpen: false,
          modal: true,
          buttons: {
                    'Add': function () {addTab(); $(this).wijdialog('close');},
                    'Cancel': function () {$(this).wijdialog('close');}
                    },
          open: function () {$tab_title_input.focus();},
          close: function () {$form.find('input').val("").end().find('textarea').val("");}
     });
 
     // addTab form: calls the addTab function on submit and closes the dialog box
     var $form = $('fieldset', $dialog).submit(function () {
          addTab();
          $dialog.wijdialog('close');
          return false;
     });
 
     // actual addTab function: adds a new tab using the title input from the form above
     function addTab() {
          var tab_title = $tab_title_input.val() || 'Tab ' + tab_counter;
          $tabs.wijtabs('add', '#tabs-' + tab_counter, tab_title);
          tab_counter++;
     }
 
     // addTab button: opens the Add tab dialog box
     $('#add_tab')
          .button()
          .click(function () {
               $dialog.wijdialog('open');
          });
 
     // close icon: removes the tab on click
     $('#tabs').on('click', 'span.ui-icon-close', function () {
          var index = $('li', $tabs).index($(this).parent());
          $tabs.wijtabs('remove', index);
          });
     });
</script>

In the <body> section of your HTML file, replace the basic markup with this markup that includes a button. The first <div> element creates the tabs widget; its id option is set to 'tabs', which we call in the jQuery script to initialize the widget. The <ul> element sets the label text to show in the two tabs that show initially, and adds a Remove Tab button to each. The first nested <div> element contains content to display in the first tab. The second nested <div> element contains content to display in the second tab. Another <div> element adds a dialog box to allow users to set up their own tabs, and finally, an <input> element adds a button to call the dialog box.

Markup	Copy Code
<div id="tabs"> <ul> <li><a href="#tabs-1">Blippity Fling-Flang</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li> <li><a href="#tabs-2">Blipnoodle</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li></ul> <div id="tabs-1"> <p> Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo flungwhack shnizzlegobble ho a blop bing bangflib yap boo weeble. Boo wacko ho dabba Ongle Fling ha bing ho wow a flap-boo-plop jingle funkzonk ho blatwiddle, nip dinglezoom duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack Razzbleeb. Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo bang). <a href="http://bff.orangehairedboy.com/"> Blippity Fling-Flang by orangehairedboy</a></p> </div> <div id="tabs-2"> <p> Zip abracadabra bananaramaflup. Zip flunging dang boo bang yip zangle. Loo flupping funky zunkity roo tizzle boo twiddling flungfloo. Flobble jingle ting nip nizzle bleep dang yip zingle. "Duh zonk ho?" razz Tony Soprano. Miss Beasley zap blang loo zonk dingely dilznoofustwiddle. "Ho izzle dee?" bloo You. Blap ho flipping meepwow.</p> </div> </div> <div id="dialog" title="Add tab"> <fieldset class="ui-helper-reset"> <label for="tab_title"> Title</label> <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /> <label for="tab_content"> Content</label> <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all" cols="" rows=""></textarea> </fieldset> </div> <input id="add_tab" type="button" value="Add Tab" />

Markup

Copy Code

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Blippity Fling-Flang</a> <span class="ui-icon ui-icon-close">Remove
            Tab</span></li>
        <li><a href="#tabs-2">Blipnoodle</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li></ul>
    <div id="tabs-1">
        <p>
            Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo flungwhack shnizzlegobble ho a blop bing bangflib yap boo weeble.
            Boo wacko ho dabba Ongle Fling ha bing ho wow a flap-boo-plop jingle funkzonk ho blatwiddle, nip dinglezoom
            duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack
            Razzbleeb. Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap
            shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo bang). <a href="http://bff.orangehairedboy.com/">
            Blippity Fling-Flang by orangehairedboy</a></p>
    </div>
    <div id="tabs-2">
        <p>
            Zip abracadabra bananaramaflup. Zip flunging dang boo bang yip zangle. Loo flupping
            funky zunkity roo tizzle boo twiddling flungfloo. Flobble jingle ting nip nizzle
            bleep dang yip zingle. "Duh zonk ho?" razz Tony Soprano. Miss Beasley zap blang
            loo zonk dingely dilznoofustwiddle. "Ho izzle dee?" bloo You. Blap ho flipping meepwow.</p>
    </div>
</div>
<div id="dialog" title="Add tab">
    <fieldset class="ui-helper-reset">
        <label for="tab_title">
            Title</label>
        <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
        <label for="tab_content">
            Content</label>
        <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"
            cols="" rows=""></textarea>
    </fieldset>
</div>
<input id="add_tab" type="button" value="Add Tab" />

In the <head> section of your HTML file, replace the style with this one, which styles the dialog and the close buttons.

Styles	Copy Code
<style type="text/css"> #dialog label, #dialog input{display: block;} #dialog label{margin-top: 0.5em;} #dialog input, #dialog textarea{width: 95%;} #tabs{margin-top: 1em;} #tabs li .ui-icon-close{float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;} #add_tab{cursor: pointer;} </style>

Styles

Copy Code

<style type="text/css">
     #dialog label, #dialog input{display: block;}
     #dialog label{margin-top: 0.5em;}
     #dialog input, #dialog textarea{width: 95%;}
     #tabs{margin-top: 1em;}
     #tabs li .ui-icon-close{float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;}
     #add_tab{cursor: pointer;}
</style>

Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Click the Add Tab button to open the dialog and add a tab. Click the x button in the corner of a tab to remove it.

Tab Widget and Add Tab Function

Dialog Widget

Widgets

Concepts

Reference