CODEWITHSUNDEEP
jqueryjquery-plugins
jim tollan
jim tollan

Reputation: 22485

Jquery tabs plugin question

I've created (modified a concept sourced via mr google) a little lightweight tab plugin that works 90% to my satisfaction. However, one very basic key ingredient is missing and it's making me a wee bit sad :).

I can hit the tab and run the client select code (callback function) without issue and have tweaked it to do exactly what I want. However, there is an edge case that is alluding my feeble thought processes. Basically, I'd like to have a tab selected automatically when the page is visited (the last clicked tab index is saved in a cookie), so that the info that the user last looked at is presented to them, rather than the default 1st tab. Now, I'm well aware that I could use the jquery-ui tab to achieve this aim, but for a few reasons that I won't bore you with, this isn't an option (for now!! - if what i'm wishing for isn't possible, then I may have to revisit that option).

I've placed the core code on our old chum signor fiddler as it's possibly easier to demonstrate where i've got to, plus will allow you guys to tweak a little easier.

Hope you can help. Here's the link: Fiddler link to plugin code and simple demo

all the best...

Upvotes: 1

Views: 334

Answers (2)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

A simple way to accomplish this would be to programmatically trigger a click event:

$tabs.find("ul li").eq(tabIndex).click();

Here's an updated example that automatically selects the third tab:

http://jsfiddle.net/andrewwhitaker/MUPgz/4/

Update:

To encapsulate the call inside the plugin, I've modified it like this:

(function($) {
    var activeTab;
    var opts;
    var methods = {
        init: function(options) {
            /* Snip (Previous init code) */
        },
        show: function(index) {
            return this.each(function() {
                $(this).find("ul li").eq(index).trigger("click");
            });
        }
    };

    $.fn.tabify = function(method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        }
    };
})(jQuery);

Usage:

$tabs.tabify("show", 2);

Updated example: http://jsfiddle.net/andrewwhitaker/MUPgz/5/

Upvotes: 2

V1tOr
V1tOr

Reputation: 369

any special reason for not use the Official plugin?

http://jqueryui.com/demos/tabs/

Upvotes: 0

Related Questions