javascript
Win10系列：JavaScript页面导航
頁面導航是在開發應用的過程中使用頻率較高的技術，其中比較常用的導航方式有多頁導航和頁內導航，采用多頁導航方式的應用程序包含一系列的頁面，在一個頁面中加入另一個頁面的鏈接地址后，單擊鏈接將跳轉到指定頁面，從而實現頁面之間的導航。而頁內導航方式是在一個頁面內根據需要加載其他頁面，使用頁內導航方式的應用程序仍然包含一系列的頁面，不同的是，這些頁面是順序被加載到一個選定的頁面區域中，而不是從一個頁面跳轉到另一個頁面。在傳統的網站開發中，通常使用多頁導航的方式，在開發基于JavaScript的Windows應用商店應用時多采用默認的頁內導航方式。在本節內容中，將首先講解兩種加載頁面的方法，然后介紹如何實現頁內導航。
19.2.1 頁面加載
在開發基于JavaScript的Windows應用商店應用時，可以使用HtmlControl和PageControl控件加載一個頁面，這兩個WinJS庫控件曾在上面的內容中提到過，HtmlControl控件接收一個包含頁面地址的對象作為參數，并根據這個地址加載相應的頁面；PageControl控件是自定義控件，可以使用WinJS.UI.Pages.define函數將一個頁面定義為PageControl控件，然后在其他頁面中使用，使用這個PageControl控件就相當于加載了該控件相對應的頁面。下面首先介紹如何使用HtmlControl控件加載一個頁面。
（1）HtmlControl控件
在開發Windows應用商店應用時，有時候需要在一個頁面中的某個位置顯示另一個頁面的內容，這時可以使用HtmlControl控件。HtmlControl控件具有一個名為"uri"的屬性，該屬性的值為被顯示頁面的地址，通過賦予該屬性不同的值，可以在HtmlControl控件所在的位置加載不同的頁面。
使用HtmlControl控件加載頁面的方式如下：首先在一個HTML頁面中添加一個HtmlControl控件，然后將HtmlControl控件的uri屬性設置為被加載的地址。代碼片段如下所示：
<body>
<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/contentpage.html'}"></div>
</body>
在上面的代碼中，在一個HTML頁面的body元素下定義了一個div元素，通過將div元素的data-win-control屬性設置為WinJS.UI.HtmlControl，添加了一個HtmlControl控件，接著使用data-win-options屬性設置HtmlControl控件的uri屬性，其中"/contentpage.html"是被加載頁面的地址。
（2）PageControl控件
PageControl控件是一種自定義控件，可以將一個頁面的內容和邏輯功能定義成一個PageControl控件，然后通過在其他頁面中添加這個PageControl控件來加載相應的內容，使用PageControl控件可以方便地在其他不同頁面中重用一個被定義好的頁面內容。下面通過一個示例介紹如何定義和使用PageControl控件。
在Visual Studio 2012中新建一個JavaScript的Windows應用商店的空白應用程序項目，將其命名為ContentLoader，在項目中新建一個名為ContentPage的文件夾，并在這個文件夾下添加一個"頁面控制"項，命名為ContentPage，添加完成之后ContentPage文件夾會包含三個文件，名稱分別為ContentPage.html、ContentPage.js、ContentPage.css。
首先在ContentPage.html文件中布局應用的前臺界面，打開ContentPage.html文件，可以發現body元素內已經默認包含了導航按鈕、頁面標題等內容，刪除body元素內的代碼然后添加一個按鈕和一個畫布，畫布作為一個圖形容器，當點擊按鈕時將在畫布上繪制一個圖形。代碼片段如下所示：
<body>
<button id="ShowRectangleButton">顯示矩形</button><br /> <br />
<canvas id="ContentCanvas"></canvas>
</body>
完成前臺界面的布局之后，接下來實現ContentPage.html頁面的邏輯功能。打開ContentPage.js文件可以發現，文件內已經默認包含了一個匿名函數，匿名函數中調用了WinJS.UI.Pages.define函數，用于創建一個PageControl控件。下面定義一個名為contentPageControl的變量，將WinJS.UI.Pages.define函數的返回值賦予該變量，用于在HTML頁面中添加PageControl控件時使用。在ready函數內為id屬性為"showRectangleButton"的元素添加click事件處理函數ShowRectangleButton_Click，代碼片段如下所示：
var contentPageControl = WinJS.UI.Pages.define("/ContentPage/ContentPage.html", {
ready: function (element, options) {
var showRectangleButton = document.getElementById("ShowRectangleButton");
showRectangleButton.addEventListener("click", ShowRectangleButton_Click);
}
});
在上面的代碼中，調用define函數之后將函數的返回值賦給contentPageControl變量，define函數接收了兩個函數參數，一個參數為ContentPage.html頁面的地址，另一個參數是一個對象，這個對象有一個ready函數，表示當頁面準備就緒之后要做的邏輯處理，在ready函數內調用document對象的getElementById函數獲取id屬性值為ShowRectangleButton的元素對象，并為元素對象注冊了單擊事件處理函數ShowRectangleButton_Click。
下面實現ShowRectangleButton_Click函數，用于在ContentPage.html頁面的畫布中繪制一個矩形，代碼片段如下所示：
function ShowRectangleButton_Click(eventInfo) {
var contentCanvas = document.getElementById('ContentCanvas');
var canvasContext = contentCanvas.getContext('2d');
canvasContext.fillStyle = '#FF0000';
canvasContext.fillRect(0, 0, 90, 100);
}
上面的代碼調用document對象的getElementById 函數獲得id屬性值為ContentCanvas的元素對象，賦值給contentCanvas變量，并通過contentCanvas變量調用元素對象的getContext函數以"2d"為參數得到用于2D繪圖的對象，賦值給canvasContext變量，接著使用canvasContext變量調用對象的fillStyle屬性設置填充顏色，并調用fillRect函數向畫布繪制一個矩形。
PageControl控件的定義包含在ContentPage.js文件的匿名函數內，由于匿名函數中定義的變量為局部變量，不能直接使用在項目的其他文件中，為此在ShowRectangleButton_Click函數的后面定義一個命名空間，以便通過命名空間引用PageControl控件。代碼片段如下所示：
WinJS.Namespace.define("ContentPage", {
pageControlName: contentPageControl
});
在上面的代碼中，調用WinJS.Namespace.define函數定義了一個命名空間ContentPage，在命名空間中添加了一個名為pageControlName的成員，將其值設置為前面定義的PageControl控件contentPageControl。
以上的過程實現了一個PageControl控件，接下來介紹如何在default.html頁面中使用PageControl控件。打開項目中的default.html文件，在文件的head元素內引用ContentPage.js文件，代碼片段如下所示：
<script src="/ContentPage/ContentPage.js"></script>
引用ContentPage.js文件之后，在default.html文件的body元素中添加一個h2和一個div元素，h2元素用于顯示default.html頁面的標題，div元素用于定義PageControl控件，代碼片段如下所示：
<body>
<h2>default頁面</h2>
<div data-win-control="ContentPage.pageControlName"}"></div>
</body>
在上面的代碼中，通過將div元素的data-win-control屬性設置為命名空間ContentPage下的pageControlName成員，添加一個PageControl控件。
啟動調試，應用程序界面上顯示"default頁面"文本和"顯示矩形"按鈕，單擊"顯示矩形"按鈕，將在按鈕的下方顯示一個紅色的矩形，如圖19-7所示：
圖19-7 運行效果圖
轉載于:https://www.cnblogs.com/finehappy/p/6645353.html
總結
以上是生活随笔為你收集整理的Win10系列：JavaScript页面导航的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5在线音乐列表播放器,HTML5
- 下一篇： 电商大数据分析案例(Hadoop+Hiv