Removing Dynamic JQuery UI tabs -

I am creating a web application and I want to use tab functionality to use tab web design Most web browsers come in. I want the user to be able: To move around the tabs, close the tab dynamically, close the tab dynamically.

I have a problem that is removing the tab moved around

We say that there are three tabs named:

One, two and three.

If I'm like "one" tab:

two, three and one

One ", which indicates 2, the tab" three "is removed. The tabs are now:

Two, and one.

I have tested many different scenarios and when I remove a tab, JQueryUI deletes the wrong tab which initially had the index value, and not on the tab that currently exists Index value is.

You are right that tab when you re-crawl them, their old index values Which makes unexpected behavior when you try to delete one, you can force it to update the indexes by resuming the tab before removing it, like:

  $ ('# Tabs'). Tab ('Deleted'). Tab (); $ ('# Tab') Tab ('Remove', 2);  

This works because the index is created when the tab is set based on the elements in the li DOM. When you move the tab all around, the li conditions in the DOM are up to date, even if their index value does not change in the tabs plugin.

Of course, if you have a very complex setup, this can have a negative display effect, in which case you can understand another way to update the tab index, or you keep an array Which maps to the original index in the current index.