Powered byBlog Widgetand shared by JUNIAWAN89

Membuat Tab dengan JQuery

Tab dengan JQuery

Berikut kode untuk membuat Tab dengan JQuery :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="sunny/jquery-ui-1.8.9.custom.css">
<script type="text/javascript" src="jscript/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jscript/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(function() {
/*$('#info').tabs();*/
$('#info').tabs({ event: 'mouseover',
fx: {
opacity: 'toggle',
duration: 'slow'
},
spinner: 'Loading...',
cache: true
});

/*$('#info').tabs().tabs('rotate', 3500);
$("#info p a[href=about.html]").click(function() {
$('#info').tabs('select', 1);
return false;
});*/
});
</script>
</head>
<body>
<div id="info">
<ul id="info-nav">
<li><a href="#intro">Intro</a></li>
<li><a href="about.html">About StarTrackr!</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
</ul>
<div>
<div id="intro"> Welcome to <strong>StarTrackr!</strong> the planet's premier. The functionality we'll implement will degrade gracefully in the absence of Java-Script; those tabs will simply act as links to the referenced files. When JavaScript is enabled, however, jQuery will load the content of the target page into the tab content pane without refreshing the page.</p>
<div id="intro"><a href="about.html">open about tab</a></p>
</div>
</div>
</body>
</html>


Jika dijalankan tampilan nya sebagai berikut :


Download code lengkap disini

Selesai...
Semoga Bermanfaat....









Previous
Next Post »

Pengunjung yang baik selalu memberikan masukan / komentar.... ConversionConversion EmoticonEmoticon

Popular