Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

[Solved] Link back to Tab


Reply


4 Posts   1805 Views

Avatar
Ricardona

Community Member, 26 Posts

17 January 2010 at 8:46am

Edited: 27/01/2010 8:18am

Hi all,

I have a form which has a TabSet with severals Tab, each Tab has links to perform actions on other pages.

The problem we have is that when navigating to another page from a Tab, and return not reopen the original open, if not initial Tabset Tab.

For example:

_____ _____
|Tab1 \-- |Tab2 \ User select Tab2 and navigate to other page with a link in Tab2
----------|

User press back button

_____ _____
|Tab1 \-- |Tab2 \ Now Tab1 is selected :(
|----------

Can we change this behavior?

We saw that each Tab is marked with #, but this is not saved with a link back to navigate to another page.

Thanks in advance.

Avatar
Ricardona

Community Member, 26 Posts

27 January 2010 at 8:22am

I changed default Tabs from SS distribution a JQuery Tabs, a cookie is then used to determine the initially selected tab.

http://docs.jquery.com/UI/Tabs#option-cookie

Enjoy

Ricardo

Avatar
Juanitou

Community Member, 323 Posts

15 April 2010 at 9:14am

Hi Ricardo.

I was looking for that. I have some tabs as you had (with the SS code). Could you please further explain the cookie code? The jQuery UI site is down, I cannot download the Tabs plugin, so I thought I could got the solution even before the actual code! ;-)

Regards,
Juan

Avatar
Juanitou

Community Member, 323 Posts

16 April 2010 at 3:01am

Edited: 16/04/2010 3:41am

Hey, I found it by myself! The cookie isn’t stored at every tab click, but only when going out of the page. Here’s the JS code (which not uses Tabs plugin, but the Cookie one):

;(function($) { // Wrapper to prevent errors with other scripts
$(document).ready(function() { // jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event

   var curChildIndex; // Define as global
   
   if($.cookie('active_tab') == null) { // If no cookie is set…
      $('ul.tabNav li:first').addClass('current'); // …mark as current the first Title item
      $('.tabContainer .tab:first').addClass('current').slideDown('fast', myClick); // …show the first tab content
   } else {
      var cookieChildIndex = $.cookie('active_tab');
      $('ul.tabNav li:nth-child('+cookieChildIndex+')').addClass('current'); // …mark as current the Title item stored in cookie
      $('.tabContainer div:nth-child('+cookieChildIndex+')').addClass('current').slideDown('fast', myClick); // …show the content of the corresponding tab
   }

   function myClick() {
      $('ul.tabNav a').click( // On click…
         function() {
            curChildIndex = $(this).parent().prevAll().length + 1; // Sets the current li index   
            $(this).parent().parent().children('.current').removeClass('current'); // Remove the old current class from li
            $(this).parent().addClass('current'); // Adds the current class to the current li
            $(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() { // Slides up the old tabContainer div (the current tab)
               $(this).removeClass('current');
               $(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() { // Slides down the new tabContainer div
                  $(this).addClass('current');
               });
            });
            return false;
         }
      );
   }
   
   $('a').not($('ul.tabNav a')).click(function(){$.cookie('active_tab', curChildIndex)}); // Set a session cookie with the current li index when going to another page

})
})(jQuery);

It’s one of my first JS codes, don’t expect it to be a model…

Cheers,
Juan