">mixi Developer Center (mDC)

mixi Apps

mixi Apps (English) » Technical Specification » PC » Tab Interface

Tab Interface

The display area for a mixi App is not large. Using tabs in the UI improves robust user experience by displaying information in simple and organized manner.


OpenSocial prescribes the ease-of-use tab feature. The tab feature is also supported in the mixi App.

How to Use Tab

In order to use the tab feature in the mixi App, several functionalities prescribed by APIs must be implemented. By implementing these functionalities, the developer is able to set up a tab, register an event handler and customize a style of the tab and so on.

Declaration to Use

OpenSocial prescribes this tab feature with the name “tabs.” In order to enable this feature, the developer should write explicitly declare the use of the tab feature with the Require element in the Gadget XML file.

  <ModulePrefs ...>
    <Require feature="tabs" />

Preparation of DOM Element

First of all, the developer has to create content to be displayed using the tab feature as a DOM element. The following DOM elements are required.

  • A div element for placing a tab
  • At least one div element composing contents of each tab

These elements can be either statically written in the Gadget XML file or dynamically generated by JavaScript. The following shows an example of statically written elements.

<div id="tabs"></div>
<div id="ranking">Here's written the ranking.</div>
<div id="news">Here's written what's new.</div>

Placing Tabs

Following APIs are available to place the tabs:

  • gadgets.TabSet() – Create and control all tabs
  • gadgets.TabSet.addTab() – Add tabs

Based on the example for DOM elements introduced above, sample code for creating tabs is shown below.

var tabs = new gadgets.TabSet(__MODULE_ID__, null, document.getElementById("tabs"));
var ranking = {
  contentContainer: document.getElementById("ranking"),
  callback: function() {
    // do something...
tabs.addTab("Ranking", ranking);
var news = {
  contentContainer: document.getElementById("news"),
  callback: function() {
    // do something...
tabs.addTab("News", news);

Here, a gadgets.TabSet object is created. For the third argument a DOM element indicating the position where the tab is aligned can be specified.

In order to create objects (e.g. ranking and news in the example above) with tab information, following properties can be specified:

  • contentContainer – DOM elements that become the tab content
  • callback – Event handler function called when the tab is selected
  • tooltip – Character string for tool tip help

After creating the objects with these properties, additional tabs can set up by the addTab(). The name to be displayed on the tab can be specified as the first argument, and the objects created above can be specified as the second argument.

By clicking to select any tab, the callback function is called.

Changing Tab Alignment

The gadgets.TabSet.alignTabs() is available to change each tab’s alignment in the entire tab UI.

var tabs = ...;
tabs.alignTabs("left", 5);

“left”, “center”, and “right,” can be specified in strings for the first argument of the alignTabs() and . Moreover, for the second argument, the number of blank space pixels from both sides of the tab UI can be specified.

Information of a Selected Tab

The tab that is selected now can be acquired by API.

var selected = tabs.getSelectedTab();

The information which tab is currently selected is available via the APIs by calling the getSelectedTab() of the gadgets. TabSet object created above. The getSelectedTab() generates a gadgets.Tab object. For example, the developer is able to obtain a function object registered as an event handler by the getCallback() in this object and to explicitly execute the callback function with the following code.

var selected = tabs.getSelectedTab();
var callback = selected.getCallback();

Changing Design

The UI of the tab consists of 3 sections. DOM elements constituting these sections are available by the API.

  • Container with multiple tabs – gadgets.TabSet.getHeaderContainer()
  • Each tab – gadgets.Tab.getNameContainer()
  • Content of tab – gadgets.Tab.getContentContainer()

By manipulating style attributes in the DOM elements obtained by these APIs, the developer is able to customize the tab designs for a mixi App.