画面を切り替える際に、現実には default.html に DIV のウインドウを作成して置き換え続けて画面が切り替わります。置き換え先の HTML に JavaScript を配置して jQuery の $(function()) を実行しても最初しかロードされないので、default.htmlに全てを見渡せるスクリプトを書く必要があります。 ここでは、navigated イベントに集中して記述しています。 default.html
<!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>
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.19.custom.css" />
<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.19.custom.min.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:'', section: 'global', onclick: R101.navigateHome},
{id:'play', label:'ゲーム', icon:'', section: 'global', onclick: R101.navigateGame},
{id:'rules', label:'ルール', icon:'', section: 'global', onclick: R101.navigateRules},
{id:'scores', label:'スコア', icon:'', section: 'global', onclick: R101.navigateScores},
{id:'credits', label:'クレジット', icon:'', section: 'global', onclick: R101.navigateCredits}
]}"></div>
</body>
</html>
default.js ▼ JavaScript のコード
(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) {
nav.navigate("/html/homePage.html");
Debug.writeln("初期処理");
} else {
}
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');
}
}
if (ev.detail.location == "/html/homePage_light.html") {
$(function () {
$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 1500,
value: 750,
slide: function (event, ui) {
$("#amount").val(ui.value);
}
});
Debug.writeln("slider2");
$("#amount").val($("#slider-vertical").slider("value"));
});
}
});
}, 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) {
};
app.start();
WinJS.Namespace.define("R101", {
navigateHome: navigateHome,
navigateGame: navigateGame,
navigateRules: navigateRules,
navigateScores: navigateScores,
navigateCredits: navigateCredits
});
})();
homePage_light.html ※ jQuery が実装される画面の定義です
<!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 class="win-backbutton"></button>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
<div id="slider-vertical" style="margin-top:20px;width:10px;height:200px;"></div>
</div>
</section>
</div>
</body>
</html>
|
|
【Windows8 Metro(JS/C#)の最新記事】
- Win8(JS Metro)の『分割･･･』テンプレートにアプリバーを追加して、新しいページを定義する
- Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル
- Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法
- 『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味
- Windows8(JavaScript Metro Style) 関連リンク
- Windows8 で SkyDrive にアップロードするサンプル
- Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行
- Windows8 Metro(JS) でのカメラの利用は簡単ですが、まだ製品版では無いせいか他の処理と同時に動かすと、問題もあるようです
- Windows8 Metro(JS) で Three.js の 3D モデル表示(Canvas)を行う
- Google ドキュメントを使ってソースコード配布と解説
- 余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移
- querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード
- Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します
- Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います
- Win8 Metro(JS) : 印刷処理
- Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)
