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

<body>

    <div id="exampleFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Example flyout}">

        <div>This is an example AppBarCommand of type 'flyout'.</div>

    </div>

    <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">

        <div data-win-control="WinJS.UI.AppBarCommand"

             data-win-options="{ id: 'list', type: 'content', label:'List', section: 'selection'}">

            <select class="options">

                <option>Option1</option>

                <option>Option2</option>

                <option>Option3</option>

                <option>Option4</option>

            </select>

        </div>

        <div data-win-control="WinJS.UI.AppBarCommand"

             data-win-options="{ id: 'textfield', type: 'content', label:'Text field', section: 'selection' }">

            <input type="text" value="Text" />

        </div>

        <button data-win-control="WinJS.UI.AppBarCommand"

                data-win-options="{id:'flyoutButton', type:'flyout', label:'Flyout', icon:'document', section: 'selection',

                flyout:select('#exampleFlyout')}"/>

        <button data-win-control="WinJS.UI.AppBarCommand"

                data-win-options="{id:'cmdToggle', type:'toggle', label:'Toggle', icon:'video', section:'global', tooltip:'Toggle'}"/>

        <hr data-win-control="WinJS.UI.AppBarCommand"

            data-win-options="{id:'separator', type:'separator', section:'global'}" />

        <button data-win-control="WinJS.UI.AppBarCommand"

                data-win-options="{id:'helpButton', type: 'button', label:'Help', tooltip:'Help', icon:'help', section:'global'}"/>

    </div>

</body>

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

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

2. BackButton

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

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

3. Hub

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

    <div class="hub" data-win-control="WinJS.UI.Hub">

        <div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }">

            <img src="/images/gray.png" width="420" height="280" />

            <div class="subtext win-type-x-large" data-win-res="{ textContent: 'Section1Subtext' }"></div>

            <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>

            <div class="win-type-small">

                <span data-win-res="{ textContent: 'Section1Description' }"></span>

                <span data-win-res="{ textContent: 'Section1Description' }"></span>

                <span data-win-res="{ textContent: 'Section1Description' }"></span>

            </div>

        </div>

        <div class="section2" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section2'} }">

            <div class="item-title win-type-medium" data-win-res="{ textContent: 'Section2ItemTitle',  }"></div>

            <div class="article-header win-type-x-large" data-win-res="{ textContent: 'Section2Subtext' }"></div>

            <div class="win-type-xx-small" data-win-res="{ textContent: 'Section2ItemSubTitle' }"></div>

            <div class="win-type-small">

                <span data-win-res="{ textContent: 'Section2Description' }"></span>

                <span data-win-res="{ textContent: 'Section2Description' }"></span>

                <span data-win-res="{ textContent: 'Section2Description' }"></span>

                <span data-win-res="{ textContent: 'Section2Description' }"></span>

                <span data-win-res="{ textContent: 'Section2Description' }"></span>

                <span data-win-res="{ textContent: 'Section2Description' }"></span>

            </div>

        </div>

    </div>

4. ItemContainer

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

<div style="margin: 150px 10px 20px 150px; width: 200px;" id="item1"

            data-win-control="WinJS.UI.ItemContainer"

            data-win-options="{tapBehavior: 'toggleSelect'}">

        <div style="margin: 10px; padding: 10px; background-color: gray">

            <div class="win-type-x-large"

                    style="margin-bottom: 5px;">

                晴天

            </div>

            <img src="/images/d00.gif">

            <div>晴天</div>

        </div>

    </div>

    <div style="margin: 250px 10px 150px 150px; width: 200px;" id="item2"

            data-win-control="WinJS.UI.ItemContainer"

            data-win-options="{tapBehavior: 'none', selectionDisabled: 'true'}">

        <div style="margin: 10px; padding: 10px; background-color: gray;">

            <div class="win-type-x-large"

                    style="margin-bottom: 5px;">

                多云

            </div>

            <img src="/images/d01.gif">

            <div>多云</div>

        </div>

    </div>

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

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

Windows 8.1 应用再出发 (WinJS) - 几种新增控件（1）的更多相关文章

