按功能列出控件 (HTML)

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

使用 JavaScript 的 Windows 运行时应用提供了可执行许多功能的多个控件。你可以通过对提供相似功能的控件进行比较来选择适合你的情形的控件。（有关完整的控件列表，请参阅控件列表。）

在操作时请参阅有关这些功能的信息，它是应用功能大全系列的一部分 : Windows 应用商店应用 UI 全解

应用栏和命令

应用栏
提供用于显示应用特定命令的工具栏。
```
<div data-win-control="WinJS.UI.AppBar"></div>
```
参考：WinJS.UI.AppBar

快速入门：添加应用栏
上下文菜单
提供一个轻型菜单，可让用户在使用 JavaScript 的 Windows 运行时应用中访问可对文本或 UI 对象执行的操作（例如剪贴板命令）。
```
var menu = new Windows.UI.Popups.PopupMenu();
```
参考：Windows.UI.Popups.PopupMenu
菜单（仅限 Windows）
显示一个菜单。
```
<div data-win-control="WinJS.UI.Menu"></div>
```
参考：Menu
菜单命令（仅限 Windows）
表示要显示在 Menu 对象中的命令。
```
<button data-win-control="WinJS.UI.MenuCommand" />
```
参考：MenuCommand
导航栏（仅限 Windows）
显示工具栏中用户可显示或隐藏的导航命令。
```
<div data-win-control="WinJS.UI.NavBar"></div>
```
参考：WinJS.UI.NavBar

HTML NavBar 控件示例
导航栏命令（仅限 Windows）
表示导航栏容器中的导航命令。
```
<div data-win-control="WinJS.UI.NavBarCommand"></div>
```
参考：WinJS.UI.NavBarCommand

HTML NavBar 控件示例
导航栏容器（仅限 Windows）
包含导航栏中的一组导航栏命令。
```
<div data-win-control="WinJS.UI.NavBarContainer"></div>
```
参考：WinJS.UI.NavBarContainer

HTML NavBar 控件示例
弹出菜单
请参阅条目"上下文菜单"。
工具栏
显示一组命令。Toolbar 可以出现在任何位置，包括 Flyout 或 AppBar。
```
<div data-win-control="WinJS.UI.Toolbar">
</div>
```
参考：Toolbar

按钮

后退按钮（仅限 Windows）
以按钮形式提供向后导航功能。
```
<div><button data-win-control="WinJS.UI.BackButton"></div>
```
参考：WinJS.UI.WinJS.UI.BackButton
按钮

表示按钮控件。
```
<button>A button</button>
```
- 或 -
```
<input type="button" value="A button" />
```
参考：button、input type=button

快速入门：添加按钮
推送按钮
请参阅“按钮”
重置按钮

重置某个表单中的数据。
```
<button type="reset">Reset</button>
```
参考：button、input type=reset

快速入门：添加按钮
提交按钮

创建一个单击后将提交表单的按钮。
```
<button type="submit">Submit</button>
```
参考：button、input type=submit

快速入门：添加按钮

集合/数据控件

翻转视图
显示一个集合，一次一个项目。
```
<div data-win-control="WinJS.UI.FlipView"></div>
```
参考：WinJS.UI.FlipView

快速入门：添加 FlipView
网格视图
具有网格布局的一种 ListView。有关详细信息，请参阅条目"列表视图"。
```
<div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
```
参考：WinJS.UI.ListView

快速入门：添加 ListView
跳转查看器
请参阅“语义式缩放”
Repeater
从一组数据生成 HTML。使用此控件生成项目列表。
```
<div data-win-control="WinJS.UI.Repeater"></div>
```
参考：WinJS.UI.Repeater

HTML Repeater 控件示例

语义式缩放
使用户可以在一个项目集合的两个视图之间进行缩放。

<div data-win-control="WinJS.UI.SemanticZoom">

  <!-- Control that provides the zoomed-in view. -->
  <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>

  <!-- Control that provides the zoomed-out view. -->
  <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>

</div>

参考：WinJS.UI.SemanticZoom

弹出窗口

内容对话框
显示需要用户注意或明确操作的重要信息并暂时阻止与应用中的其他元素进行交互。
```
<div 
  data-win-control="WinJS.UI.ContentDialog">
  
</div
```
参考：ContentDialog
上下文菜单
请参阅"弹出菜单"。
浮出控件（仅限 Windows）
显示要求用户交互的消息。（与消息对话框不同，弹出窗口不创建单独的窗口，而且不阻止其他用户交互。）
```
<div data-win-control="WinJS.UI.Flyout"></div>
```
参考：WinJS.UI.Flyout

