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已经把他们标准化了,就不用我们自 ...
随机推荐
- GLSL语言基础
from http://www.kankanews.com/ICkengine/archives/120870.shtml 变量 GLSL的变量命名方式与C语言类似.变量的名称可以使用字母,数字以及下 ...
- iOS开发中的4种数据持久化方式【二、数据库 SQLite3、Core Data 的运用】
在上文,我们介绍了ios开发中的其中2种数据持久化方式:属性列表.归档解档.本节将继续介绍另外2种iOS持久化数据的方法:数据库 SQLite3.Core Data 的运 ...
- Redis的Python客户端redis-py的初步使用
1. Redis的安装 sudo pip install redis sudo pip install hiredis Parser可以控制如何解析redis响应的内容.redis-py包含两个Par ...
- nginx 日志分割
利用 crontab + shell 来实现nginx的 access log 按天切割,便于统计.具体实现如下: shell: #! /bin/sh NGINX_DIR=/data/apps/ngi ...
- Dig out deleted chat messages of App Skype
Last month Candy was arrested on suspicion of having doing online porn webcam shows, but Candy refus ...
- SQL笔记-第三章,数据的增删改
1.数据的插入 简单的INSERT语句 INSERT INTO T_Person(FName,FAge,FRemark) VALUES(‘Tom’,18,’USA’) 简化的INSERT语句(只对部分 ...
- 34、Shiro框架入门三,角色管理
//首先这里是java代码,就是根据shiro-role.ini配置文件中的信息来得到role与用户信息的对应关系//从而来管理rolepublic class TestShiroRoleTest e ...
- 关于c#中的console用法大全
C#之Console Console.Write 表示向控制台直接写入字符串,不进行换行,可继续接着前面的字符写入.Console.WriteLine 表示向控制台写入字符串后换行.Conso ...
- 何修改WAMP中mysql默认空密码--转
何修改WAMP中mysql默认空密码 http://www.cnblogs.com/hooray/archive/2011/07/23/2114792.html WAMP安装好后,mysql密码是为 ...
- jquery :checked(过滤选择器) 和 空格:checked(后代选择器)
jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...