Using tabs

The Tabs widget provides a familiar tabbed interface.

The Tabs widget provides a familiar tabbed interface.

Visual appearance

The tab strip supports the display of a styled text label on each tab. The selected tab is indicated by its label having no visible border. Optionally, you can specify MCS image policies to be used for the tabs, and provide tab-like image policies for 'selected' and 'unselected' states. Authors are responsible for providing correct tab-like images. The title of the tab content must be used as the alternative text for each image.

User interactions

A user can click on a tab label to select a different tab than the one currently displayed.

XDIME 2 elements

The widget:tabs element defines a container for one or more widget:tab elements.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:tabs</title>
    <style type="text/css">
      #firstTab::mcs-label {
        content: 'Tab1';
      }
      #firstTab::mcs-label:active {
        font-weight: bold;
      }
      #secondTab::mcs-label {
        content: 'Tab2';
      }
      #secondTab::mcs-label:active {
        font-weight: bold;
      } 
    </style>
  </head>
  <body>
    <widget:tabs>
      <widget:tab id="firstTab">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non mi.</p>
      </widget:tab>
      <widget:tab id="secondTab">
        <p>Vivamus nisl pede, pellentesque sed, sagittis at, tincidunt vitae, ligula.</p>
      </widget:tab>
    </widget:tabs>
  </body>
</html>

You can use the widget:load action to load the content of a tab from a specified URL.

Note:

The when attribute of a widget:load element is ignored and the content is loaded when requested by clicking on a tab label.

<widget:tab>
  <widget:load src="ajax-tab-response.xdime"/>
    <p>This content will be changed by the AJAX request</p>
  </widget:tab>
</widget:tabs>

The following example shows widget update with content of the second tab. Refer to Widget response structure for further information.

<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response">
  <response:head/>
  <response:body>
    <response:tab>
      <p>This content was updated by the Ajax request</p>
    </response:tab>
  </response:body>
</response:response>

Supported style properties

The mcs-initial-state property can be use to specify whether a tab is initially active.

The pseudo-element ::mcs-label represents the tab label. The label may be text or an image. You can control the color of the line between the tab strip and tab content area by using the border-bottom-color property of the tab area.

Non-client fallback

If a device does not support the tabs widget, all tabs that have their contents specified in-line are rendered vertically, with the label rendered first. All tabs that use deferred AJAX loading are ignored. If the widget:tab::mcs-label pseudo-element uses image components as tab labels, they are ignored as well.

JavaScript

This widget supports JavaScript. Refer to JavaScript support for details.

Related topics