what is best way to implement jquery ui tab with back/forward button support?

I want users to be able to click back/forward button to move between tabs they have click, but jquery ui's tab don't quite support this yet. Only option that I have found so far is this one, http://www.asual.com/jquery/address/samp开发者_StackOverflowles/tabs/

is there any simpler or better solution to implement this?

The best solution will likely be one that implements hash tags since *most* browsers save hash tags in their history (allowing use of the back and forward buttons).

I recommend making each tab a link with a hash tag and then use this plugin to listen for hash change events and then call a function with that event.

For example:

HTML snippet:

<ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
</ul>

<div id="content">
    <div id="tab1" class="tab active">This is tab 1!</div>
    <div id="tab2" class="tab">This is tab 2!</div>
</div>

CSS snippet:

#content{
    position:relative;
}
.tab{
    display:none;
    position:absolute;
    top:0px;
    right:0px;
}
.tab.active{
    display:block;
}

JavaScript snippet (using jQuery; assumes document is ready):

$(window).hashchange(function(){ //Requires hashchange plugin
    $('#content .tab').removeClass('active'); //Make all tabs inactive
    $(location.hash).addClass('active'); //Activate the tab that has the same ID as the hash
});

With some adjustments, this could achieve the functionality you're looking for.

The problem with using the hash (#) and javascripts native history is that if the user were to click another link outside of the tabs that included a hash then that would break your forward and back buttons.

To get around this try to keep everything inside the jquery ui tabs object, methods and events. Jquery UI Tabs uses an index to specify current tab and to change the tab. Here is the function I use for forward and back buttons:

    /**
     * The jquery ui tab forward and back buttons. Remember to replace the
     * '#new-product-tab-container' below with the selector for your tab
     * 
     * @method
     * @public
     * @param {string} dir The direction. Either 'forward' or 'back'
     * @return void
     */
    function tab_nav(dir){

        //vars
        var currentIndex = new Number($('#new-product-tab-container').tabs("option","selected"));
        var newIndex = new Number(0);
        var total = new Number($('#new-product-tab-container .ui-tabs-nav > li').tabs().size());

        if(dir=='forward' && currentIndex < total) newIndex = (currentIndex+1) ;
        if(dir=='back' && currentIndex > 1) newIndex = (currentIndex-1);

        $('#new-product-tab-container').tabs("option","selected", newIndex);

    }

The to use this function, call it as tab_nav('forward') or tab_nav('back')

hope this helps someone ;)

You can use

$("#tabs").tabs('select', 1);

Look at this working example: http://jsfiddle.net/n4mqC/