<?php
require("jquery_tabs.inc.php"); //include the class
$tabs = new jquery_tabs("tabsmyid"); //creates the object. the param is the id of the tabs div
//$html1 is the content of the tab 1
$html1 = '
<h2>Tab 1 header</h2>
<p>Tab 1 content</p>
';
$tabs->add_tab("tab1_id","Tab1 Title",$html1); //it creates a tab with the id tab1_id, with title "Tab 1 Title" and the content of the $html1 variable
//$html1 is the content of the tab 1
$html2 = '
<h2>Tab 2 header</h2>
<p>Tab 2 content</p>
';
$tabs->add_tab("tab2_id","Tab2 Title",$html2); //it creates a tab with the id tab2_id, with title "Tab 2 Title" and the content of the $html2 variable
?>
<html>
<head>
<!-- include the necessary js files -->
<script type="text/javascript" src="http://jqueryui.com/jquery-1.4.1.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<!-- this makes the div with id "tabsmyid" a jqueryUI tabs widget -->
<script type="text/javascript">
$(function(){
$("#tabsmyid").tabs();
});
</script>
<!-- and the stylesheet of jqueryUI -->
<link type="text/css" href="http://jqueryui.com/themes/base/ui.all.css" rel="stylesheet" />
</head>
<body>
<?php
// this prints the html for tabs, with all div and ul tags
echo $tabs->html();
//And thats it! All done.
?>
</body>
</html>
|
Download
