天天看點

Windows 8.1 應用再出發 (WinJS) - 幾種新增控件(2)

上篇我們介紹了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand、BackButton、Hub、ItemContainer,本篇我們接着來介紹 NavBar、Repeater 和 WebView。

1. NavBar

NavBar 是專門用于導航指令的應用欄控件,它是AppBar 的子類。可以完成簡單的連結,也可以完成多層連結。

類似XAML 中的 TopAppBar,NavBar 會在使用者通過邊緣滑動或按下 Win + Z 或滑鼠右鍵點選的時候,出現在頁面頂部。

NavBar 包括三個元件:

1) NavBar

2) NavBarContainer, 它包含了導航項,支援分頁和滾動等。在一個NavBar 中可以包含多個NavBarContainer 對象。

3) NavBarCommand, 就是我們剛才說的導航項,使用者單擊它可以導航到目标。

想要實作導航,可以設定NavBarCommand 的 location 屬性,使用者單擊時,可以導航到指定的位置。

另外可以定義NavBar 的 oninvoked 事件,并編寫事件處理程式來執行導航操作。下面看看代碼實作:

我們定義了NavBar,添加了兩個command:Home 和 Your apps。通過location屬性來定義導航目标,來看看效果圖:

Windows 8.1 應用再出發 (WinJS) - 幾種新增控件(2)

下面來看看自定義oninvoked 事件的部分代碼:

我們為NavBar 定義了三個command, Home、Favorites 和 Your account。其中Favorites 指令點選時,彈出contactFlyout,點選flyout 中的指令時,完成導航。

Windows 8.1 應用再出發 (WinJS) - 幾種新增控件(2)
Windows 8.1 應用再出發 (WinJS) - 幾種新增控件(2)

2. Repeater

Repeater 可以使用模闆從一組資料中生成HTML标記,使用它可以生成自定義清單和表格。Repeater 可以從List 中生成資料,來看看代碼示例:

我們在html 代碼中定義了Repeater 和它對應的模闆,并在js中定義了資料。來看看效果圖:

Windows 8.1 應用再出發 (WinJS) - 幾種新增控件(2)

3. WebView

WebView 是用于顯示Web内容的控件。在WebView 出現之前,想要顯示網頁内容,需要使用iframe 元素。WebView 有這麼幾方面的優勢:

支援 HTML5  ,WebView 中的頁面可通路大部分HTML5 功能

改進的導航支援,WebView有單獨的曆史記錄堆棧,提供了包括前後導航以及重新加載目前頁等方法

支援在iframe 中無法使用的站點

WebView 支援使用 src 屬性,navigate 方法 或 navigateToString 方法導航到指定URI,我們分别來看看代碼實作:

1)通過src 屬性導航

我們看,WebView 對應 x-ms-webview 元素。來看看效果圖:

Windows 8.1 應用再出發 (WinJS) - 幾種新增控件(2)

2)使用 navigate 方法 來加載存儲在應用的狀态檔案夾中的Html 内容,這需要ms-appdata:// 協定的配合

Windows 8.1 應用再出發 (WinJS) - 幾種新增控件(2)

3)使用 navigateToString 方法來加載Html 字元串

Windows 8.1 應用再出發 (WinJS) - 幾種新增控件(2)

另外WebView 還支援通過 navigateWithHttpRequestMessage 方法向指定 URI 方法POST請求和HTTP标頭的方式來顯示網頁,這裡我們不做顯示。

好了,到這裡,我們就把Windows 8.1 和 WinJS 新增的控件介紹完了,希望對大家有所幫助,謝謝。

繼續閱讀