PHP Classes
elePHPant
Icontem

File: tabs_example.php

Recommend this page to a friend!
  Classes of kobinski_  >  jQuery tabs  >  tabs_example.php  >  Download  
File: tabs_example.php
Role: Example script
Content type: text/plain
Description: Example of jquery_tabs usage
Class: jQuery tabs
Generate HTML to display tabs using jQuery.
Author: By
Last change:
Date: 6 years ago
Size: 1,622 bytes
 

Contents

Class file image Download
<?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>