Win8: Create a navigation app using a template

Check: http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx

Create a new project and select the navigation app as the template. Directory after creation:

 

• Default.html. This is the start page. It is first loaded. It contains an instance of pagecontrolnavigator (loading each page to the main window.
• Home.html. This is the home page. It displays the "welcome" title.

• Default. JS: Specifies the behavior of the application when the application is started.
• Home. JS, which specifies the behavior associated with the home page.
• Navigator. JS, which can implement the pagecontrolnavigator object. This object supports the navigation model of Metro-style JavaScript templates.

 

• Default.css: Specifies the CSS style for the content body page and the application.
• Home.css: Specifies the CSS style for the home page.

 

Defaul.html is just like home.html in a container.

<DivID= "Contenthost"Data-win-control= "Application. pagecontrolnavigator"Data-win-Options= "{Home: '/pages/home/home.html '}"> </Div>
 

In the pages directory, add the page2 and add item directories and select page control. Generate page2.html, page2.js, and page2.css. Page2.js predefines some functions for you, including ready, unload, and updatalayout. You can arrange what you need in page2.

The following page appears. You are in home.html:

<! --A hyperlink to page2.html.--><P> <AHref= "/Pages/page2/page2.html">Go to page 2.</A> </P>
 

In this case, defaul is replaced with page2,

What we want is:

To achieve this, we need to useWinjs. Navigation. navigated.

In home. JS

// 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. utilities. query (""). listen ("click", linkclickeventhandler, false); // bind handler}); function linkclickeventhandler (eventinfo) {eventinfo. preventdefault (); // block the default jump var link = eventinfo.tar get; winjs. navigation. navigate (link. href );}})();
 

 

You can also jump through the button, check: http://msdn.microsoft.com/zh-cn/library/windows/apps/hh920268.aspx

In home.html

<ButtonClass= "Navbutton"Title= "Nav" >Next Page</Button>
 

Home. js

Winjs. UI. pages. Define ("/pages/home/home.html",{//...Ready:Function(Element, options ){//...}, Nextpage:Function() {Winjs. Navigation. navigate ("/Pages/page2/page2.html");}});
 

Continue to add in ready of home. js

Ready:Function(Element, options ){//Todo: Initialize the fragment here.VaRELEM = element. queryselector ('. navbutton'); ELEM. addeventlistener ('Click ',This. Nextpage. BIND (This));}
 

Done!

 

 

 

 

This completes the demo of using the template to create the navigation interface.