I create a new project using navigation template. After creating page page.html, page1.html and page2.html, i try to use winjs .navigation.navigate to switch between page. However, when i try to navigate to the page i pass before, the program just stop and
cannot navigate anymore. Here are the code for all my tryout.
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</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/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<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" onclick="changepage()">Welcome to App5!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<p>Content goes here.</p>
</section>
</div>
</body>
</html>
home.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
//WinJS.Navigation.navigate("./pages/page.html");
}
});
})();
function changepage() {
console.log("go to page");
WinJS.Navigation.navigate("./pages/page.html");
}
page.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
WinJS.UI.Pages.define("/pages/page.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
//WinJS.Navigation.navigate("./pages/page1.html");
}
});
function changepage() {
console.log("go to page 1");
WinJS.Navigation.navigate("./pages/page1.html");
}
</script>
</head>
<body>
<p onclick="changepage()">page1 page1page1page1page1page1page1page1page1page1page1page1</p>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
WinJS.UI.Pages.define("/pages/page1.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
//WinJS.Navigation.navigate("./pages/home/home.html");
var text = document.getElementById("text");
}
});
function changepage() {
console.log("go page 2");
WinJS.Navigation.navigate("./pages/page2.html");
}
</script>
</head>
<body>
<p id="text" onclick="changepage()">safsal;gmksa;lgmsa;lmgf;lsamf;lsamf;lsamg;lsamg;lasmg;lsamg;lasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
WinJS.UI.Pages.define("/pages/page2.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
//WinJS.Navigation.navigate("./pages/home/home.html");
var text = document.getElementById("text");
}
});
function changepage() {
console.log("back to page");
WinJS.Navigation.navigate("./pages/page.html");
}
</script>
</head>
<body>
<p id="text" onclick="changepage()">page 2 page 2 page2 page2s</p>
</body>
</html>
