jQuery UI Tabs – Creating Closable Tabs

On October 29, 2009, in SharePoint 2007, Web Design, by shereen

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!

If you enjoyed this article, please consider sharing it!
Digg Delicious Digg

Tagged with:  

6 Responses to “jQuery UI Tabs – Creating Closable Tabs”

  1. Twitted by msshushu says:
    October 29, 2009 at 11:14 am

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

  2. Twitted by sqlbelle says:
    October 29, 2009 at 1:26 pm

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

  3. Links (10/29/2009) « Steve Pietrek – Everything SharePoint says:
    November 1, 2009 at 4:36 pm

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

  4. Techflaps | 34 Excellent Tutorials About How To Create And Use jQuery Tabs says:
    March 5, 2010 at 10:14 pm

    [...] JQUERY UI TABS CREATING CLOSABLE TABS [...]

  5. Nelson says:
    January 9, 2012 at 11:50 pm

    Hi there,

    Where do i use this code? in the CEWP?

  6. shereen says:
    January 10, 2012 at 10:15 pm

    Hi Nelson,

    This code is not really specific to SharePoint. In fact, for this particular article, I had built it outside of SharePoint. However, you could most certainly add this to SharePoint. You can use the CEWP to add the script links and the javascript logic followed by the html and css inline. It should work for you. If you have any issues putting it together, just let me know. Or you can check out Christophe’s Easy Tabs for SharePoint. http://sympmarc.com/2009/05/21/christophes-easy-tabs-at-path-to-sharepoint/

Leave a Reply