WikiRiks

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== jQuery select UI tabs by id (and index) ======
With the latest versions of jQuery is not not trivial to select a tab by ID as it was before.

Previously you could use:
<code javascript>
$("#tabs").tabs("select", "#tab-1");
</code>

now is more difficult since that function has been deprecated and the ufficial method is only
<code javascript>
$("#tabs").tabs("option", "active", index);
</code>

where index is the ordinal number counting tabs from left to right.

Now, if you can be sure the index never change you can use
<code javascript>
$(mytabs).tabs("option", "active", $("#tab_header").index());
</code>

but if the number of tabs change it needs a specific function intended to iterate the tabs, incrementing an index of the tabs counted before reaching the id we were looking for.

This is the function.
<code javascript id2index.js>
//tabsId Id of the div containing the tab code.
//srcId Id of the tab whose id you are looking for
function id2Index(tabsId, srcId)
{
	var index=-1;
	var i = 0, tbH = $(tabsId).find("li a");
	var lntb=tbH.length;
	if(lntb>0){
		for(i=0;i<lntb;i++){
			o=tbH[i];
			if(o.href.search(srcId)>0){
				index=i;
			}
		}
	}
	return index;
}
</code>

So, having something such as

<code html>
<div id="tabs">
    <ul>
        <li><a href="#tab-1"><span>One</span></a></li>
        <li><a href="#tab-3"><span>Two</span></a></li>
        <li><a href="#tab-6"><span>Three</span></a></li>
    </ul>
</div>
</code>

you can activate #tab-6 with
<code javascript>
$("#tabs").tabs("option","active", id2Index("#tabs","#tab-6"));
</code>

===== How does it works? =====
I read the tabs "a href" and get the ID from there. When it is found in the loop, I read the id that jQuery add automatically for every tab into the dom when the UI tabs is initialized.