Zebra API Doc

zebra.ui.Tabs Class

Extends zebra.ui.Panel

Tabs UI panel. The component is used to organize switching between number of pages where every page is an UI component.

Filling tabs component with pages is the same to how you add an UI component to a panel. For instance in the example below three pages with "Titl1", "Title2", "Title3" are added:

 var tabs = new zebra.ui.Tabs();
 tabs.add("Title1", new zebra.ui.Label("Label as a page"));
 tabs.add("Title2", new zebra.ui.Button("Button as a page"));
 tabs.add("Title3", new zebra.ui.TextArea("Text area as a page"));

You can access tabs pages UI component the same way like you access a panel children components

...
tabs.kids[0] // access the first page

And you can remove it with standard panel inherited API:

...
tabs.removeAt(0); // remove first tab page

To customize tab page caption and icon you should access tab object and do it with API it provides:

   // update a tab caption
   tabs.getTab(0).setCaption("Test");

   // update a tab icon
   tabs.getTab(0).setIcon("my.gif");

   // set a particular font and color for the tab in selected state
   tabs.getTab(0).setColor(true, "blue");
   tabs.getTab(0).setFont(true, new zebra.ui.Font("Arial", "bold", 16));

   // set other caption for the tab in not selected state
   tabs.getTab(0).setCaption(false, "Test");

Constructor

zebra.ui.Tabs

(
  • [o]
)

Parameters:

  • [o] Integer | String optional

    the tab panel orientation:

     zebra.layout.TOP   or "top"
     zebra.layout.BOTTOM or "bottom"
     zebra.layout.LEFT or "left"
     zebra.layout.RIGHT or "right"

Methods

drawMarker

(
  • g
  • r
)

Draw currently activate tab page marker.

Parameters:

  • g 2DContext

    a graphical context

  • r Object

    a tab page title rectangular area

enableTab

(
  • i
  • b
)

Set enabled state for the given tab page

Parameters:

  • i Integer

    a tab page index

  • b Boolean

    a tab page enabled state

getTab

(
  • pageIndex
)
zebra.ui.Tabs.TabView

Get the given tab. Using the tab you can control tab caption, icon.

Parameters:

  • pageIndex Integer

    a tab page index


getTabAt

(
  • x
  • y
)
Integer

Get tab index located at the given location

Parameters:

  • x Integer

    a x coordinate

  • y Integer

    a y coordinate


Return: Integer

an index of the tab that is detected at the given location. -1 if no any tab can be found

getTabBounds

(
  • i
)
Object protected

Get the given tab page title rectangular bounds

Parameters:

  • i Integer

    a tab page index


Return: Object

a tab page rectangular bounds

{x:{Integer}, y:{Integer}, width:{Integer}, height:{Integer}}

isTabEnabled

(
  • index
)
Boolean

Test if the given tab page is in enabled state

Parameters:

  • index Integer

    a tab page index


Return: Boolean

a tab page state

keyPressed

(
  • e
)

Define key pressed event handler

Parameters:

mouseClicked

(
  • e
)

Define mouse clicked event handler

Parameters:

mouseDragEnded

(
  • e
)

Define mouse drag ended event handler

Parameters:

mouseExited

(
  • e
)

Define mouse exited event handler

Parameters:

mouseMoved

(
  • e
)

Define mouse moved event handler

Parameters:

next

(
  • page
  • d
)
Integer

Navigate to a next tab page following the given direction starting from the given page

Parameters:

  • page Integer

    a starting page index

  • d Integer

    a navigation direction. 1 means forward and -1 means backward navigation.


Return: Integer

a new tab page index

paintTab

(
  • g
  • pageIndex
)

Paint the given tab page title

Parameters:

  • g 2DContext

    a graphical context

  • pageIndex Integer

    a tab page index

recalc

()

Define recalc method to compute the component metrical characteristics

select

(
  • index
)

Switch to the given tab page

Parameters:

  • index Integer

    a tab page index to be navigated

setAlignment

(
  • o
)

Set the tab page element alignments

Parameters:

  • o Integer | String

    an alignment. The valid value is one of the following: zebra.layout.LEFT, zebra.layout.RIGHT, zebra.layout.TOP, zebra.layout.BOTTOM or "left", "right", "top", bottom

setSideSpace

(
  • sideSpace
)

Set tab side spaces.

Parameters:

  • sideSpace Integer

    [description]

setViews

(
  • a
)

Set number of views to render different Tab component elements

Parameters:

  • a Object

    set of views as dictionary where key is a view name and the value is a view instance, string(for color), or render function. The following view elements can be passed:

    {
       "tab"    : <view to render not selected tab page>,
       "tabover": <view to render a tab page when mouse is over>
       "tabon"  : <a view to render selected tab page>
       "marker" : <a marker view to be rendered around tab page title>
    }

Attributes

canHaveFocus

Boolean readonly

Declare can have focus attribute to make the component focusable

orient

Integer readonly

Tab orientation

selectedIndex

Integer readonly

Selected tab page index

sideSpace

Integer readonly

Sides gap

Default: 1

Events

selected

Fired when a new tab page has been selected

 tabs.bind(function (src, selectedIndex) {
    ...
 });

Event Parameters:

  • src zebra.ui.Tabs

    a tabs component that triggers the event

  • selectedIndex Integer

    a tab page index that has been selected