Horizontal Tab

  • Demo

    Although in software engineering, we make a lot of fuss about requirements, the fact is that especially for mass-market products, you have to continuously test with customers whether new features and functionality is moving a product, service or solution closer to its platonic ideal.

    This requires a fundamental shift in how we think about product development. We refer to that new model as “R&D as an innovation experiment systems”.

    Testing with customers needs to take place before and after the deployment of a product or service. Also, it can be applied to new products, new features as well as to optimize the implementation of existing features. In the table below, we show the different stages and types of experiment-driven development as well as some example techniques that can be applied to collect data.

    Definition and Usage

    The tab = "defaultvertical" attribute defines a horizontal tab, in the anchor tag <a> href = "#firstTab" you would need to specify the id of the div that has relative content of the tab/link. The content for the tabs need to be enclosed in a div and add an attribute container = "tab" to it. This should be placed just below the horizontal tab as shown in the example below. Add class=”active” to define the active tab.

    Add class=”active” to define the active tab.

    <ul tab = "defaulthorizontal" id="h1" >
    <li ><a href="#firstTab" class="active" >Tab Sample 1</a></li>
    <li><a href="#secondTab">Tab Sample 2</a></li>
    </ul>
    <div container = "tab">
    <div id="firstTab"><p>Add tab 1 content here</p></div>
    <div id="secondTab"><p>Add tab 2 content here</p></div>
    </div>
  • HTML Controls

    Panels

    Collapseble Panel (Collapsed) Collapseble Panel (Expanded) Static Panel

    Tabs

    Horizontal Tab (Ajax) Vertical Tab (Ajax) Horizontal Tab Vertical Tab

    Pop Up

    Modal Popup (Header = true) Modal Popup Modal Popup (BIG data)