WinJS: SplitView and Custom Navigation

First, I would like to thanks the “anonymous” person who requested me if I could give him an example on how to apply navigation to the SplitView.
 
I created a class that allows navigation using the SplitView example given in this link.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App1</title>

    <!--- Download the last version of WinJS --->
    <link href="lib/WinJS_4.3/css/ui-dark.css" rel="stylesheet" />
    <script src="lib/WinJS_4.3/js/base.js"></script>
    <script src="lib/WinJS_4.3/js/ui.js"></script>
    <link href="css/default.css" rel="stylesheet" />

    <!--- This is where the custom NavigationClass will recide ---> 
    <script src="js/navigation.js"></script>

    <script src="js/main.js"></script>

</head>
<body class="win-type-body">
    <div id="app">
        <div class="splitView" data-win-control="WinJS.UI.SplitView">
            <!-- Pane area -->
            <div>
                <div class="header">
                    <button class="win-splitviewpanetoggle"
                            data-win-control="WinJS.UI.SplitViewPaneToggle"
                            data-win-options="{ splitView: select('.splitView') }"></button>
                    <div class="title">
                        <h3 class="win-h3">SplitView Pane Area</h3>
                    </div>
                </div>

                <div class="nav-commands">
                    <!--- Added selector id to identify the menu items --->
                    <div id="menuItemHome" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
                    <div id="menuItemTime" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Time', icon: 'clock'}"></div>
                </div>
            </div>

            <!-- Content area -->
           <!-- added a unique identification to the contentArea" which would be used by our navigation class -->
            <div id="contentArea" class="contenttext">
                <h2 class="win-h2">SplitView Content Area</h2>
            </div>
        </div>
    </div>
</body>
</html>

home.html

<!DOCTYPE html>
<html>
<head>
    <tiutle>Home</title>
</head>
<body>
    <div>Home content</div>
</body>
</html>

time.html

Share