1. Home
  2. Misc
  3. SmartUI Tab Class
This is a tab content #0
THis is a tab content #1

HTML Output (Run Time: 0.0000s)

<div class="tabbable">
    <ul class="nav nav-tabs bordered" >
        <li><a href="#tab1" data-toggle="tab" rel="tooltip" data-placement="top">My Tab</a></li>
        <li class="dropdown">
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" rel="tooltip" data-placement="top">My Tab 2 <b class="caret"></b></a>
            <ul role="menu" class="dropdown-menu">
                <li ><a href="javascript:void(0);">Some action</a></li>
                <li ><a href="javascript:void(0);">Some other action</a></li>
                <li class="divider">-</li>
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="javascript:void(0);">Hover me for more options</a>
                    <ul role="menu" class="dropdown-menu">
                        <li ><a tabindex="-1" href="javascript:void(0);">Second level</a></li>
                        <li class="dropdown-submenu">
                            <a href="javascript:void(0);">Even More..</a>
                            <ul role="menu" class="dropdown-menu">
                                <li ><a href="javascript:void(0);">3rd level</a></li>
                                <li ><a href="javascript:void(0);">3rd level</a></li>
                            </ul>
                        </li>
                        <li ><a href="javascript:void(0);">Second level</a></li>
                        <li ><a href="javascript:void(0);">Second level</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="active"><a href="#tab3" data-toggle="tab" rel="tooltip" data-placement="top">My Tab 3</a></li>
    </ul>
    <div class="tab-content padding-10" >
        <div class="tab-pane" id="tab1">test content</div>
        <div class="tab-pane" id="tab2">Ths is Tab2 content</div>
        <div class="tab-pane in active" id="tab3">this is Tab3 content</div>
    </div>
</div>
<hr class="simple" />

SmartUI::Tab Class

This is a basic usage of SmartUI's Tab class. If you want to know more about the real HTML layout, click here

SmartUI::Tab($tabs [, $options = array()])

$tabs

The $tabs parameter will initiate the number of tabs displayed. You can pass either an assoc array that contains tab ids or just an array(not recomended) hense ids will be the zero base index number.

$tabs = array(
    'my-tab-1' => array(
        'content' => '',
        'title' => 'Tab 1',
        'icon' => '',
        'dropdown' => '',
        'position' => '',
        'active' => false,
        'fade' => false
    ),
    'my-tab-2' => array(
        'content' => '',
        'title' => 'Tab 2',
        'icon' => '',
        'dropdown' => '',
        'position' => '',
        'active' => false,
        'fade' => false
    )
    // so on ...
)

// or ...
$tabs = array(
    'my-tab-1' => 'Tab 1', // value acts as the 'title' property
    'my-tab-2' => 'Tab 2',
    // so on ...
);

// or ...
$tabs = array('Tab 1', 'Tab 2'); // tab #0 and #1 as ids

Setup

$ui = new SmartUI;

$mytabs = array(
    'my-tab-1' => 'Tab 1',
    'my-tab-2' => 'Tab 2'
);

$tab = $ui->create_tab($mytabs);

Usage

$tab->content('my-tab-1', 'This is the content of my tab 1');
$tab->content('my-tab-2', 'This is the content of my tab 2');

Print it!

$tab->print_html();

Property Reference

Below are the list of available properties for the class:

Tab::tab

An array. The list of tabs (provided upon creation of SmartUI::Tab)

$tab->tab('my-tab-1', array('content' => 'The content of this tab'));

// or ...
$tab->tab('my-tab-1', 'My Tab 1'); // set as tab's 'title' property

Tab::content

An array or closure of tabs with their content property.

$tab->content = array(
    'my-tab-1' => 'This is the content of my tab 1'
);

// or ...
$tab->content('my-tab-1', 'This is the content of my tab 1');

// or even closure with callback (optional)
$tab->content('my-tab-1', function($this, $tabs) {
    return 'This is the content of my tab and I am coding some stuff here to return';
}, function($this) {
    // your callback code here ...
})

Below other properties that are using the same setup as Tab::content property

Tab::icon

Tab::title

Tab::dropdown

This one uses SmartUI::print_dropdown function. You can either pass an array of the dropdown's format or pure HTML string. Passing a closure needs you to return either array or HTML string

$dropdown_items = array(
    '<a href="javascript:void(0);">Some action</a>',
    '<a href="javascript:void(0);">Some other action</a>',
    '-',
    '<a href="javascript:void(0);">Some action below separator</a>'
);
$tab->dropdown('my-tab-2', $dropdown_items);

Tab::position

Tab::content_id

A string - id attribute of <div class="tab-content ... " ... > ... </div>

Tab::tabs_id

A string - id attribute of <ul class="tabs ... " ... > ... </div>

Tab::options

An array - options available for the class

$options = array(
    'bordered' => true,
    'position' => '',
    'pull' => '',
    'padding' => 10,
    'widget' => false
);

// sample call
$tab->options('bordered', true);