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
- 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.
I would like to know your suggestions about our First Guest Post. So lets start the discussion. – Nikhil
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
Loading ...
Tabs
Great post, I was looking for somthing to help me get started with YUI and this did it. thanks =]
thans ofr the pots