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>
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.
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>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.
I would like to know your suggestions about our First Guest Post. So lets start the discussion. – Nikhil
Author: Salih Gedik