Tabs

nav

Tabs

Example
HTML code 
<DIV class='nav-tabs'>
    <DIV class='nav-tabs__tabs'>
        <UL class='nav-tabs__tabs'>
            <UL class="nav-tabs__tabs">
                <LI class="nav-tabs__tab" value="">
                    <A href="ui/element/tabs?tabActive=">
                        <I class="fa fa-app-preferences">
                        </I>
                        <H4>Tab</H4>
                    </A>
                </LI>
                <LI class="nav-tabs__tab is-active" id="active" value="active">
                    <A href="ui/element/tabs?tabActive=active">
                        <H4>Active</H4>
                    </A>
                </LI>
            </UL>
        </UL>
    </DIV>
</DIV>
Type molecule
Group nav
Todo
Tyylejä: Outline, colors ?
description: välilehdessä nkyvä teksti
justified: Tasaleveyiset tabsit
content: Määrittele sisältä, toggle visibility
ajax content: Load when activated
menu: open subtabs

setMainClass(string) | this | Set classname for UL
setOpenClass(string) | this | Set classname for LI that is open

Poista vanhat: valilehti, windowsTabs.
More examples

All
Documentation

Array

PHP

Wrapper to use element through PHP

Extends eUiElement
Render html
Create arguments link, name, value
Methods
Method name Description
addTab(title, value, url) Add new tab
addTabs(array) Add multiple tabs
isActive(value) Return true, if tab is active.
Code example

Only Url and tabs title texts

Sets default parameter: &tabActive=tab_1

$Tabs = $this->get('ui', 'tabs', 'workspace/uutiset')
  ->addTab('First tab')
  ->addTab('Second tab');

if ( $Tabs->isOpen('tab_1') ){
    // tab_1 is currently active
}

Parameters as arguments

$Tabs = $this->get('ui', 'tabs', 'workspace/noticeboard', 'tabActive', $tabActive, 1)
  ->addTab('First tab', 'first')
  ->addTab('Second tab', 'second');

All parameters as array

Set parameters with initial array.

$Tabs = $this->get('ui', 'tabs', Array(
    'link'        => 'workspace/noticeboard',
    // 'name'       => 'tabActive',
    // 'value'      => $tabActive,  // As default, reads from $_REQUEST[$name]
    // 'default'    => 'tab_1',     // Default: First tab
    'tabs'       => Array(
        Array(
            'title' => 'Title'
            // 'value'  Default: 'tab_' + index
            // 'link' Uses Tabs link + tab value
        ),
        Array(
            'title'  => 'Title2',
            'icon'   => 'paperclip',
            'value'  => 'tab_2',
            'link'   => 'workspace/noticeboard?tabActive=title_2',
            'tooltip' => 'Show me on hover'
        )
    )
));

Javascript

Wrapper to use element through Javascript

Methods
Method name Description
newTab(data) Add new tab and return it.
addTab(data) Add new tab and return Tabs.
getTab(name) Return the Tab element by given name.
getTabs() Return all Tab elements.
openTab(value) Open tab with given value.
isOpen(name) Return TRUE, if given tab is open
Code example

Basic example

var Tabs  = cms.get('ui', 'tabs',{
  tabs: [{
    icon: 'app-info',
    title: 'Tab',
    content: 'Tab content'
  }]
});

Tabs.addTab({
  icon: 'app-info',
  title: 'Link',
  link: gotoThisURl
});

Tabs.addTab({
  icon: 'app-info',
  title: 'Onclick action',
  onclick: function(){
    // Do something
  }
});

Tabs all parameters

var Tabs  = cms.get('ui', 'tabs', {
    style: 'justified',
    value: 'tab_name',
    contentTarget: selector // Element, that tab contents are inserted. Dedault: After tabs.
});

Tabs.addTab({
  name: 'tab_name', // default: tab1
  open: false, // IS taken from tabs.value, if given
  icon: 'app-info',
  title: 'Info',
  style: 'right', // float tab to right
  tooltip: 'Tooltip text',
  content: 'Show this as content when tab open',
  form: false, // Wrap content with FORM tag
  link: '', // Url to goto when clicked
  onclick: function (){} // Run when tab is clicked
  onopen: function(){}   // Run when tab is opened
  onclose: function(){}  // Run when tab is closed
});

Tab item methods

All method of tab item

var Tab  = Tabs.getTab('ab_name);

Tab.isOpen(); // Returns TRUE, if currently open.
Tab.open(); // Set open
Tab.close(); // Close
Tab.elemContent(); // jQuery element of tab content.
Tab.setContent(data); // Set data as ele,ent content

Styles

Elements Css style

justified
stacked