Tabs

In this example we know what tabs we need and their content. We produce them with BootStrap's Tabs.

Tab 1 content goes here.
Content of tab 2 goes here.
References: BootStrap Tabs.

Home


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
     
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
    <h3>Tabs</h3>
    
    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     

    <p>In this example we know what tabs we need and their content. We produce them with BootStrap's Tabs.</p>
    
    <div class="eg">
    
        <!--  The row(s) of tabs. -->
    
        <ul t:id="tabs" t:type="any" class="nav nav-tabs">
            <li class="active">
                <a href="#tab1" data-toggle="tab">Tab 1</a>
            </li>
            <li>
                <a href="#tab2" data-toggle="tab">Tab 2</a>
            </li>
        </ul>
        
        <!-- The contents of each tab. -->
        
        <div class="tab-content">
            <div id="tab1" class="tab-pane active">
                Tab 1 content goes here.
            </div>
            <div id="tab2" class="tab-pane">
                Content of tab 2 goes here.
            </div>
        </div>
        
    </div>
    
    References: 
    <a href="http://getbootstrap.com/components/#nav-tabs">BootStrap Tabs</a>.<br/><br/> 

    <t:pagelink page="Index">Home</t:pagelink><br/><br/>
    
    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/navigation/Tabs.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/navigation/Tabs.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/js.css"/>
    </t:tabgroup>

</body>
</html>



package jumpstart.web.pages.examples.navigation;

import javax.inject.Inject;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;

@Import(stylesheet = "css/examples/js.css")
public class Tabs {

    // Useful bits and pieces

    @Inject
    private JavaScriptSupport javaScriptSupport;

    // The code

    void afterRender() {
        javaScriptSupport.require("bootstrap/tab");
    }

}



.eg {
                margin: 20px 0;
                padding: 14px;
                color: #888;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}

.js-required {
                color: red;
                display: block;
                margin-bottom: 14px;
}

.js-recommended {
                color: red;
                display: block;
                margin-bottom: 14px;
}