ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Windows8 Metro(JS) ページ変更
日時: 2012/04/25 18:34
名前: lightbox



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <title>Application2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <!-- Application2 references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="contentHost"></div>
    <div
        id="appbar"
        data-win-control="WinJS.UI.AppBar"
        aria-label="Command Bar"
        data-win-options="{
        commands:[
        {id:'home', label:'メニュー', icon:'&#xE10F;', section: 'global', onclick: R101.navigateHome},
        {id:'play', label:'ゲーム', icon:'&#xE102;', section: 'global', onclick: R101.navigateGame},
        {id:'rules', label:'ルール', icon:'&#xE104;', section: 'global', onclick: R101.navigateRules},
        {id:'scores', label:'スコア', icon:'&#xE113;', section: 'global', onclick: R101.navigateScores},
        {id:'credits', label:'クレジット', icon:'&#xE10C;', section: 'global', onclick: R101.navigateCredits}
    ]}"></div>

</body>
</html>
メンテナンス

default.js ( No.1 )
日時: 2012/04/25 18:35
名前: lightbox


日時: 2012/04/25 18:35
名前: lightbox
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var nav = WinJS.Navigation;

    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize 
                // your application here.

                nav.navigate("/html/homePage.html");
                Debug.writeln("初期処理");

            } else {
                // TODO: This application has been reactivated from suspension. 
                // Restore application state here.
            }
            WinJS.UI.processAll();
        }
    };

    WinJS.Navigation.addEventListener("navigated", function (ev) {
        Debug.writeln("navigated");
        Debug.writeln(ev.detail.location);
        var target = document.querySelector("#contentHost");
        WinJS.Utilities.empty(target);
        WinJS.UI.Fragments.render(ev.detail.location, target).then(function () {

            var backButton = document.querySelector(".win-backbutton");
            if (backButton) {
                backButton.addEventListener('click', function () {
                    WinJS.Navigation.back();
                }, false);
                if (WinJS.Navigation.canGoBack) {
                    backButton.removeAttribute('disabled');
                }
                else {
                    backButton.setAttribute('disabled', 'true');
                }
            }

        });


    }, false);

    function navigateHome() {
        Debug.writeln("メニュー");
        document.getElementById("appbar").winControl.hide();
    }
    function navigateGame() {
        Debug.writeln("ゲーム");
        document.getElementById("appbar").winControl.hide();
    }
    function navigateRules() {
        Debug.writeln("ルール");
        document.getElementById("appbar").winControl.hide();
    }
    function navigateScores() {
        Debug.writeln("スコア");
        nav.navigate("/html/homePage.html");
        document.getElementById("appbar").winControl.hide();
    }
    function navigateCredits() {
        Debug.writeln("クレジット");
        document.getElementById("appbar").winControl.hide();
        nav.navigate("/html/homePage_light.html");
    }


    app.oncheckpoint = function (eventObject) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the 
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // eventObject.setPromise(). 
    };

    app.start();
    WinJS.Namespace.define("R101", {
        navigateHome: navigateHome,
        navigateGame: navigateGame,
        navigateRules: navigateRules,
        navigateScores: navigateScores,
        navigateCredits: navigateCredits
    });

})();

このアーティクルの参照用URLをクリップボードにコピー メンテナンス
homePage.html ( No.2 )
日時: 2012/04/25 18:36
名前: lightbox
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
    <link rel="stylesheet" href="/css/homePage.css" />
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homePage">
        <header role="logo" aria-label="Game logo">
            <div role="logo" />
        </header>
        <section role="menu" aria-label="Game menu">
            <div class="menu-buttons">
                <button role="menuitem" aria-label="Play game" id="playMenuItem"><span class="menu-icon">&#xE102;</span>ゲーム開始</button><br />
                <button onclick="R101.navigateRules();" role="menuitem" aria-label="Rules" id="rulesMenuItem"><span class="menu-icon">&#xE104;</span>ルール</button><br />
                <button role="menuitem" aria-label="High scores" id="scoresMenuItem"><span class="menu-icon">&#xE113;</span>ハイスコア</button><br />
                <button role="menuitem" aria-label="Credits" id="creditsMenuItem"><span class="menu-icon">&#xE10C;</span>クレジット</button>
            </div>
        </section>
    </div>
</body>
</html>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
homePage_light.html ( No.3 )
日時: 2012/04/25 18:37
名前: lightbox
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
    <link rel="stylesheet" href="/css/homePage.css" />
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homePage">
        <header role="logo" aria-label="Game logo">
            <div role="logo" />
        </header>
        <section role="menu" aria-label="Game menu">
            <div class="menu-buttons">
                <button role="menuitem" aria-label="Play game" id="playMenuItem"><span class="menu-icon">&#xE102;</span>ゲーム開始 2</button><br />
                <button role="menuitem" aria-label="Rules" id="rulesMenuItem"><span class="menu-icon">&#xE104;</span>ルール</button><br />
                <button role="menuitem" aria-label="High scores" id="scoresMenuItem"><span class="menu-icon">&#xE113;</span>ハイスコア</button><br />
                <button role="menuitem" aria-label="Credits" id="creditsMenuItem"><span class="menu-icon">&#xE10C;</span>クレジット</button><br />
                <br />
                <button class="win-backbutton"></button>
            </div>
        </section>
    </div>
</body>
</html>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス