课程频道导航
课程分类导航
当前位置：首页 > 操作系统 > Windows

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。我们来看一个例子：

            <span><</span>
            <span>body</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>id</span>
            <span>="exampleFlyout"</span>
            <span> data-win-control</span>
            <span>="WinJS.UI.Flyout"</span>
            <span> aria-label</span>
            <span>="{Example flyout}"</span>
            <span>></span>
            <span><</span>
            <span>div</span>
            <span>></span>This is an example AppBarCommand of type ‘flyout‘.<span></</span><span>div</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div </span><span>id</span><span>="appBar"</span><span> data-win-control</span><span>="WinJS.UI.AppBar"</span><span> data-win-options</span><span>="{placement:‘bottom‘}"</span><span>></span><span><</span><span>div </span><span>data-win-control</span><span>="WinJS.UI.AppBarCommand"</span><span>
             data-win-options</span><span>="{ id: ‘list‘, type: ‘content‘, label:‘List‘, section: ‘selection‘}"</span><span>></span><span><</span><span>select </span><span>class</span><span>="options"</span><span>></span><span><</span><span>option</span><span>></span>Option1<span></</span><span>option</span><span>></span><span><</span><span>option</span><span>></span>Option2<span></</span><span>option</span><span>></span><span><</span><span>option</span><span>></span>Option3<span></</span><span>option</span><span>></span><span><</span><span>option</span><span>></span>Option4<span></</span><span>option</span><span>></span><span></</span><span>select</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div </span><span>data-win-control</span><span>="WinJS.UI.AppBarCommand"</span><span>
             data-win-options</span><span>="{ id: ‘textfield‘, type: ‘content‘, label:‘Text field‘, section: ‘selection‘ }"</span><span>></span><span><</span><span>input </span><span>type</span><span>="text"</span><span> value</span><span>="Text"</span><span>/></span><span></</span><span>div</span><span>></span><span><</span><span>button </span><span>data-win-control</span><span>="WinJS.UI.AppBarCommand"</span><span>
                data-win-options</span><span>="{id:‘flyoutButton‘, type:‘flyout‘, label:‘Flyout‘, icon:‘document‘, section: ‘selection‘, 
                flyout:select(‘#exampleFlyout‘)}"</span><span>/></span><span><</span><span>button </span><span>data-win-control</span><span>="WinJS.UI.AppBarCommand"</span><span>
                data-win-options</span><span>="{id:‘cmdToggle‘, type:‘toggle‘, label:‘Toggle‘, icon:‘video‘, section:‘global‘, tooltip:‘Toggle‘}"</span><span>/></span><span><</span><span>hr </span><span>data-win-control</span><span>="WinJS.UI.AppBarCommand"</span><span>
            data-win-options</span><span>="{id:‘separator‘, type:‘separator‘, section:‘global‘}"</span><span>/></span><span><</span><span>button </span><span>data-win-control</span><span>="WinJS.UI.AppBarCommand"</span><span>
                data-win-options</span><span>="{id:‘helpButton‘, type: ‘button‘, label:‘Help‘, tooltip:‘Help‘, icon:‘help‘, section:‘global‘}"</span><span>/></span><span></</span><span>div</span><span>></span><span></</span><span>body</span><span>></span>

bubuko.com,布布扣

bubuko.com,布布扣

在这个例子中，我们演示了在页面底部的AppBar中 button、toggle 等五种类型的AppBarCommand。AppBar 中的 AppBarCommand 之间支持键盘操作，比如Tab, Enter, 箭头，Home 和 End 键。

另外应用缩小到半屏宽后，文本标签不会再显示。这个XAML中的特性是相似的。

 

2. BackButton

顾名思义，BackButton 可以简单的在应用中添加后退导航功能，BackButton 会自动检查导航堆栈，来决定是否让用户后退。如果没有后退导航的内容，按钮会自动禁用。按钮会自动调用WinJS.Navigation.back函数来完成导航动作，无需另写代码。来看看代码写法：

            <span><</span>
            <span>button </span>
            <span>data-win-control</span>
            <span>="WinJS.UI.BackButton"</span>
            <span>></</span>
            <span>button</span>
            <span>></span>

    bubuko.com,布布扣

 

3. Hub

Windows 8.1 在XAML 和WinJS 中加入了Hub，也就是中心控件。它可以帮我们更轻松的创建中心页，例如应用商店的首页就是一个中心页。Hub控件可以包含多个HubSection对象，每个HubSection可以包含内容和标题。标题可以选择是否隐藏 > 图标，显示时，标题可以交互。来看看例子：

            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="hub"</span>
            <span> data-win-control</span>
            <span>="WinJS.UI.Hub"</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="section1"</span>
            <span> data-win-control</span>
            <span>="WinJS.UI.HubSection"</span>
            <span> data-win-options</span>
            <span>="{ isHeaderStatic: true }"</span>
            <span> data-win-res</span>
            <span>="{ winControl: {‘header‘: ‘Section1‘} }"</span>
            <span>></span>
            <span><</span>
            <span>img </span>
            <span>src</span>
            <span>="/images/gray.png"</span>
            <span> width</span>
            <span>="420"</span>
            <span> height</span>
            <span>="280"</span>
            <span>/></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="subtext win-type-x-large"</span>
            <span> data-win-res</span>
            <span>="{ textContent: ‘Section1Subtext‘ }"</span>
            <span>></</span>
            <span>div</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="win-type-medium"</span>
            <span> data-win-res</span>
            <span>="{ textContent: ‘DescriptionText‘ }"</span>
            <span>></</span>
            <span>div</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="win-type-small"</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section1Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section1Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section1Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span></</span>
            <span>div</span>
            <span>></span>
            <span></</span>
            <span>div</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="section2"</span>
            <span> data-win-control</span>
            <span>="WinJS.UI.HubSection"</span>
            <span> data-win-res</span>
            <span>="{ winControl: {‘header‘: ‘Section2‘} }"</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="item-title win-type-medium"</span>
            <span> data-win-res</span>
            <span>="{ textContent: ‘Section2ItemTitle‘,  }"</span>
            <span>></</span>
            <span>div</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="article-header win-type-x-large"</span>
            <span> data-win-res</span>
            <span>="{ textContent: ‘Section2Subtext‘ }"</span>
            <span>></</span>
            <span>div</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="win-type-xx-small"</span>
            <span> data-win-res</span>
            <span>="{ textContent: ‘Section2ItemSubTitle‘ }"</span>
            <span>></</span>
            <span>div</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="win-type-small"</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section2Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section2Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section2Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section2Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section2Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span><</span>
            <span>span </span>
            <span>data-win-res</span>
            <span>="{ textContent: ‘Section2Description‘ }"</span>
            <span>></</span>
            <span>span</span>
            <span>></span>
            <span></</span>
            <span>div</span>
            <span>></span>
            <span></</span>
            <span>div</span>
            <span>></span>
            <span></</span>
            <span>div</span>
            <span>></span>

bubuko.com,布布扣

 

4. ItemContainer

ItemContainer 可以为元素提供pressed，swiped 和 dragged 功能，把我们需要的元素加入到ItemContainer 中即可。例如我们需要显示元素，又不需要用到ListView 中全部功能时，就可以选择ItemContainer控件。其中tapBehavior 属性设置为toggleSelect 时，对象可以被选择。设置为none，并且selectionDisabled 设置为 true 时，元素不能被选择。我们来看一个简单的例子：

            <span><</span>
            <span>div </span>
            <span>style</span>
            <span>="margin: 150px 10px 20px 150px; width: 200px;"</span>
            <span> id</span>
            <span>="item1"</span>
            <span>
            data-win-control</span>
            <span>="WinJS.UI.ItemContainer"</span>
            <span>
            data-win-options</span>
            <span>="{tapBehavior: ‘toggleSelect‘}"</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>style</span>
            <span>="margin: 10px; padding: 10px; background-color: gray"</span>
            <span>></span>
            <span><</span>
            <span>div </span>
            <span>class</span>
            <span>="win-type-x-large"</span>
            <span>
                    style</span>
            <span>="margin-bottom: 5px;"</span>
            <span>></span>
            <span>
                晴天
            </span>
            <span></</span>
            <span>div</span>
            <span>></span>
            <span><</span>
            <span>img </span>
            <span>src</span>
            <span>="/images/d00.gif"</span>
            <span>></span>
            <span><</span>
            <span>div</span>
            <span>></span>晴天<span></</span><span>div</span><span>></span><span></</span><span>div</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div </span><span>style</span><span>="margin: 250px 10px 150px 150px; width: 200px;"</span><span> id</span><span>="item2"</span><span>
            data-win-control</span><span>="WinJS.UI.ItemContainer"</span><span>
            data-win-options</span><span>="<span>{tapBehavior: ‘none‘, selectionDisabled: ‘true‘}</span>"</span><span>></span><span><</span><span>div </span><span>style</span><span>="margin: 10px; padding: 10px; background-color: gray;"</span><span>></span><span><</span><span>div </span><span>class</span><span>="win-type-x-large"</span><span>
                    style</span><span>="margin-bottom: 5px;"</span><span>></span><span>
                多云
            </span><span></</span><span>div</span><span>></span><span><</span><span>img </span><span>src</span><span>="/images/d01.gif"</span><span>></span><span><</span><span>div</span><span>></span>多云<span></</span><span>div</span><span>></span><span></</span><span>div</span><span>></span><span></</span><span>div</span><span>></span>

bubuko.com,布布扣

这里我们并没有对css做调整，主要为了演示第一个元素是可以被选择的，而第二个元素则没有选中状态。

 

到这里我们就把 AppBarCommand、BackButton、Hub、ItemContainer 四种控件介绍完了，下一篇会介绍剩余三种控件，谢谢。

原文：http://www.cnblogs.com/shaomeng/p/3633289.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！

相关教程推荐

其他课程推荐