jquery mb.tabset

Schermata 2013-02-28 alle 19.49.57

keep your tabs ordered!

A useful component that let you build a tabbed interface really easily; ad you can even sort your tabs as you want!

see the demodownload it

PayPal

How does it works:

here is the js call:

here is the code for each tabset:

here is the code for each tabContent:

Params

  • sortable: (boolean) define if the tabs are sortable or not
  • position: (“left” or “right”) define the tabset position
  • start: (function) a callBack function on start sort
  • stop: (function) a callBack function on stop sort
  • to set a tab disable just add “disabled” to the tab class
  • to load tab content via ajax just add: class=”tab sel {content:’cont_1_2′, ajaxContent:’your ajax page url’, ajaxData: ‘data you want to send’}”

to store the new position of the tabs there’s a variable   $.mbTabset.mbTabsetArray  that returns an array with new tab position each time a sortable action is completed; this variable is cross tabset so the best is to store on stop event via ajax. You can also use the UI method via:

$(your tabset id).sortable("toArray")or$(your tabset id).sortable("serialize").

 

You can also switch a tabset between sortable or not by invoking:

$(your tabset id).setSortableMbTabset()  to set sortable
or
$(your tabset id).clearSortableMbTabset(); to destroy sortable

80 Responses

  1. Rodrigo Perez
    Rodrigo Perez at · Reply

    I was going to ask you about how to make the site remember the current tab using cookies but then I found a way and I thought you might be interested in it.

    My code ended up like this:

    function getCookie(cname)
    {
    var name = cname + “=”;
    var ca = document.cookie.split(‘;’);
    for(var i=0; i<ca.length; i++)
    {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
    }

    var curTab = getCookie("tab");
    if (curTab != "")
    {
    $("#" + curTab).addClass("sel");
    }

    $("#tabset1").buildMbTabset({
    sortable:false,
    position:"left",
    start:function(){},
    stop:function(){}
    });

    $(".tab").click(function(){
    // Holds the product ID of the clicked element
    var selTab = $(this).attr('id');
    document.cookie = "tab=" + selTab;
    });

  2. Wodzzu
    Wodzzu at · Reply

    Can u tell me function to delete alreade created tab?

  3. Junior
    Junior at · Reply

    How to navigate throug tabs using the buttons inside each tabs

    1. Alex
      Alex at ·

      You cann’t to do this. You must choice another plugin.

  4. Junior
    Junior at · Reply

    Hi There I would like to use buttons to help me navigate through the tabs. I know javascript but I’m not that familiar with ajax. Please help!!

  5. kenanagkurt
    kenanagkurt at · Reply

    can u help me about add my html web site

  6. y8 games
    y8 games at · Reply

    Good. Thanks for sharing

  7. yashmangupta
    yashmangupta at · Reply

    Hi,

    Excellent plugin but want to ask whether can I use this plugin for commercial purposes free of charge or is there any cost associated to it.

  8. kiarash
    kiarash at · Reply

    Hi Matteo
    If I want to have this ability for Telerik : RadTabStrip , what I need to do?

    1. Matteo Bicocchi
      Matteo Bicocchi at ·

      Hi kiarash,
      Sorry but I don’t know how RadTabStrip works…
      Bye,
      Matteo

Leave a Reply