快速入门：添加弹出窗口
菜单（仅限 Windows）
显示一个菜单。
```
<div data-win-control="WinJS.UI.Menu"></div>
```
参考：WinJS.UI.Menu
菜单命令（仅限 Windows）
表示要显示在 Menu 对象中的命令。
```
<button data-win-control="WinJS.UI.MenuCommand" />
```
参考：WinJS.UI.MenuCommand
消息对话框
显示需要用户立即响应的消息。

参考：Windows.UI.Popups.MessageDialog

快速入门：添加消息对话框
弹出菜单
表示上下文菜单。
```
var popupMenu = new Windows.UI.Popups.PopupMenu();
```
参考：Windows.UI.Popups.PopupMenu
“设置”浮出控件（仅限 Windows）
提供对应用设置的访问。
```
<div data-win-control="WinJS.UI.SettingsFlyout"></div>
```
参考：SettingsFlyout
工具提示（仅限 Windows）
显示可支持丰富内容（例如图像和带格式文本）的丰富工具提示，以显示有关某事物的详细信息。
```
<div data-win-control="WinJS.UI.ToolTip"></div>
```
参考：WinJS.UI.Tooltip
工具提示，简单
为要素显示一个简单的仅文本工具提示。
```
<element title="tooltip text" />
```
参考：title

图形

画布
提供用于在文档上绘制、呈现和操纵图像和图形的对象。
```
<canvas />
```
参考：canvas

快速入门：绘制到画布
SVG
定义一个可呈现矢量图形的 SVG 文档或文档片段。
```
<svg xmlns="http://www.w3.org/2000/svg"></svg>
```
参考：svg

图像

img
显示一个图像。
```
<img src="url" />
```
参考：img

布局控件

弹性框
一个 CSS 布局，该布局在定义框的大小时会考虑留出一些可用空间，让你可以调节相对大小和位置。
```
<div style="display: -ms-box;">
    
</div>
```
参考：display
网格
定义由列和行组成的灵活网格区域的一种 CSS 布局。
```
<div style="{display: -ms-grid}">
    
</div>
```
参考：display
中心（仅限 Windows）
创建由可以导航到的部分组成的中心导航模式。每个部分都由中心分区定义。
```
<div data-win-control="WinJS.UI.Hub"></div>
```
参考：WinJS.UI.Hub

HTML 中心控件示例
中心分区（仅限 Windows）
定义中心分区。
```
<div data-win-control="WinJS.UI.HubSection"></div>
```
参考：WinJS.UI.HubSection

HTML 中心控件示例
项容器
定义可以按、轻扫和拖动的项。
```
<div data-win-control="WinJS.UI.ItemContainer"></div>
```
参考：WinJS.UI.WinJS.UI.ItemContainer

HTML ItemContainer 示例
平移滚动视图
请参阅条目"滚动视图"。
透视
创建显示多个项目的选项卡控件。
```
<div data-win-control='WinJS.UI.Pivot'></div>
```
参考：WinJS.UI.Pivot
透视项目
创建选项卡控件内的选项卡。
```
<div data-win-control='WinJS.UI.PivotItem'></div>
```
参考：WinJS.UI.PivotItem
滚动条
可以滚动浏览其中内容的一种容器。你可以通过将元素的 overflow 样式设置为滚动或自动来添加此滚动功能。
```
<div style="overflow:scroll;">
    
</div>
```
参考：overflow
滚动视图
显示一个用户可以放大和缩小的内容视图，并提供能够增强该体验的其他功能，例如贴靠点。
```
<div style=overflow:scroll;-ms-content-zooming:zoom>>
    
</div>
```
参考：overflow、ms-content-zooming
拆分视图
将一个区域拆分为两个部分：一个可从边缘出现的窗格和一个用于填充可用空间的内容区域。
```
<div data-win-control="WinJS.UI.SplitView">
</div>
```
参考：SplitView
viewbox
缩放单独的子元素，从而能够不调整大小来填充可用空间。此控件对容器的大小变化和子元素的大小变化进行响应。例如，媒体查询可能会导致纵横比发生变化。
```
<div data-win-control="WinJS.UI.ViewBox"></div>
```
参考：WinJS.UI.ViewBox
可缩放滚动视图
请参阅条目"滚动视图"。

媒体控件

音频
指定将在文档中播放的声音或音频内容，例如音乐或效果。
```
<audio>
    <source src="uri" type="audioType" />
</audio>
```
参考：audio
媒体元素
请参阅条目"音频"和"视频。"
媒体播放机
请参阅条目"音频"和"视频。"

视频
指定要显示在文档中的视频内容。

<video controls="controls">
   <source src="url" type="videoType" />
</video>

参考：video

HTML 控件
显示来自 HTML 页面的内容。
```
<div data-win-control="WinJS.UI.HtmlControl"></div>
```
参考：WinJS.UI.HtmlControl
iframe
可显示其他文档的一种嵌入式浮动框架。
```
<iframe src="url" />
```
参考：iframe
页面控件
表示导航应用中的一个自定义控件或页面。

