SOURCE CODE: Tabbed Interface
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Tabbed Interface | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widget.Options.Tabbed"/>
  <meta name="description" content="Add tabbed interfaces to your own Web pages. See how in this example. Some test links are provided to demo the programmatic interface of this widget."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.tabs.css"/>
  <link rel="stylesheet" href="css/tabbed-interface.css"/>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Tabbed Interface
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/tabbed-interface.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, the markup for a tabbed interface is being wired up by an instance of <a href="../reference/Uize.Widget.Options.Tabbed.html"><code>Uize.Widget.Options.Tabbed</code></a>. Below the tabs are some links that execute snippets of code to demonstrate the programmatic interface of the widget. Because the tabs widget is a subclass of <a href="../reference/Uize.Widget.Options.html"><code>Uize.Widget.Options</code></a>, it provides a <code>value</code> state property in its interface. The <code>Changed.value</code> instance event for this property can be used to watch for changes in the selected tab. The property can be set to programmatically change the selected tab. Interact with both the tabs UI and the test links to see how they affect one another.</p>
  </div>

  <!-- tabs UI -->

  <div class="tabShell">
    <div class="tabStubShell">
      <a id="page_tabs_option0" class="tabStub" href="javascript://">SOLAR</a>
      <a id="page_tabs_option1" class="tabStub" href="javascript://">WIND</a>
      <a id="page_tabs_option2" class="tabStub" href="javascript://">GEOTHERMAL</a>
      <a id="page_tabs_option3" class="tabStub" href="javascript://">EFFICIENCY</a>
      <a id="page_tabs_option4" class="tabStub" href="javascript://">TIDAL</a>
      <br style="clear:left;"/>
    </div>
    <div class="tabBodyShell">
      <div id="page_tabs-option0TabBody" class="tabBodyInactive">
        SOLAR
      </div>
      <div id="page_tabs-option1TabBody" class="tabBodyInactive">
        WIND
      </div>
      <div id="page_tabs-option2TabBody" class="tabBodyInactive">
        GEOTHERMAL
      </div>
      <div id="page_tabs-option3TabBody" class="tabBodyInactive">
        EFFICIENCY
      </div>
      <div id="page_tabs-option4TabBody" class="tabBodyInactive">
        TIDAL
      </div>
    </div>
  </div>

  <!-- programmatic interface examples -->

  <div class="programmaticInterface">
    <p><b>tabs.get ('value') == </b>'<span id="page-tabsValue"></span>'</p>
    <p><b>tabs.get ('tentativeValue') == </b>'<span id="page-tabsTentativeValue"></span>'</p>
    <p>
      <b>Set the value for the tabs widget: </b>
      <a href="javascript://" class="linkedJs">tabs.set ({value:'solar'})</a>
      &nbsp;,&nbsp;
      <a href="javascript://" class="linkedJs">tabs.set ({value:'wind'})</a>
      &nbsp;,&nbsp;
      <a href="javascript://" class="linkedJs">tabs.set ({value:'geothermal'})</a>
      &nbsp;,&nbsp;
      <a href="javascript://" class="linkedJs">tabs.set ({value:'efficiency'})</a>
      &nbsp;,&nbsp;
      <a href="javascript://" class="linkedJs">tabs.set ({value:'tidal'})</a>
    </p>
  </div>
</div>

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Options.Tabbed'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** add the tabs child widget ***/
      var tabs = page.addChild (
        'tabs',
        Uize.Widget.Options.Tabbed,
        {
          bodyClassActive:'tabBodyActive',
          bodyClassInactive:'tabBodyInactive'
        }
      );

    /*** some code for demonstrating the widget's programmatic interface ***/
      tabs.wire ({
        'Changed.value':
          function () {page.setNodeInnerHtml ('tabsValue',tabs)},
        'Changed.tentativeValue':
          function () {page.setNodeInnerHtml ('tabsTentativeValue',tabs.get ('tentativeValue'))}
      });

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** initialize the tabs widget's values ***/
      tabs.set ({
        values:['solar','wind','geothermal','efficiency','tidal'],
        value:'solar'
      });
  }
);

</script>

</body>
</html>