Windows Store App JavaScript 開發：頁內導航

時間 2019-11-12

標籤 windows store app javascript 開發導航欄目 Windows 简体版

原文原文鏈接

頁內導航是在一個頁面內根據須要加載其餘頁面的內容，在開發基於JavaScript的Windows應用商店應用時，可使用WinJS.Navigation.navigate函數傳遞要加載的頁面地址並使用PageControlNavigator控件加載其餘頁面的內容。WinJS.Navigation.navigate函數以一個包含頁面地址的對象爲參數，在該函數執行時將觸發WinJS.Navigation.onnavigated事件並把頁面地址傳遞給該事件。PageControlNavigator控件具備處理WinJS.Navigation.onnavigated事件的功能，它接收onnavigated事件包含的頁面地址信息，加載並顯示頁面地址對應的頁面內容。css

PageControlNavigator是使用網格應用程序模板的JavaScript的Windows應用商店項目中預約義的一個控件，能夠新建一個使用網格應用程序模板的JavaScript的Windows應用商店項目，在項目的js文件夾中找到navigator.js文件並添加到本身的項目中，以實現對PageControlNavigator控件的引用。html

下面經過一個示例來演示如何使用HTML5和JavaScript開發一個實現頁內導航的Windows應用商店應用。在這個應用程序中將包含三個頁面，其中一個做爲框架頁面用於加載其餘頁面，另外兩個做爲被加載頁面。框架

在Visual Studio 2012中新建一個JavaScript的Windows應用商店的空白應用程序項目，將其命名爲SinglePageNavigation。接下來向項目中添加被加載頁面，在項目根目錄下新建兩個文件夾，分別命名爲HomePage和TargetPage，在HomePage文件夾中添加一個「頁面控制」項，命名爲HomePage，添加完成以後HomePage文件夾下會包含三個文件，名稱分別爲HomePage.html、HomePage.js和HomePage.css。以一樣的方法繼續在TargetPage文件夾下添加一個名爲TargetPage的「頁面控制」項，這樣就完成了項目建立的工做。函數

因爲在本項目中會用到導航控件PageControlNavigator，所以須要先在項目中添加定義這個控件的navigator.js文件，方法是在項目的js文件夾上單擊右鍵，選擇「添加」à「現有項」，找到本地文件中的navigator.js文件並添加到項目中。佈局

添加完成後在default.html文件中引用navigator.js文件，打開default.html文件，在head元素中添加如下代碼片斷：spa

引用了navigator.js文件以後，在default.html文件的body元素中添加一個h2元素和一個PageControlNavigator控件，h2元素用於顯示default頁的標題，PageControlNavigator控件用於加載其餘頁面，代碼片斷以下所示：orm

<body>htm

<h2>default頁</h2>對象

</body>

上面的代碼將div元素的data-win-control屬性賦值爲Application.PageControlNavigator，定義一個PageControlNavigator控件，其中Application是navigator.js文件中定義的命名空間名稱，在這個命名空間中定義了PageControlNavigator控件。而後經過div元素的data-win-options屬性，設置PageControlNavigator的home屬性值爲HomePage.html頁面的地址，將HomePage頁設定爲應用程序啓動時默認顯示的頁面，即應用程序的主頁。

在default.html文件中完成添加PageControlNavigator控件以後，接下來在default.js文件中添加代碼以定義應用程序激活、掛起時的行爲。首先定義一個變量nav，併爲其賦值以得到對WinJS.Navigation命名空間的引用，代碼片斷以下所示：

var nav = WinJS.Navigation;

接着在語句「args.setPromise(WinJS.UI.processAll());」後添加代碼，以使應用程序激活時PageControlNavigator控件中顯示其home屬性值指向的頁面。代碼片斷以下所示：

nav.navigate(Application.navigator.home);

在上面的代碼中，調用nav.navigate函數導航到PageControlNavigator控件的home屬性值指定的頁面。其中Application.navigator.home是navigator.js文件中定義的一個變量，表明PageControlNavigator控件的home屬性，Application是navigator.js文件中聲明的命名空間名稱。

接下來編輯HomePage.html頁面的內容，打開HomePage.html文件能夠發現，文件中已經默認包含一個header元素和一個section元素。header元素中定義了「後退」導航按鈕和頁面的標題，「後退」按鈕的功能由PageControlNavigator控件實現，當單擊這個按鈕時將返回到導航歷史記錄中的上一個頁面，在本示例中因爲HomePage頁面是首先加載的頁面，所以這個按鈕將不可用。section元素中包含一個p元素用於顯示一段文本。這裏將header元素中頁面的標題更改成「歡迎進入HomePage頁面」，並設置其大小爲h3，刪除section元素中的p元素，再在section元素內添加一個按鈕，用於導航到下一個頁面，代碼片斷以下所示：

<body>

<span class="pagetitle">歡迎進入HomePage頁面</span>

</h3>

</header>

<br />

<button id="NextPageButton">下一個頁面</button>

</section>

</div>

</body>

完成前臺界面的佈局後，打開HomePage.js文件能夠發現，文件內已經默認包含了一個匿名函數，並在匿名函數內部調用了WinJS.UI.Pages.define函數。WinJS.UI.Pages.define函數有兩個參數，其中第二個參數是一個對象，下面在該對象的ready函數內添加代碼，爲「下一個頁面」按鈕註冊單擊事件處理函數NextPageButton_Click，代碼片斷以下所示：

WinJS.UI.Pages.define("/HomePage/HomePage.html", {

ready: function (element, options) {

//爲按鈕添加單擊事件監聽器

var nextPageButton = document.getElementById("NextPageButton");

nextPageButton.addEventListener("click", NextPageButton_Click);

}

});

上面的代碼經過document對象的getElementById函數得到id屬性值爲NextPageButton的元素對象，並賦值給nextPageButton變量，而後經過nextPageButton變量調用元素對象的addEventListener函數註冊單擊事件的處理函數NextPageButton_Click。

下面在WinJS.UI.Pages.define函數的後面編寫NextPageButton_Click函數的代碼，實現從HomePage.html頁面導航到TargetPage.html頁面，代碼片斷以下所示：

function NextPageButton_Click () {

WinJS.Navigation.navigate("/TargetPage/TargetPage.html");

}

代碼調用WinJS.Navigation.navigate函數實現從HomePage.html頁面跳轉到地址爲「/TargetPage/TargetPage.html」的頁面，即TargetPage.html頁面。

接下來編輯TargetPage.html頁面，打開TargetPage.html文件能夠發現，與HomePage.html文件同樣，文件中已經默認包含一個header元素和一個section元素，header元素中定義了「後退」導航按鈕和頁面的標題，section元素中包含一個p元素顯示一段文本。這裏更改頁面的標題爲「歡迎進入TargetPage頁面」，並設置其大小爲h3；刪除section元素及其內部的p元素，代碼片斷以下所示：

<body>

<span class="pagetitle">歡迎進入TargetPage頁面</span>

</h3>

</header>

</div>

</body>

啓動調試，應用程序界面上顯示「default頁」、「歡迎進入HomePage頁面」文本和「下一個頁面」按鈕，如圖19-8所示。單擊「下一個頁面」按鈕，應用程序界面將顯示TargetPage.html頁面的內容，如圖19-9所示。單擊TargetPage.html頁面中的返回按鈕時，應用程序界面顯示HomePage.html頁面，如圖19-8所示。