参考：WinJS.UI.Pages.PageControl

快速入门：使用单页导航
拆分视图
将一个区域拆分为两个部分：一个可从边缘出现的窗格和一个用于填充可用空间的内容区域。
```
<div data-win-control="WinJS.UI.SplitView">
</div>
```
参考：SplitView
Web 视图
请参阅条目 "iframe"。

进度控件

进度条

显示一个指示工作正在进行的长条。
```
<progress />
```
参考：progress

快速入门：添加进度控件
进度环（仅限 Windows）
显示一个指示工作正在进行的环。
```
<progress class="win-ring" style="width: 20px; height: 20px" />
```
参考：progress

快速入门：添加进度控件

分级控件

分级（仅限 Windows）

使用户可以分级某件事物或查看现有分级。
```
<div data-win-control="WinJS.UI.Rating"></div>
```
参考：WinJS.UI.Rating

快速入门：添加分级

选择控件

复选框

表示用户可以选中或清除的复选框。
```
<input type="checkbox" />
```
参考：input type=checkbox

快速入门：添加复选框
组合框
请参阅条目"选择"。
日期选取器（仅限 Windows）

设置日期。
```
<div data-win-control="WinJS.UI.DatePicker"></div>
```
参考：DatePicker

快速入门：添加 DatePicker
文件上载
创建具有一个文本框和一个浏览按钮的文件上载对象。
```
<input type="file" />
```
参考：input type=file
列表框
请参阅条目"选择"。
列表视图
以列表或网格布局显示一个数据集合。
```
<div data-win-control="WinJS.UI.ListView"></div>
```
参考：WinJS.UI.ListView

快速入门：添加 ListView

单选按钮
一种选择控件类型，它将用户的选择限制到一组值中的单个值。为此，必须通过为每个按钮分配相同的名称，将一组单选按钮中的每个按钮链接在一起。

<input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label>   
<input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label>
<input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>

参考：input type=radio

范围
请参阅条目"滑块"。
搜索框（仅限 Windows）
使用户可以执行搜索查询并选择建议。
```
<div data-win-control="WinJS.UI.SearchBox"></div>
```
参考：WinJS.UI.SearchBox

SearchBox 控件示例

选择
表示一个列表框、组合框或下拉列表。

<select>
    <option>Apple</option>
    <option>Banana</option>
    <option>Grape</option>
    <option>Orange</option>
    <option>Pear</option>
    <option>Watermelon</option>
</select>

参考：select

滑块
提供用于选择数值的范围滑块。
```
<input type="range" />
```
参考：input type=range
时间选取器（仅限 Windows）

让用户指定时间。
```
<div data-win-control="WinJS.UI.TimePicker"></div>
```
参考：WinJS.UI.TimePicker

快速入门：添加 Timepicker
切换开关
表示可以在两个状态之间进行切换的一种开关。
```
<div data-win-control="WinJS.UI.ToggleSwitch"></div>
```
参考：ToggleSwitch

文本控件

电子邮件输入框
一个接受一个或多个电子邮件地址的单行输入控件。
```
<input type="email" />
```
参考：input type=email
多行文本框
请参阅条目 "textarea"。
数字输入框
一个接受一个数字的单行输入控件。
```
<input type="number" />
```
参考：input type=number
密码输入框
一个单行文本输入控件，类似于文本输入控件，但在用户输入时不会显示文本。
```
<input type="password" />
```
参考：input type=password
可编辑对话框/多信息文本框
一种提供文本输入功能的控件，类似于文本输入框，但可以处理包含子元素的内容。若要创建 RTF 框，请设置要编辑的元素的 contentEditable 属性。
```
<div contentEditable="true">
    
</div>
```
参考：contentEditable
单行文本框
请参阅条目"文本框"。
文本框
单行文本输入控件。
```
<input type="text" />
```
参考：input type=text
文本区域
多行文本输入控件。
```
<textarea></textarea>
```
参考：textarea
URL 输入框
一个接受 URL 的单行文本输入控件。
```
<input type="url" />
```
参考：input type=url

用户帮助

标签
指定页面上另一个元素的标签。

<label for="otherControl">Label text</label>
<input type="text" id="otherControl" />

参考：label

工具提示（仅限 Windows）
显示可支持丰富内容（例如图像和带格式文本）的丰富工具提示，以显示有关某事物的详细信息。
```
<div data-win-control="WinJS.UI.ToolTip"></div>
```
参考：WinJS.UI.Tooltip
工具提示，简单
为要素显示一个简单的仅文本工具提示。
```
<element title="tooltip text" />
```
参考：title