首頁 > 開發者 > JavaScript
標籤：應用 lis 檔案夾 應用程式 如何 局部變數 開發 傳統 其他
頁面導航是在開發應用的過程中使用頻率較高的技術，其中比較常用的導航方式有多頁導航和頁內導航，採用多頁導航方式的應用程式套件組合含一系列的頁面，在一個頁面中加入另一個頁面的連結地址後，單擊連結將跳轉到指定頁面，從而實現頁面之間的導航。而頁內導航方式是在一個頁面內根據需要載入其他頁面，使用頁內導航方式的應用程式仍然包含一系列的頁面，不同的是，這些頁面是順序被載入到一個選定的頁面地區中，而不是從一個頁面跳轉到另一個頁面。在傳統的網站開發中，通常使用多頁導航的方式，在開發基於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 運行
Win10系列：JavaScript頁面導航
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
