Skip to content

Single Document Application

Kris Erickson edited this page Jan 21, 2014 · 1 revision

1. Create some pages in index.html

<div id="home">
    <div class="topcoat-navigation-bar">
        <div class="topcoat-navigation-bar__item center full">
            <h1 class="topcoat-navigation-bar__title">Example</h1>
        </div>
    </div>
    <h1>Hey Ma It Works!<h2>
    <button data-rel="page2">I Link to Page 2</button>
</div>
<div id="page2">
    <div class="topcoat-navigation-bar">
        <div class="topcoat-navigation-bar__item left quarter">
            <a class="topcoat-icon-button--quiet back-button" href="#">
                <span class="topcoat-icon topcoat-icon--back"></span>
            </a>
        </div>
        <div class="topcoat-navigation-bar__item center half">
            <h1 class="topcoat-navigation-bar__title">Page 2</h1>
        </div>
        <h1>I'm Page 2</h1>
    </div>
</div>

2. Initialize topcoat touch.

Initialize the topcoat touch in your app.js.

$(document).ready(function() {
    var tt = new TopcoatTouch();
    tt.goTo('home');
});

3. Run your app in the browser...

4. For more information, check out the Single Document Example Application