Membuat Tab dengan JQuery
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>
Berikut kode untuk membuat Tab dengan JQuery :
<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....