windows 8 metro app 实现div切换的做法

windows 8 metro app 实现div切换的做法

1.引用sdk，每一个demo中都有

 THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
 ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
 THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
 PARTICULAR PURPOSE.

 Copyright (c) Microsoft Corporation. All rights reserved

/// <reference path="winjs/js/base.js" />
/// <reference path="winjs/js/ui.js" />
/// <reference path="winjs/js/wwaapp.js" />
/// <reference path="HTMLElement.js" />

var sdkSample = {};

(function () {
    var scenarios = null;
    var placeHolderImageSource = "images/placeholder-sdk.png";
    var lastError = "";
    var lastStatus = "";
    sdkSample.placeHolderImageSource = placeHolderImageSource;
    sdkSample.scenarioSelection = true;

    function selectScenario(id) {
        var output = document.querySelector("#scenario" + id + "Output");
        var input = document.querySelector("#scenario" + id + "Input");

        if (!output) {
            displayError("Sample Configuration Error: Unable to find element with id = scenario" + id + "Output");
            return;
        }

        if (!input) {
            displayError("Sample Configuration Error: Unable to find element with id = scenario" + id + "Input");
            return;
        }

        sdkSample.scenarioId = id;
        scenarios.selectedIndex = parseInt(id) - 1;
        resetInputOutput();
        displayError("");

        input.className = "item shown";
        output.className = "item shown";
    }
    sdkSample.selectScenario = selectScenario;

    function resetInputOutput() {
        var items = document.querySelectorAll("#input .item, #output .item");
        for (var i = 0, len = items.length; i < len; i++) {
            items[i].className = "item";
        }
    }

    function displayStatus(message) {
        showMessage(message, false);
    }
    sdkSample.displayStatus = displayStatus;

    function displayError(message) {
        showMessage(message, true);
    }
    sdkSample.displayError = displayError;

    function showMessage(message, isError) {
        var statusDiv = /* @type(HTMLElement) */ document.getElementById("statusMessage");
        if (!statusDiv) {
            statusDiv = /* @type(HTMLElement) */ document.getElementById("errorMessage");
        }
        if (statusDiv) {
            statusDiv.innerText = message;
            if (isError) {
                lastError = message;
                statusDiv.style.color = "blue";
            } else {
                lastStatus = message;
                statusDiv.style.color = "green";
            }
        }
    }

    function getLastError() {
        return lastError;
    }
    sdkSample.getLastError = getLastError;
    
    function getLastStatus() {
        return lastStatus;
    }
    sdkSample.getLastStatus = getLastStatus;
    
    function clearLastError() {
        lastError = "";
    }
    sdkSample.clearLastError = clearLastError;
    
    function clearLastStatus() {
        lastStatus = "";
    }
    sdkSample.clearLastStatus = clearLastStatus;

    function applicationStateCheckpoint() {
        // The checkpoint event gives us the chance to save application state.
        // In this case, we are saving the current scenario id.
        if (sdkSample.scenarioSelection) {
            WinJS.Application.sessionState.selectedScenarioId = sdkSample.scenarioId;
        }
    }

    function applicationActivated() {
        // If there is a scenario id saved in the application's session state, let's use it,
        // otherwise, select the first scenario. WinJS makes sure that the session state
        // is loaded only when the application was previously suspended and terminated.
        if (sdkSample.scenarioSelection) {
            var lastScenarioId = WinJS.Application.sessionState.selectedScenarioId || "1";
            selectScenario(lastScenarioId);
        }
    }

    function initialize() {
        WinJS.Application.start();
        WinJS.Application.addEventListener("checkpoint", applicationStateCheckpoint, false);
        WinJS.Application.addEventListener("activated", applicationActivated, false);

        // Make the details container in the input panel selectable so that end-developers
        // can copy and paste the text
        var detailsContainer = document.querySelector("#input .details");
        if (detailsContainer) {
            detailsContainer.setAttribute("data-win-selectable", true);
        }

        scenarios = /*@static_cast(HTMLSelectElement)*/document.getElementById("scenarios");

        scenarios.addEventListener("change", 
            /*@static_cast(EventListener)*/function (e) {
                selectScenario(scenarios.options[scenarios.selectedIndex].value);},
            false);
        
        selectScenario("1");

        // Add sdk sample header
        var header = document.getElementById("header");
        if (Boolean(header)) {
            var logo = document.createElement("img");
            var title = document.createElement("span");
            logo.src = "images/windows-sdk.png";
            logo.alt = "Windows Logo";
            title.innerText = "Windows 8 SDK Samples";
            
            header.appendChild(/*@static_cast(Node)*/logo);
            header.appendChild(/*@static_cast(Node)*/title);
        }

        // Add sdk sample footer
        var footer = document.getElementById("footer");
        if (Boolean(footer)) {
            var footerLogo = document.createElement("img");
            var footerText = document.createElement("div");
            var links = document.createElement("div");
            var company = document.createElement("div");
            var companyText = document.createElement("span");
            var terms = document.createElement("a");
            var pipe = document.createElement("span");
            var trademarks = document.createElement("a");
            var privacy = document.createElement("a");

            footerLogo.src = "images/microsoft-sdk.png";
            footerLogo.alt = "Microsoft";
            company.className = "company";
            companyText.innerText = "© 2011 Microsoft. All rights reserved.";
            terms.innerText = "Terms of use";
            terms.href = "http://www.microsoft.com/About/Legal/EN/US/IntellectualProperty/Copyright/default.aspx";
            trademarks.innerText = "Trademarks";
            trademarks.href = "http://www.microsoft.com/About/Legal/EN/US/IntellectualProperty/Trademarks/EN-US.aspx";
            privacy.innerText = "Privacy Statement";
            privacy.href = "http://privacy.microsoft.com";
            links.className = "links";
            pipe.className = "pipe";

            links.appendChild(/*@static_cast(Node)*/terms);
            links.appendChild(/*@static_cast(Node)*/pipe);
            links.appendChild(/*@static_cast(Node)*/trademarks);
            links.appendChild(/*@static_cast(Node)*/pipe.cloneNode(true));
            links.appendChild(/*@static_cast(Node)*/privacy);

            company.appendChild(/*@static_cast(Node)*/companyText);
            footerText.appendChild(/*@static_cast(Node)*/company);
            footerText.appendChild(/*@static_cast(Node)*/links);

            footer.appendChild(/*@static_cast(Node)*/footerLogo);
            footer.appendChild(/*@static_cast(Node)*/footerText);
        }
    }

    document.addEventListener("DOMContentLoaded", initialize, false);
})();

