As you can see, the tabs can contain any valid HTML content and be styled in any way you like.
Click on the picture to go to the site where I "borrowed" it from. If they were in the UK I'd buy one of their T-Shirts. Hope they don't mind me using one of their pictures.
Anway I think this is very impressive - a fully functioning tabbed dialog with half a dozen lines of javascript - not counting the library of course. But I didn't have to write that !
Thank you Greg Sidelnikov
This was going to be a demonstration of two jQuery effects on the same page i.e. the tabbed dialog and the image flip effect you can see on the home page.
But I could not make it work.
The tab is just blank. I have tried several easy tweaks, like changing the order in which the various scripts execute and wrapping everything in the $(document) .ready(function() but it won't play.
This needs some more research and experiment. I haven't given up on this yet so watch this space.
This is going to be an example of a flash movie - have not got round to doing this yet.
However, I do not think it will work. Flash always wants to be top in the Z-Order so I think what will happen is that the flash object will always show through, irrespective of which tab is selected.
Another thing to try is what happens with dynamic content - e.g. stuff produced by a PHP script at the server ?
If you are using a modern browser ( e.g. Chrome, but not unsurprisingly IE9 ) you'll see rounded corners on the images, courtesy of CSS3.
Still got to figure out why example 2 won't run. Think it's something to do with the Z-order. Both examples use it.
This example is from Authentic Society. I had a big struggle to get it to work, because of errors and omissions in the explanation. [ I am not complaining - the guys who put AuthenticSociety together have done a fantastic job. I put these corrections here in the hope they might help other beginners - as the original article is targeted at "absolute beginners" ]. The first one is here:
<script type = "text/javascript">
// initialize plugin code
$(document).ready(function() {
jQuery.Tabs.initialize( "MyTabbedView",
"300px", "150px", 4,
['Description', 'How to Use', 'Download', 'Contact Us'],
['Page1', 'Page2', 'Page3', 'Page4'] );
});
</script>
The number in red is missing in the description. It's the number of tabs you have defined. (I'm sure the need for this could be removed by having the script figure out the number of tabs defined in the array).
The second omission is that nowhere is it mentioned that there is an accompanying style sheet, which you absolutely must have to make this work. If you view the source of this page you'll find the styles declared in the head section. I discovered them by viewing the page source for the demo of this code which AuthenticSociety have on their site. That's where I found the missing parameter too.
The third problem is that there is a mistake in one of the styles, which totally screws up the page layout. The original is here:
#Page1,#Page2,#Page3,#Page4 { visibility: hidden; display: block; }
The four id selectors refer to the <div> tags into which the content for each tab is placed. The display:block is not needed becasue the <div> is already a block element. The big problem though is with the visibility. The four divs need to be invisible until the code has fired up and set up the tabs. But the visibility property is the wrong way to do it. Sure, it makes the div contents invisible, but they are still on the page - you just cannot see them - it's like they were the same color as the background. You get a big blank gap underneath the tab where all the div contents are hiding. What you should say is:
#Page1,#Page2,#Page3,#Page4 { display:none; }
and so the divs are not even on the page until the code fires up. See w3schools for more details.
The reason you don't see this gap on the AuthenticSociety demo is, I think, that they have placed all the following content in a div which is absolutely positioned to be up close underneath the tab. Although this works, it's not the right way to to it - you'd have to change the position everytime you change the tab content. It's what the professionals call "tight coupling" I believe.
In addition to these essential fixes, you probably will also want to twiddle the styles ( to change the colors and borders for example ) but that, as they say, I will leave as an exercise for the reader.