Wednesday, November 24, 2010

JQuery - responding to selected tab using tabselect

If you have a standard jquery UI tabs setup:

            <div id="tabs-project">
           <li><a href="#tabs-project-core">Details</a></li>
           <li><a href="#tabs-project-connections">Connections</a></li>
           <li><a href="#tabs-project-alerts">Alerts</a></li>
           <div id="tabs-project-core">

And you want to determine which tab has been pressed by name (not index - because index might changed when code gets moved or if tabs get inserted..) then you can use:
        function getIndexOfTabAnchor(name) {
            return $("a[href*=#" + name + "]").parent().index();
            select: function (event, ui) {
                if (ui.index == getIndexOfTabAnchor('tabs-project-jobs')) {
                    // do jobs stuff...
                else if (ui.index == getIndexOfTabAnchor('tabs-project-schedules')) {
                    // do schedules stuff...

Note that getIndexOfTabAnchor() uses

No comments:

Post a Comment