PHP: Easy Tabs for your webpages

PHP: Easy Tabs for your webpages

Mon, 04/21/2008 - 14:44 — jondale

Easy tabs is a short and simple php class that makes it very easy to have tabbed dialogs in your webpages.

Usage

$tabs = new tabs("mytabs");
 
	$tabs->start("Tab1");
	// Tab1's content goes here....
	$tabs->end();
 
	$tabs->start("Tab2");
	// Tab2's content goes here...
	$tabs->end();
 
$tabs->run();

Examples

Here we just create 3 tabs and put some text in each one.

include("tabs.php");
 
$tabs = new tabs("example1");
 
        $tabs->start("Tab #1");
        echo "This is tab number one.<br/>";
        $tabs->end();
 
        $tabs->start("Tab #2");
        echo "This is tab number two.<br/>";
        $tabs->end();
 
        $tabs->start("Tab #3");
        echo "This is tab number three.<br/>";
        $tabs->end();
 
$tabs->run();

View Example or Download Source




For a bit of a more complicated example, we use the forms class from a previous article to put some simple forms in each tab.

include("tabs.php");
include("forms.php");
 
function Form1_Button1_Clicked(&$data,&$error){
        $error .= "You clicked button 1 on Form 1!<br/>";
        return true;
}
 
function Form2_Button1_Clicked(&$data,&$error){
        $error .= "You clicked button 1 on Form 2!<br/>";
        return true;
}
 
 
$tabs = new tabs("example2");
 
        $tabs->start("Form 1");
                $form = new form("form1");
                        $element = new form_element_text("field1","Field 1","This is field 1");
                        $form->add($element);
                        $element = new form_element_text("field2","Field 2","This is field 2");
                        $form->add($element);
                        $element = new form_button("Button 1","Form1_Button1_Clicked");
                        $form->add($element);
                $form->run();
                if ($form->submitted){ $tabs->active = "Form 1"; }
        $tabs->end();
 
        $tabs->start("Form 2");
                $form = new form("form2");
                        $element = new form_element_text("field1","Field 1","This is field 1");
                        $form->add($element);
                        $element = new form_element_text("field2","Field 2","This is field 2");
                        $form->add($element);
                        $element = new form_element_text("field3","Field 3","This is field 3");
                        $form->add($element);
                        $element = new form_button("Button 1","Form2_Button1_Clicked");
                        $form->add($element);
                $form->run();
                if ($form->submitted){ $tabs->active = "Form 2"; }
        $tabs->end();
 
$tabs->run();

View Example or Download Source

Download

If you would like to use Easy Tabs you can download and include the tabs.php file below.

Also included is a sample tabs.css file to get you started on styling it to fit your website.