Windows 8.1 应用再出发 (WinJS) - 几种新增控件（2）
上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand.BackButton.Hub.ItemContainer,本篇我们接着来介绍 NavBar.Repea ...
Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目
前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...
Windows 8.1 应用再出发 - 几种新增控件（1）
Windows 8.1 新增的一些控件,分别是:AppBar.CommandBar.DatePicker.TimePicker.Flyout.MenuFlyout.SettingsFlyout.Hub ...
Windows 8.1 应用再出发 - 几种新增控件（2）
本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout.MenuFlyout.SettingsFlyout.Hub 和 Hyperlink. 1. Flyout Flyout被称为 ...
Windows 8.1 应用再出发 - 几种布局控件
本篇为大家介绍Windows 商店应用中几种布局控件的用法.分别是Canvas.Grid.StackPanel 和 VariableSizedWrapGrid. 1. Canvas Canvas使用绝 ...
与众不同 windows phone (49) - 8.1 新增控件: 概述, ContentDialog, MapControl
[源码下载] 与众不同 windows phone (49) - 8.1 新增控件: 概述, ContentDialog, MapControl 作者:webabcd 介绍与众不同 windows p ...
Windows Phone中的几种集合控件
前言 Windows Phone开发过程中不可避免的就是和集合数据打交道,如果之前做过WP App的开发的话,相信你已经看过了各种集合控件的使用.扩展和自定义.这些个内容在这篇博客里都没有,那么我们今 ...
Delphi一共封装（超类化）了8种Windows基础控件和17种复杂控件
超类化源码: procedure TWinControl.CreateSubClass(var Params: TCreateParams; ControlClassName: PChar); con ...
Windows 8.1中WinRT的变化（一）——新增控件
这次WinRT的变化还是不小的,就拿新增控件来说,就有如下几种: AppBar 控件我以前写过一篇文章接受过如何在WinRT程序中快速创建Metro风格图标,现在MS已经把他们标准化了,就不用我们自 ...

随机推荐

DATAGUARD 在线重建备库
环境: OS: CentOS 6.5 X64 DB: oracle 10.2.0.5 故障:之前由于错误激活备库主写导致主备日志同步,重建备库 1.关闭备库,删除数据文件及控制文件,redo文件 rm ...
Symfony2 通过命令行调用控制器
由于系统需求,需要写一个无限循环的控制器,那么既然有一个无限循环的控制器,那么就需要有一个开关,不可能直接通过route来开启吧.当然要使用高级一点的方法啊. 那就是使用控制台通过命令行(comman ...
（转自http://www.blogjava.net/moxie/archive/2006/10/20/76375.html）WebWork深入浅出
(转自http://www.blogjava.net/moxie/archive/2006/10/20/76375.html) WebWork深入浅出本文发表于<开源大本营> 作者:钱安 ...
js实现图片的淡入淡出
思想: 其实是运动的一种,就是当鼠标移入div中时,将div的透明度变大, 当鼠标移动出来的时候透明度变回原来. 你可以尝试写一下,不会再看看代码 <style> #div1{ width ...
Oracle中快速查询和操作某个用户下的所有表数据信息
一.禁止所有的外键约束在pl/sql developer下执行如下语句:SELECT 'ALTER TABLE ' || table_name || ' disable CONSTRAINT ' | ...
纸上谈兵：图（graph）
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 图(graph)是一种比较松散的数据结构.它有一些节点(vertice),在某些节 ...
SQL Server 磁盘空间告急（磁盘扩容）转载
一.背景在线上系统中,如果我们发现存放数据库文件的磁盘空间不够,我们应该怎么办呢?新买一个硬盘挂载上去可以嘛?(linux下可以直接挂载硬盘进行扩容),但是我们的SQL Server是运行在Wind ...
vnc
Xvnc, Xvnc-core, vncagent, vncinitconfig, vnclicense, vnclicensehelper, vnclicensewiz, vncpasswd, vn ...
Towers of Hanoi
Your mission is to move the stack from the left peg to the right peg. The rules are well known: Only ...
POJ 2155 Matrix （二维线段树）
Matrix Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 17226 Accepted: 6461 Descripti ...

Windows 8.1 应用再出发 (WinJS) - 几种新增控件（1）

Windows 8.1 应用再出发 (WinJS) - 几种新增控件（1）的更多相关文章

随机推荐

热门专题