Home Ajax Jquery jQuery To Slide Effects tabs
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

jQuery To Slide Effects tabs

Advertisement
In this JQuery tutorial we will develop a program to make Custom tabs

jQuery To Slide Effects tabs

     

In this JQuery tutorial we will develop a program  to make Custom  tabs 

Steps to develop the simple tabs .

Step 1:

 

 

 

Create a new file (customTab.html) and add the following code into it:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Tabs</title>

<script src="script/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="script/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="script/jquery.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

$('#div-1').tabs({ fxSlide: true });

});
</script>

<link rel="stylesheet" href="style/tab.css" type="text/css" media="print, projection, screen">


</head>
<body>


<h2>Simple Tabs</h2>

<div id="div-1">
<ul>
<li><a href="#T-1"><span>One</span></a></li>
<li><a href="#T-2"><span>Two</span></a></li>
<li><a href="#T-3"><span>Three</span></a></li>
</ul>
<div id="T-1">
<p>First tab</p>

</div>
<div id="T-2">
Second Tab
</div>
<div id="T-3">
Third Tab
</div>
</div>



</body>
</html>

Program explanation:

The following code includes the jQuery JavaScript library file:

<script src="script/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="script/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="script/jquery.tabs.pack.js" type="text/javascript"></script>

The Style Css library file

<link rel="stylesheet" href="style/tab.css" type="text/css" media="print, projection, screen">:

The Code

$('#div-1').tabs({ fxSlide: true })

 This tabs(fxSlide: true) function  having attributes "fxSlide" if set "true" then it slide the Tab of

"div-1" having fragments id "T-1","T-2","T-3" is working.

 

 Output:

 

Check online demo of the application

 

 

 

 

Learn from experts! Attend jQuery Training classes.

 

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 8, 2008

Related Tutorials

Ask Questions?    Discuss: jQuery To Slide Effects tabs   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
personal loans
October 8, 2011
answer this topic

Every one remembers that men's life is not cheap, however we require cash for various things and not every one gets enough money. Thus to get some loan or just financial loan should be a right solution.
DMCA.com