Since the wonderful jQuery.bbq is part of Drupal 7 core, it would be great to make use of it in the Field group module to remember states of tabs, accordions, etc...
Depending on how it is implemented this would allow users to use the back and forward buttons to navigate between states, bookmark states, etc...

I've included a rough first version of jQuery.bbq support for the horizontal tabs.

To try it out make sure the Jquery.bbq library is loaded (drupal_add_library('system', 'jquery.bbq');).

CommentFileSizeAuthor
field-group-tabs-bbq.js_.zip771 bytesk3vin_nl

Comments

drupalok’s picture

drupalok commented

i think there would be many people using this as tiny module... why don't you make it a release?

Nimo’s picture

Nimo commented

In what way does it remember states of tabs?

k3vin_nl’s picture

k3vin_nl commented

It uses the jQuery BBQ plugin to remember the states of the tabs. jQuery BBQ uses the #hash in the URL so you will get URL's like mysite.com/page#tab=tabname.

Nimo’s picture

Nimo commented

I don't get it to work. I have included the javascript code.

In Chrome I see no change, but in Firefox "undefined=Tabname" is added to the URL. However I can't change tab by the URL.

When studying the javascript:

Drupal.behaviors.field_group_tabs_bbq = {
  attach: function (context) {
    if ($.bbq){
      // loop through all tabsets
      $(".group-tabs").each(function(index){
        // don't show '0'
        i = (index == 0) ? '' : index;
        // Save the name for convenience.
        $(this).data("tabsetname",'tab'+i);
      });
      // Restore tabsets:
      restoreTabs();

      // Save the state each time a tab is clicked.
      $(".horizontal-tab-button a").click(function(){
          $active_tab = $("strong",this).html();
          // find the name of the tabset and save the state.
          var state = {};
          id = $(this).closest(".group-tabs").data("tabsetname");
          state[id] = $active_tab;
        $.bbq.pushState(state);
      });
    }
  $(window).bind( 'hashchange', function(e){
    restoreTabs();
  })
  }
}

I see that it's searching for ".group-tabs", however I can find that text-combination in my rendered page and I am wondering whether this is the cause of the problem?

nils.destoop’s picture

nils.destoop commented
Issue summary: View changes
Status: Active » Closed (outdated)