天天看點

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

Windows 8.1 和 WinJS 引入了以下新控件和功能,分别是:AppBarCommand、BackButton、Hub、ItemContainer、NavBar、Repeater、WebView。

本篇我們先來介紹 AppBarCommand、BackButton、Hub、ItemContainer,其餘三種放在下一篇中介紹。

1. AppBarCommand

Windows 8.1 加入了AppBarCommand 控件來建立自定義應用欄指令。AppBarCommand可以是這幾種類型:button、toggle、flyout、separator 和 content。我們來看一個例子:

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

在這個例子中,我們示範了在頁面底部的AppBar中 button、toggle 等五種類型的AppBarCommand。AppBar 中的 AppBarCommand 之間支援鍵盤操作,比如Tab, Enter, 箭頭,Home 和 End 鍵。

另外應用縮小到半屏寬後,文本标簽不會再顯示。這個XAML中的特性是相似的。

2. BackButton

顧名思義,BackButton 可以簡單的在應用中添加後退導航功能,BackButton 會自動檢查導航堆棧,來決定是否讓使用者後退。如果沒有後退導航的内容,按鈕會自動禁用。按鈕會自動調用WinJS.Navigation.back函數來完成導航動作,無需另寫代碼。來看看代碼寫法:

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

3. Hub

Windows 8.1 在XAML 和WinJS 中加入了Hub,也就是中心控件。它可以幫我們更輕松的建立中心頁,例如應用商店的首頁就是一個中心頁。Hub控件可以包含多個HubSection對象,每個HubSection可以包含内容和标題。标題可以選擇是否隐藏 > 圖示,顯示時,标題可以互動。來看看例子:

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

4. ItemContainer

ItemContainer 可以為元素提供pressed,swiped 和 dragged 功能,把我們需要的元素加入到ItemContainer 中即可。例如我們需要顯示元素,又不需要用到ListView 中全部功能時,就可以選擇ItemContainer控件。其中tapBehavior 屬性設定為toggleSelect 時,對象可以被選擇。設定為none,并且selectionDisabled 設定為 true 時,元素不能被選擇。我們來看一個簡單的例子:

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

這裡我們并沒有對css做調整,主要為了示範第一個元素是可以被選擇的,而第二個元素則沒有選中狀态。

到這裡我們就把 AppBarCommand、BackButton、Hub、ItemContainer 四種控件介紹完了,下一篇會介紹剩餘三種控件,謝謝。

繼續閱讀