How to Create Simple Tabs using YUI

YUI This is a Guest Post by Salih Gedik. If you also have great ideas and are interested in writing one for us then you are most welcome. Click here for the details about submitting the Guest Post.

Hello!, YUI is basically Yahoo User Interface. This UI library is based on Java Script. You can create UI applications as easy as pie with the help of this YUI. As the name suggests it is developed by the Yahoo Team. So lets start the fun coding!!

Step 1: Download Required Files

The first step is to download the files from Yahoo. Following are the files which you have to download

Step 2: Adding files to your Project

Now create new project using your favorite editor and add the following code in the <head>

[sourcecode language=’css’]

[/sourcecode]

Note: The downloaded files should be in root folder otherwise you have to give full path of location of the file under src=”__” and href=”__”

Step 3: Getting into the Code

Now we are getting into the actual code. Take a look at following code.

[sourcecode language=’css’]

Server Side
Client Side

ul>

CSS

HTML

JavaScript

PHP

ASP

Python

RUBY

[/sourcecode]

Here we are using <class=”yui-skin-sam”> which gives beautiful look to our project. Yes this provides the skin from the YUI to our project.

<div class=”yui-navset” id=”tabornegi”> If you are using YUI skin then class must be yui-navset while the id can be anything.

<ul class=”yui-nav”> Now we are adding Titles to out Tabs.

<li><a href=”#ss”><em>Server Side</em></a></li> Each tab should be included in <li></li>

<li class=”selected”><a href=”#cs”><em>Client Side</em></a></li> If you are having multiple tabs and would like to show 1st or 2nd tab, you have to set class=”selected”.

<div class=”yui-content”> Time to add some contents to the Tabs.

<div><p><li>CSS</li><li>HTML</li><li>JavaScript</li></p></div> It is important that the div’s quantity and li’s quantity should be same. So that first div’s value = first li’s content. Here we have to li’s, Server Side and Client Side so two div’s; this one and below one.

<div><p><li>PHP</li><li>ASP</li><li>Python</li><li>RUBY</li></p></div> These are the contents of second tab.

That’s it you are done! Enjoy your Tabs now…

Thanks for reading.

Demo

Download Source Code

I would like to know your suggestions about our First Guest Post. So lets start the discussion. – Nikhil

Incredible online testking 642-813 training programs & 70-667 help you in pass 642-617 exam regarding 640-721 dumps. We offer best quality 156-315.65 exam training tools for your success.

Author: Salih Gedik

He is 14 years young programmer from Istanbul. He started programming with JavaScript since he was 10. He is experienced in PHP, ASP, Python, C/++, Basic and beginner level 80X86, JAVA. You can follow him at @salihgedik