Dynamic tabs with JQuery UI

Question

I am creating a web application and I want to use the Tabs widget to replicate the tab functionality you find in most web browsers. I want the user to be able: to move (sort) the tabs around, create tabs dynamically, close tabs dynamically.

The problem I find is that to close a tab you need to have its index and when considering the fact that other tabs can be opened, closed, and sorted dynamically, you need to retrieve/get the tab's index when you want to close it.

Answer 1

So why can't you get the index?

$('ul li a').click(function(){ 
    var index = $(this).parent().index($(this).parent());
    alert(index); 
});

Answer 2

You'll need to add a link inside the list item that contains the tab, for closing at least, that would be the "x out" button. If the user clicks that link and you have a jquery event handler for clicking on all the links of that class, it will know the index. Same for moving/dragging. The tricky part, I'm thinking, is if you add new tabs, what is the tab going to say? "Untitled"?