ＳＱＬの窓
<< IE 兼用背景 Fade t… | TOP | Win8(JS Metro)の『… >>

2012年06月27日


Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法

 
元となる記事

『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味

新しいページは、新しい HTML と JS を作成して、items.html のタイトルの横から呼び出したいと思います
新しい items.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>itemsPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">分割</span>
                <button id="newpage">新しいページ</button>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>


items.js では、items.html の定義である、WinJS.UI.Pages.define が実行されているので、その初期処理部分である『ready』で新しく追加したボタンのイベントを作成し、新しいページの呼び出し処理である、WinJS.Navigation.navigate を実行しています。この際、第一引数には URL を指定しますが、第二引数には新しいページへと引き渡す JSON をオブジェクトをセットしています

新しいページの HTML 記述(hello.html)


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

    <!-- WinJS references -->
    <link rel="stylesheet" type="text/css" href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>

    <div style="padding:20px;">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
    </header>
        こんにちは

    </div>
    

</body>
</html>


新しいページは何も定義はしていませんが、唯一『戻るボタン』を配置する際にルールがあると思って下さい。これし、navigator.js に書かれている、『header[role=banner] .win-backbutton』というセレクタに合わせる必要があるということです。この条件に合わせることで、ナビゲートのコントロールはほぼ、navigator.js が行います。

あとは、hello.js で、このページの定義を行う事で全体が正しく動作します


(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var binding = WinJS.Binding;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;

    ui.Pages.define("/pages/hello/hello.html", {

        // この関数は、ユーザーがこのページに移動するたびに呼び出されます。
        // ページ要素にアプリケーションのデータを設定します。
        ready: function (element, options) {
            Debug.writeln(JSON.stringify(options, null, "   "));
        },
        unload: function () {
            
        }
    });
})();


▼ JSON.stringify による options出力内容です

{
   "param1": "自動的に",
   "param2": "ページのオプションとして ready イベントへ"
}
【Windows8 Metro(JS/C#)の最新記事】
posted by lightbox at 2012-06-27 13:42 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり