Create A Tabbed Interface Using jQuery

0
Part A – ‘Vanilla’ Tabbed UI

This is one of the most common uses for a tabbed interface:

vanilla

Creating tabbed interfaces suddenly becomes a piece-of-cake when using the Tabs function in the jQuery UI library. It can be utilized to create completely unique interfaces without having to be a coding God – using only one line of code!




Step 1 – The Basics

In order to create our jQuery effects later in this tutorial, you will first need
the latest jQuery library, and
jQuery UI
with the ‘Core’ and ‘Tabs’ elements. If you’d prefer, you can
take these files from this tutorial’s source files.

Place these two files in a directory on your server. Also create the following files:

  • index.html
  • style.css
  • sprinkle.js

index.html will be for your HTML, style.css for the page styling
in CSS and sprinkle.js for our jQuery animations.

Inside index.html, lets open the document:










Here, we set our DOCType to XHTML 1 Transitional, and import our CSS and JS files.

Be sure to change ‘jquery-1.2.6.min.js’ and ‘jquery-ui-personalized-1.5.2.packed.js’


if your jQuery files have a different file name.





 



Step a.1 – The HTML


Between the <body> tags in our index file, type the following:



    


We begin by opening a DIV element with the ID of ‘tabvanilla’ and class of ‘widget’.

The ID will be used by jQuery in order to identify the area it should effect, and


the class is there for ease-of-use when styling.



Next is an unordered list with the Class of ‘tabnav’. The list contains the three

different tab names, each with a link in the style of “#xxxxx”. This is important


as these will be the IDs of the sections following.



The following div has an ID of ‘popular’, this matches with the link in the tabs

above. A ‘recent’ and ‘featured’ DIV is also included. These sections are what will


be shown/hidden by jQuery when the corresponding link it selected.



Depending on what content you have, you should have something like this:





Let’s make it look a little nicer, shall we?



Step a.2 – Styling


Add the following to your style.css file. It will be explained below.



    * {
margin: 0;
padding: 0;
}

body {
font-size: 75%;
color: #222;
background: #ffffff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

.widget {
width: 310px;
margin: 20px;
padding: 10px;
background: #f3f1eb;
border: 1px solid #dedbd1;
margin-bottom: 15px;
}

.widget a {
color: #222;
text-decoration: none;
}

.widget a:hover {
color: #009;
text-decoration: underline;
}

.tabnav li {
display: inline;
list-style: none;
padding-right: 5px;
}

.tabnav li a {
text-decoration: none;
text-transform: uppercase;
color: #222;
font-weight: bold;
padding: 4px 6px;
outline: none;
}

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
background: #dedbd1;
color: #222;
text-decoration: none;
}

.tabdiv {
margin-top: 2px;
background: #fff;
border: 1px solid #dedbd1;
padding: 5px;
}

.tabdiv li {
list-style-image: url("star.png");
margin-left: 20px;
}

.ui-tabs-hide {
display: none;
}



  • * – Removes browser-set defaults for margins & padding.


  • body – Adds some basic text styling.


  • .widget – – A little bit of colour for distinguishing


    the Tab areaa.


  • .widget a – Link styling.


  • .tabnav li – Displays the list in a ‘inline’ (horizontal)


    manner. Gives a bit of padding between them.


  • .tabnav li a – This helps the tabs stand out from any


    other content.


  • .tabdiv – Gives the ‘content’ section a bit more style


    to separate it from the tabs.


  • .tabdiv li – Adds a custom image for lists inside the


    ‘content’ area. The star.png file can be downloaded from this tutorial’s


    source files.


  • .ui-tabs-hide – jQuery will apply a class of ‘ui-tabs-hide’

    to div’s not in use. This sets it so they will not display when jQuery tells it

    to.





You should now have something like the following:





It’s not going to win any design awards, but it’s the functionality we’re interested

in; so let’s dive into the jQuery.



Step a.3 – A Sprinkle of jQuery


Basically, jQuery allows the user to change the styling of elements on the page

in real-time. So in our case, we want jQuery to hide all elements inside of ‘div#tabvanilla’


except the one which corresponds with the tab which has been selected.



Open sprinkle.js and insert the following:



$(document).ready(function() {
$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});

THAT’S IT! But what does it mean?

$(document).ready(function() {


This line says “When the document is ready, do the following…” – ‘ready’


means when the very basics of the page has loaded (ie. Just the raw html); it will


not wait for images and video like if you used ‘onload’ instead.



$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });


This tells the browser to look out of a ul list inside of an element


with the ID of tabvanilla, and to use the tabs


function to interact with. We also define two animation effects (fx:)


– toggling the height and opacity. This will cause the area to “fade and slide”


when switching tabs.



Give it a try. You should now have something similar to the image below; with a

smooth animation when switching tabs.





Part B – Video Selector


This is where you can really see bigger effects done using the same code. Next,

we’ll create a simple ‘Video Selector’ that can been seen in quite a few WordPress


templates recently.





Step b.1 – The HTML


Following on from the previous interface, add the following in your index.html


file.



    


We begin by creating another ‘.widget’ div, but this time with the ID of ‘featuredvid’

(it’s important it has a different ID, as this is what jQuery uses to distinguish


tab sections from each other).



Next, we have three ‘.fvid’ divs with their own unique IDs. Inside each, is the

embed code for a video.



Finally, at the bottom is our ‘.vidselector’ list which will act as our Tabs. As

in the previous example, each list item’s link corresponds with one of the div’s


IDs.



You should have something similar to this:





Step b.2 – Styling


In the style.css file, following on from the CSS in our previous example,


insert the following:



    #featuredvid {
text-align: center;
}

.fvid {
margin-bottom: 5px;
}

.vidselector li {
text-align: left;
list-style: none;
padding: 5px;
background: #ffffff;
border: 1px solid #dedbd1;
text-transform: uppercase;
margin-bottom: 5px;
}



  • .vidselector li – Creates the boxed effect for the video


    link to go in.





Step b.3 – A Sprinkle of jQuery


Inside sprinkle.js, add the following before the line containing });


from the previous example.



$('#featuredvid > ul').tabs();


This tells your browser to use the tabs function to interact with the ul list inside

the #featuredvid element. We aren’t defining any animation effects this time as


due to the nature of the content in these boxes (video), effects tend not to work


very well.



One problem that occurs with this effect is that Internet Explorer will not pause

the video in a tab when you switch to another – causing the sound to continue playing


the background. This does not happen in Firefox, Opera or Safari.





Summary


Hopefully this tutorial has shown you that much more can be done with basic jQuery

functions than you initially thought. Check

out the official documentation for jQuery UI/Tabs
.

Labels:
Loading related posts...
Reactions: 

0 comments:

Post a Comment

2010 WEBSITE20. All rights reserved.