Ok, so this is really a follow up to my previous post where I outlined how to build jQuery Tabs that Open and Close. I did end that post with a small TODO for myself: integrate the close capability into the tab itself so the user didn’t have to click a button to close that tab.

Now after doing a bit of digging, I learned that this is actually functionality that is in the works for future releases of jQuery UI. Ticket 3924 is currently open and in development, which is a good sign. Further investigation landed me on this page: http://jsbin.com/uqage which is a fantastic example of how the Closable Tabs concept could work.

My final solution involved me tweaking the above to work as follows:

Setting Up the HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="mytabs"> 
   <ul>
      <li><a href="#tabs-home">My Projects Home</a></li>
   </ul>
   <div id="tabs-home">
      <h3>Welcome to My Projects Home</h3>
      <p><a href="#" onclick="addTab('myActiveProjects', 'My Active Projects', 'RadGrid1')">My Active Projects</a></p>
      <p><a href="#" onclick="addTab('mySalesActivities', 'My Sales Activities', 'RadGrid2')">My Sales Activities</a></p>
   </div>
</div>
<div id="tabs-myActiveProjects" style="display:none;">
<h3>My Active Projects</h3>
 
</div>
<div id="tabs-mySalesActivities" style="display:none;">
<h3>My Sales Activities</h3>
 
</div>

Wiring Up the Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(document).ready(init);
 
function init() {
 
    // tabs init with a custom tab template and an "add" callback filling in the content
    var $tabs = $("#mytabs").tabs({
        tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-test"><img src="images/cross.png" /></span></li>'
    });
 
    // close icon: removing the tab on click
    // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
    $('#mytabs span.ui-test').live('click', function() {
        var index = $('li',$tabs).index($(this).parent());
        $('#mytabs span.ui-test').parent().remove();
        $("#mytabs").tabs('select', 0);
    });
}
 
function addTab(tabID, tabName, grid) 
{
    // double check to see if tab is already open
    if($("a[href^=#tabs-"+ tabID +"]").length > 0)
    {
        $("a[href^=#tabs-"+ tabID +"]").parent().show();
    } else {
        currentTabID = tabID;
 
        // this will add a tab via the standard method
        $("#mytabs").tabs("add","#tabs-" + tabID,tabName);
        $("#tabs-" + tabID).css("display","block");
    }
 
    $("#mytabs").tabs('select', tabID);
}

Finalizing the Styles

1
2
3
4
5
6
7

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="styles/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<style type="text/css">
    #mytabs { margin-top: 1em; }
    #mytabs li .ui-test { float: left; margin: 0.5em 0.4em 0 0; cursor: pointer; }
</style>

Please, please leave a comment if you have any difficulty with this and I’ll do my best to help!

« »