Renaming jQuery UI Tabs

Posted by: Malcolm Sheridan , on 11/24/2009, in Category jQuery and ASP.NET
Views: 27964
Abstract: The following article demonstrates how to use rename jQuery’s UI tabs at runtime.
Renaming jQuery UI Tabs
 
Earlier this year I wrote an article on jQuery Tabs and Lazy Loading. I had some good feedback about that article which is always nice. Recently I was faced with a different problem when using jQuery’s tabs. The user wanted the ability to change the headings of any tab through the browser. The solution is quite straight forward so I thought I’d share it with you in case you ever needed to do this too.
Before we get started, this example uses the latest version of jQuery which is 1.3.2. That can be downloaded from here. You’ll also need the jQuery UI Core Tabs Widget and the Tabs CSS files which can be downloaded from here
Open Visual Studio 2008 and create a new Web Application. Open the HTML designer and add the following JavaScript and CSS file references to the <head> HTML tag:
<link type="text/css" href="CSS/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.7.2.custom.min.js"></script>
The next step is to add the HTML for the tabs:
 
<div id="tabs">
<ul>
            <li><a href="#tabs-0">Nunc tincidunt</a><img src="Images/x_normal.gif" alt="Rename" /></li>
            <li><a href="#tabs-1">Proin dolor</a><img src="Images/x_normal.gif" alt="Rename" /></li>
            </ul>
<div id="tabs-0">
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
</div>
      <div id="tabs-1">           
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi                 facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
</div>
</div> 
In the HTML above, the <a> tag in the <ul> tag will be rendered as the tab. After each <a> tag there’s an image that the user can click on to rename the tab. I wanted to create a generic piece of JavaScript that will rename any tab the user wants to rename. Add the following JavaScript code to the <head> section:
<script type="text/javascript">
$(function() {
            // Tabs
            $('#tabs').tabs({
                selected: -1
            });
 
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                              function() { $(this).addClass('ui-state-hover'); },
                              function() { $(this).removeClass('ui-state-hover'); }
                        );
 
            $("img[alt=Rename]").click(function(e) {
                var reply = prompt("Type in a name for the tab");
                if (reply != null && reply.trim().length > 0) {
                    $(e.target).prev("a").text(reply);
                }
            });
});
</script>
 
In the code above, the magic piece of code that allows the user to rename a tab is this:
 
$("img[alt=Rename]").click(function(e) {
var reply = prompt("Type in a name for the tab");
      if (reply != null && reply.trim().length > 0) {
            $(e.target).prev("a").text(reply);
}
});
When the page loads, jQuery will bind the click event to any image that has a Rename alt attribute. That will allow me to target only those images on the page. When the user clicks on any image, a JavaScript prompt will be displayed asking the user for some information:
Type a Tab Name
If the user types in some text, the next task is to locate the tab to rename. The event object is guaranteed to be passed to the event handler. The target property contains the DOM element that issued the event. Once we know the image that was clicked, we then need to find the previous <a> tag so the text can be updated. This is achieved using the prev method in jQuery. This returns a set of elements containing the unique previous siblings of each of the matched set of elements. Finally the text is updated using the text method:
Type a Name
 
When the user clicks OK the text will be updated:
Updated Tab Names
A simple solution in the end! I hope you enjoyed reading this article. The entire source code of this article can be downloaded over here
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Dave on Monday, March 28, 2011 6:58 AM
Hi,

Can this be applied to PHP? I've tried to implement this method, but whenever I refresh the page, it switched back to the previous tab name.
Comment posted by Keith on Wednesday, April 6, 2011 1:00 PM
This help out nicely.  I changed it a bit in my code to enter the current tab text as the default text in the prompt.

var reply = prompt("Type in a name for the tab",$(e.target).prev("a").text());
Comment posted by Ferencz on Monday, November 19, 2012 9:59 AM
Thanks for this really nifty piece of code, it helped out greatly !

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel