Looking for a solid slider and tab widget for your website? Try jQuery TOOLS Tab and Accordion plug in. I will demonstrate how to use these two jQuery plug-ins to tighten up the look and feel of your website.
You will need to obtain the latest jQuery release and Flowplayer jQuery Tools Tab and Slideshow plugin. You can download the latest version of jQuery and a customized package for jQuery Tools.
I recommend just ticking off the Tabs and Slideshow plugin for now.
Here's a complete HTML page that you can study in how to use the jQuery Tab and Accordion. Please make sure you have the latest jQuery file as this will eliminate configuration problems and save you time. I have found that if you use older version of jQuery (say less than 1.4.2), your widgets won't work. So make sure you got the latest and greatest version.
This example assumes that you will store the HTML demo page on the root of your server. Make sure to adjust your paths accordingly for the buttons in the css portion of the code.
When you have everything setup correctly, you should see something like this when you bring it up with your browser. Go ahead, play with it!
Sesame Street is a children television show in the United States. It broadcast its first show in November 10, 1969 and is one of the longest running educational shows on tv.
The upper widget is a Tab Accordion. This is an excellent widget to help save space on a web page. The idea is, when the user clicks on the sections of the accordion, it closes down the previews view and opens up a new one.
The second widget should be very familiar - the tab group. Like the accordion, it too changes its view when the user clicks on the tab. Panels associated with each tab change to show new information.
Now the complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Tab, Slider, and Accordion Test</title>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").tabs("#accordion div.pane",
{
tabs: 'h2',
effect: 'slide',
initialIndex: 0
});
$("ul..nav-tabs").tabs(".panes .pane");
});
</script>
<style type="text/css">
body {
font-size: 15px;
font-family: georgia, arial, sans-serif;
line-height: 1.2em;
margin: 2em;
}
h1 {
font-size: 2em;
}
#accordion {
width: 380px;
margin-bottom: 1em;
}
#accordion .pane {
padding: 0 1em;
}
#accordion h2.section {
background-color: #cccc99;
color: black;
font-size: 16px;
padding: 4px 8px;
margin: 8px;
}
.nav-tabs {
width: 400px;
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid black;
font-size: 12px;
font-weight: bold;
font-style: Georgia, Verdana, sans-serif;
}
.nav-tabs li {
margin: 0;
display: inline;
}
.nav-tabs li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid black;;
border-bottom: none;
background-color: white;
color: black;
text-decoration: none;
}
.nav-tabs li a:hover {
background-color: red;
color: white;
text-decoration: underline;
}
.panes .video li {
list-type: none;
display: inline;
margin-right: 1em;
}
</style>
</head>
<body>
<h1>jQuery Tools Accordion</h1>
<div id="accordion">
<h2 class="section">About Sesame Street</h2>
<div class="pane" style="display:block">
<p>
Sesame Street is a children television show in the United States. It broadcast its first show in November 10, 1969 and is one of the longest running educational shows on tv.
</p>
</div>
<h2 class="section">Sesame Street Characters</h2>
<div class="pane"">
<ul>
<li>Elmo</li>
<li>Miss Piggy</li>
<li>Kermit</li>
<li>Cookie Monster</li>
</ul>
</div>
<h2 class="section">Elmo Video</h2>
<div class="pane">
<object width="200" height="200">
<param name="movie" value="http://www.youtube.com/v/UZHSDjtD-dg?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/UZHSDjtD-dg?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="200">
</embed>
</object>
</div>
<h2 class="section">Creators</h2>
<div class="pane">
Jim Henson
</div>
</div>
<h1>jQuery Tools Tab</h1>
<ul class="nav-tabs">
<li id="active"><a href="#">News</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Video</a></li>
</ul>
<div class="panes">
<ul class="pane news">
<li>George Bush Gets Hit By Shoe</li>
<li>Halloween 2010: Spooktacular!</li>
<li>SF Giants Beat Colorado Rockies</li>
<li>Oh Say Can You See?</li>
</ul>
<ul class="pane music">
<li>Def Leppard - Photograph</li>
<li>Eddie Money - Shakin'</li>
<li>ACD/DC - Shook Me All Night Long</li>
<li>The Eagles - Hotel California</li>
</ul>
<ul class="pane video">
<li>
<object width="200" height="200">
<param name="movie" value="http://www.youtube.com/v/gqBvNYnAXBw?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/gqBvNYnAXBw?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="200">
</embed>
</object>
</li>
<li>
<object width="200" height="200">
<param name="movie" value="http://www.youtube.com/v/YHROHJlU_Ng?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/YHROHJlU_Ng?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="200">
</embed>
</object>
</li>
</ul>
</div>
</body>
</html>I wanted to show that you not only can save text in each widget but also video as well. You can create nice image galleries as well.
If you are creating HTML pages manually this all should be very straightforward. However, if you are using a Content Management System (CMS), you may have some more work to do. The bulk of the exercise will be in writing database routines to pull in the data and formatting it in a way you can integrate it into the widget's structure.
With Drupal, for example, I wrote some database output routines to grab different content types and generate lists. Then, by echoing these lists into a template page similar to above I can create more interesting, interactive web pages.
