Skip to content

jQuery UI Tabs – Creating Closable Tabs

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!

Posted in SharePoint, Web Design.

Tagged with .

3 comments

By shereen – October 29, 2009

3 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Continuing the Discussion

  1. Twitted by msshushu linked to this post on October 29, 2009

    [...] This post was Twitted by msshushu [...]

  2. Twitted by sqlbelle linked to this post on October 29, 2009

    [...] This post was Twitted by sqlbelle [...]

  3. Links (10/29/2009) « Steve Pietrek – Everything SharePoint linked to this post on November 1, 2009

    [...] jQuery UI Tabs – Creating Closable Tabs [...]

You must be logged in to post a comment.

« Building jQuery Tabs That Open & Close Write to EventLog from SharePoint Custom Solutions »