How to explode jquery tabs into the whole page
I have a page that looks something like this:
+-------------------------------------------+ | | | +------------------------开发者_如何学JAVA----+ +--------+ | | |main | |sidebar | | | | | |+------+| | | | | ||jquery|| | | | | || tabs || | | | | |+------+| | | | | | | | | | | | | | | +----------------------------+ +--------+ | +-------------------------------------------+
in which a have jQuery tabs elements with 4 tabs. I would like to have one button that would show all 4 tabs at the same time on the whole page with a close option to get it back as it was before. Something like this:
+-------------------------------------------+ | | | +------------------+ +------------------+ | | | tab 1 | | tab 2 | | | | | | | | | +------------------+ +------------------+ | | | | +------------------+ +------------------+ | | | tab 3 | | tab 4 | | | | | | | | | +------------------+ +------------------+ | | close | +-------------------------------------------+
Any idea on how to go about doing this?
I did something similar recently. Assuming that your tabs are DIV elements, have the button call code doing something along these lines
function expand(){
$('div.tab').each(function(){
$(this).show(); //Make sure all our tabs are visible
$(this).removeClass('tab'); //Remove any sizing etc. previously applied to the tab by your stylesheet
$(this).addClass('expandedtab'); //Apply class which sets proper size, floats left etc.
});
}
Then create a collapse
method which reverts the operations performed by expand
and have your Close-button call it. If you find that collapse
needs to know something about the state of affairs before expand
was called (like which tab was active), have expand
use the jQuery.data() method to store this information for later retrieval by collapse
.
NOTE: If you prefer, instead of removing the 'tab' class and adding the 'expandedtab' class, you can just apply/override specific styles making expand
add a style-attribute to the tab DIV and have collapse
remove the attribute.
精彩评论