上篇我們介紹了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屬性來定義導航目标,來看看效果圖:
下面來看看自定義oninvoked 事件的部分代碼:
我們為NavBar 定義了三個command, Home、Favorites 和 Your account。其中Favorites 指令點選時,彈出contactFlyout,點選flyout 中的指令時,完成導航。
2. Repeater
Repeater 可以使用模闆從一組資料中生成HTML标記,使用它可以生成自定義清單和表格。Repeater 可以從List 中生成資料,來看看代碼示例:
我們在html 代碼中定義了Repeater 和它對應的模闆,并在js中定義了資料。來看看效果圖:
3. WebView
WebView 是用于顯示Web内容的控件。在WebView 出現之前,想要顯示網頁内容,需要使用iframe 元素。WebView 有這麼幾方面的優勢:
支援 HTML5 ,WebView 中的頁面可通路大部分HTML5 功能
改進的導航支援,WebView有單獨的曆史記錄堆棧,提供了包括前後導航以及重新加載目前頁等方法
支援在iframe 中無法使用的站點
WebView 支援使用 src 屬性,navigate 方法 或 navigateToString 方法導航到指定URI,我們分别來看看代碼實作:
1)通過src 屬性導航
我們看,WebView 對應 x-ms-webview 元素。來看看效果圖:
2)使用 navigate 方法 來加載存儲在應用的狀态檔案夾中的Html 内容,這需要ms-appdata:// 協定的配合
3)使用 navigateToString 方法來加載Html 字元串
另外WebView 還支援通過 navigateWithHttpRequestMessage 方法向指定 URI 方法POST請求和HTTP标頭的方式來顯示網頁,這裡我們不做顯示。
好了,到這裡,我們就把Windows 8.1 和 WinJS 新增的控件介紹完了,希望對大家有所幫助,謝謝。