Login   Register  
PHP Classes
elePHPant
Icontem

File: tabs_example.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  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: 4 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>