// Adding sdkSample to document to enable usage by the test framework
document.sdkSample = sdkSample;

window.onerror = /* @static_cast(ErrorFunction) */ function (msg, url, line) { sdkSample.displayError("Error: " + msg + " url = " + url + " line = " + line); };

2.在页面上定义ui

        <div id="content">
            <h1 id="featureLabel">
                App Bar Sample</h1>
            <h2 id="inputLabel">
                Input</h2>
            <div id="input" role="main" aria-labelledby="inputLabel">
                <div class="options">
                    <h3 id="listLabel">
                        Select scenario:</h3>
                    <select size="5" id="scenarios" aria-labelledby="listLabel">
                        <option selected="selected" value="1">1) Enable an App Bar</option>
                        <option value="2">2) Enable a manual App Bar</option>
                        <option value="3">3) Show a persistent App Bar</option>
                        <option value="4">4) Enable two App Bars that time out</option>
                        <option value="5">5) Show and hide elements</option>
                    </select>
                </div>
                <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
                    <h3 id="descLabel">
                        Description:</h3>
                    <!-- Scenario 1 Input -->
                    <div class="item" id="scenario1Input">
                        <p>
                            The app bar is hidden by default and appears when users swipe a finger from the
                            top or bottom edge of the screen. It covers the content of the application and can
                            be dismissed by the user with an edge swipe, or by interacting with the application.</p>
                        <button id="scenario1action" class="action">
                            Enable</button>
                        <br />
                        <br />
                    </div>
                    <!-- Scenario 2 Input -->
                    <div class="item" id="scenario2Input">
                        <p>
                            If your application offers features that require interaction with non-selectable
                            content, such as painting on a canvas, set the app bar to manual mode by turning
                            off light dismiss. In this mode, application interaction does not dismiss the bar.
                            The user is in complete control of when the commands show or hide.</p>
                        <button id="scenario2action" class="action">
                            Enable</button>
                    </div>
                    <!-- Scenario 3 Input -->
                    <div class="item" id="scenario3Input">
                        <p>
                            If you have more than a few commands that are necessary for a user to complete an
                            experience, put them on an app bar in persistent mode instead of the canvas. Set
                            the app bar to persistent mode by turning off transience and light dismiss. In this
                            mode, the bar is always visible and cannot be dismissed by the user.</p>
                        <button id="scenario3action" class="action">
                            Show</button>
                    </div>
                    <!-- Scenario 4 Input -->
                    <div class="item" id="scenario4Input">
                        <p>
                            If your application offers commands that are used to control full-screen content
                            such as movie playback, set your App Bar to time out after a short period of time
                            so that the user can perform commands and then consume the content without needing
                            to manually dismiss the App Bar.</p>
                        <p>
                            This example also shows the use of an App Bar at the top of the screen. If your
                            application has a view where the content is full-screen with no on-canvas navigation,
                            then you may also place a back button and title in an app bar at the top of the
                            screen.</p>
                        <button id="scenario4action" class="action">
                            Enable</button>
                    </div>
                    <!-- Scenario 5 Input -->
                    <div class="item" id="scenario5Input">
                        <p>
                            If you add or remove commands from your App Bar when the user changes the context
                            of the current view of your application, animate those commands onto and off of
                            the App Bar.</p>
                        <p>
                            In this example, selecting a photo will display the commands that can be performed
                            on the selected photo. Deleting the photo or deselecting the photo will clear the
                            selection and hide the contextual commands.</p>
                        <p>
                            The commands in this scenario show different customization examples. The Library
                            command uses a PNG sprite instead of a font glyph for the icon. The Favorite command
                            can be toggled on and off. The Pin command can be toggled between pinned and unpinned
                            states.
                        </p>
                        <button id="scenario5SelectButton" class="action">
                            Select Photo</button>
                    </div>
                </div>
            </div>
            <div class="clear">
            </div>
            <h2 id="outputLabel">
                Output</h2>
            <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
                <div id="statusMessage">
                </div>
                <!-- Scenario 1 Output -->
                <div class="item" id="scenario1Output">
                </div>
                <!-- Scenario 2 Output -->
                <div class="item" id="scenario2Output">
                </div>
                <!-- Scenario 3 Output -->
                <div class="item" id="scenario3Output">
                </div>
                <!-- Scenario 4 Output -->
                <div class="item" id="scenario4Output">
                </div>
                <!-- Scenario 4 Output -->
                <div class="item" id="scenario5Output">
                </div>
            </div>
        </div>
     

由于sdk中对由于value变化而产生的函数已经写好，如此每当点击list的时候，我们便可切换Description中的内容