It's time to take a look at the fourth and final part of the UI Tools section of jQuery Tools—that of Tabs.
Tabs can be described as one of the most popular user interfaces on the Internet. This is for good reason since they are easy to use and contain lots of information in a confined space, which you can then organize in a more user-friendly manner. Let's have a look at them in a little more detail.
The basic structure of Tabs is as follows:
<!-- the tabs --> <ul class="tabs"> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> <!-- tab "panes" --> <div class="panes"> <div>pane 1 content</div> <div>pane 2 content</div> <div>pane 3 content</div> </div>
These would then be activated as Tabs, by using the following JavaScript call:
$("ul.tabs").tabs("div.panes > div");
But, hold on; isn't this the basic code for Scrollable? Well, yes, there are some similarities. But no, this is definitely the code for Tabs! There are some similarities between the two tools, but it is important to note that they are not interchangeable.
This said, it's time to start building our next project.
We're going to use the power of Tab's Slideshow plugin, to build a demo that could be used on a photo gallery website. It's a slideshow styled as a Polaroid, but with some additional functionality. It will use similar images to the Scrollable, but in a different format—one that can easily be put on most websites. Similar effects are used by some well-known companies with an Internet presence.
To begin with, let's get out our text editor. Grab a copy of the template code from the start of this chapter, and add the following lines to create the HTML base:
<div id="caption"></div> <!-- container for the slides --> <div class="images"> <div> <img class="slides" src="images/odontoglossum.jpg" rel="odontoglossum" /> </div> <div> <img class="slides" src="images/forest orchid.jpg" rel="forest orchid" /> </div> <div> <img class="slides" src="images/brassia.jpg" rel="brassia" /> </div> <div> <img class="slides" src="images/paphiopedilum.jpg" rel="paphiopedilum" /> </div> </div> <div id="galprevnext"> <div class="galleft"> <a class="galprevpic hideit"></a> </div> <div class="galright"> <a class="galnextpic hideit"></a> </div> </div> <!-- the tabs --> <div class="slidetabs"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div> <div id="playcontrols"> <img src="play.gif" /> <img src="stop.gif" /> </div>
This can be broken down into five distinct sections, namely the header, the container for the pictures, the gallery controls, the tabs, and finally the player controls.
The next section is the all-important styling—this comes in two parts, beginning with the compulsory code for the Polaroid effect and the slideshow:
<link href=
'http://fonts.googleapis.com/css?family=Cedarville+Cursive'
rel='stylesheet' type='text/css'>
<style type="text/css">
body { padding-left:400px; padding-top: 50px; }
/* container for slides */
.images { border: 1px solid #ccc; position: relative;
height: 450px; width: 502px; float: left; margin: 15px;
cursor: pointer;
/* CSS3 tweaks for modern browsers */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 25px #666;
-webkit-box-shadow: 0 0 25px #666;
box-shadow: 0 0 25px #666; }
/* single slide */
.images div { display: none; position: absolute; top: 0; left: 0;
margin: 3px; padding: 15px 30px 15px 15px;
height: 256px; font-size: 12px; }
/* tabs (those little circles below slides) */
.slidetabs { position: absolute; margin: 350px 600px 0 440px;
width: 100px; }
/* single tab */
.slidetabs a { width: 8px; height: 8px; float: left; margin: 3px;
background: url(navigator.png) 0 0 no-repeat;
display: block; font-size: 1px; color: #fff; }
/* mouseover state */
.slidetabs a:hover { background-position: 0 -8px; }
/* active state (current page state) */
.slidetabs a.current { background-position: 0 -16px; }
/* prev and next buttons */
.forward, .backward { float: left; margin-top: 120px;
background: #fff url(nav.png) no-repeat;
width: 35px; height: 35px;
cursor: pointer; z-index: 2; }
/* next */
.forward { background-position: -36px 0px ; }
.forward:hover,
.forward:active { background-position: -36px -36px; }
/* prev */
.backward:hover,
.backward:active { background-position: 0 -36px; }
/* disabled navigational button. is not needed when tabs
are configured with rotate: true */
.disabled { visibility: hidden !important; }
#caption { color: black; margin-left: 35px; margin-top: 345px;
position: absolute; width: 200px;
font-family: 'Cedarville Cursive', cursive;
font-size: 26px; }
.slides { border-width: 0; height:310px; width:466px; }
</style>
Phew, there's a lot of style code there! Most of it relates to positioning the slides, as well as providing the navigator buttons and caption.
Note
You will see the real power of CSS styling here, as the Polaroid effect is generated entirely using CSS3 code; it is for this reason it won't look so spectacular in older browsers. However jQuery Tools is about using HTML5 (and CSS3), and less for older browsers. You could still get around this by adding the appropriate styles for a suitable background image if desired.
When it came to writing the project for this book, I wasn't entirely happy—I wanted more. It took a little rearranging and tweaking, but finally with some help from a fellow user of jQuery Tools, Mudimo, I managed to put together a little something extra, based on one of his excellent demos.
The first part is to add some buttons to control the slideshow, which replace the standard ones that could be added, that are available from the jQuery Tools site. Add the following in as an additional set of styles:
<style>
#galprevnext { position: absolute; width: 640px; height: 539px; }
.galleftpic, .galrightpic { width: 270px; height: 539px;
cursor: pointer; }
.galleftpic { float: left; }
.galrightpic { float: right; }
.galprevpic, .galnextpic { display: block; position: absolute;
top: 140px; width: 30px; height: 30px;
margin: 0 10px; }
.galprevpic { float: left; background: url(prevnext.png) 0 0
no-repeat; margin-left: 9px; }
.galnextpic { float: right; background: url(prevnext.png)
-30px 0 no-repeat; margin-left: 100px; }
.hideit { visibility: hidden; cursor: arrow; }
.showit { visibility: visible; cursor: pointer; }
#galprevnext a { text-decoration: none; }
#galprevnext a:hover { color: #f00; }
#galprevnext a.current { color: #00f; }
#galprevnext .disabled { visibility: hidden; }
.galleft, .galright { height: 310px; margin-top: 35px;
position: absolute; width: 150px; }
.galleft { margin-left: 35px; }
.galright { margin-left: 360px; }
#playcontrols { clear: both; margin-left: 375px;
margin-top: 350px; padding-right: 40px;
position: absolute; }
</style>
You'll notice that this tries where possible to keep to the standards of abstracting images out of the main code, which is one of the main tenets of jQuery Tools. The second part of his code was to add a little additional jQuery, which alters the CSS style of hideit to showit and back again, depending on whether the mouse is hovering over either of the buttons (the two styles control visibility of the buttons). As a final tweak, we add some additional styling to the player controls, by replacing the original buttons with styled icons, and using a little CSS to place these next to the navigator "dots" just below the pictures.
We move onto the final part of the code, which is to add in the JavaScript required to make this all work. Add this at the bottom of your page:
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
// here is a callback function that is called before the
// tab is clicked
onClick: function(event, tabIndex) {
var str = $("img").eq(tabIndex).attr("rel");
$("#caption").html(str);
}
// use the slideshow plugin, which has its own config
})
.slideshow({
prev: ".galleft",
next: ".galright"
});
});
This is the all-important part of the code—it configures the Tabs effect to use the slideshow plugin, and extract the text from the rel tag in the code, which is used as the caption. Note how, as the next and back buttons use non-default CSS class names, these need to be set in the configuration options for the slideshow plugin, so it knows how to operate correctly.
Remember the two buttons I decided to add in earlier, as extras? The next two sections of code achieve two goals; the first controls the visibility of those two buttons, the second allows you to stop and start the slideshow.
If we take a look at the first section, which controls the visibility—jQuery changes the style from hideit to showit, which in turn alters the visibility from hidden to visible and back again, when hovering over either of the buttons:
$(".galleft").mouseover(function(){
$(".galprevpic").removeClass('hideit').addClass('showit'),
}).mouseout(function(){
$(".galprevpic").removeClass('showit').addClass('hideit'),
});
$(".galright").mouseover(function(){
$(".galnextpic").removeClass('hideit').addClass('showit'),
}).mouseout(function(){
$(".galnextpic").removeClass('showit').addClass('hideit'),
});
We then need to be able to control the playback of the slideshow. We can do this by adding event handlers to both image buttons, like so:
$("#playbutton").click(function(){
$(".slidetabs").data("slideshow").play();
});
$("#stopbutton").click(function(){
$(".slidetabs").data("slideshow").stop();
});
And there you have it, if all is well, you should have something looking like the following screenshot. The tools available in jQuery Tools are all infinitely customizable, this demo is just one small example of what we can possibly achieve within the confines of this book:
