1792 Posts in 588 Topics by 560 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1537 Views |
-
[Solved] Link back to Tab

17 January 2010 at 8:46am Last edited: 27 January 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.
-
Re: [Solved] Link back to Tab

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
-
Re: [Solved] Link back to Tab

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 -
Re: [Solved] Link back to Tab

16 April 2010 at 3:01am Last edited: 16 April 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 eventvar 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
| 1537 Views | ||
|
Page:
1
|
Go to Top |

