控件列表 (HTML)

项目
03/04/2016

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

使用 JavaScript 的 Windows 运行时应用能够访问支持用户界面 (UI) 开发的大型控件库。其中的一些控件有直观的表示形式，另外一些充当其他控件或内容（如图像和媒体）的容器。

本主题提供常见的使用 JavaScript 的 Windows 运行时应用控件的列表（按字母排序）。

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

A

a
指定超文本链接的起点或名称。
```
<a href="url">Your text</a>
```
参考：a
应用栏
提供用于显示应用特定命令的工具栏。
```
<div data-win-control="WinJS.UI.AppBar"></div>
```
参考：WinJS.UI.AppBar

快速入门：添加应用栏
音频
指定将在文档中播放的声音或音频内容，例如音乐或效果。
```
<audio>
    <source src="uri" type="audioType" />
</audio>
```
参考：audio

B

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

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

快速入门：添加按钮

C

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

快速入门：绘制到画布
复选框

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

快速入门：添加复选框
组合框
请参阅条目"选择"。
内容对话框
显示需要用户注意或明确操作的重要信息并暂时阻止与应用中的其他元素进行交互。
```
<div 
  data-win-control="WinJS.UI.ContentDialog">
  
</div
```
参考：ContentDialog
上下文菜单
提供一个轻型菜单，可让用户在 Windows 应用商店应用中访问可对文本或 UI 对象执行的操作（例如剪贴板命令）。
```
var menu = new Windows.UI.Popups.PopupMenu();
```
参考：Windows.UI.Popups.PopupMenu

D

日期选取器（仅限 Windows）

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

快速入门：添加 DatePicker
下拉列表
请参阅条目"选择"。

E

电子邮件输入框
一个接受一个或多个电子邮件地址的单行输入控件。
```
<input type="email" />
```
参考：input type=email

F

文件上载
创建具有一个文本框和一个浏览按钮的文件上载对象。
```
<input type="file" />
```
参考：input type=file
弹性框
定义一个布局，该布局在定义框的大小时会考虑留出一些可用空间，让你可以调节相对大小和位置。
```
<div style="display: -ms-box;">
    
</div>
```
参考：display
翻转视图
显示一个集合，一次一个项目。
```
<div data-win-control="WinJS.UI.FlipView"></div>
```
参考：WinJS.UI.FlipView

快速入门：添加 FlipView
浮出控件（仅限 Windows）
显示要求用户交互的消息。（与对话框不同，弹出窗口不创建一个单独的窗口，而且不阻止其他用户交互。）
```
<div data-win-control="WinJS.UI.Flyout"></div>
```
参考：WinJS.UI.Flyout

快速入门：添加弹出窗口

G

网格
定义由列和行组成的灵活网格区域的一种 CSS 布局。
```
<div style="{display: -ms-grid}">
    
</div>
```
参考：display
网格视图
具有网格布局的一种 ListView。有关详细信息，请参阅条目"列表视图"。
```
<div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
```
参考：WinJS.UI.ListView

快速入门：添加 ListView

H

HTML 控件
显示来自 HTML 页面的内容。
```
<div data-win-control="WinJS.UI.HtmlControl"></div>
```
参考：WinJS.UI.HtmlControl
中心（仅限 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 中心控件示例
超链接
请参阅条目 "a"。

I

iframe
可显示其他文档的一种嵌入式浮动框架。
```
<iframe src="url" />
```
参考：iframe
img
显示一个图像。
```
<img src="url" />
```
参考：img
项容器
定义可以按、轻扫和拖动的项。
```
<div data-win-control="WinJS.UI.ItemContainer"></div>
```
参考：WinJS.UI.ItemContainer

HTML ItemContainer 示例

J

跳转视图
请参阅条目"语义式缩放"。

L

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

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

参考：label

列表框
请参阅条目"选择"。
列表视图
以列表或网格布局显示一个数据集合。
```
<div data-win-control="WinJS.UI.ListView"></div>
```
参考：WinJS.UI.ListView

快速入门：添加 ListView

M

媒体元素
请参阅条目"音频"和"视频。"
媒体播放机
请参阅条目"音频"和"视频。"
菜单
显示一个菜单。（仅限 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

快速入门：添加消息对话框
多行文本框
请参阅条目 "textarea"。

N

导航栏（仅限 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 控件示例
数字输入框
一个接受一个数字的单行输入控件。
```
<input type="number" />
```
参考：input type=number

P

页面控件
表示导航应用中的一个自定义控件或页面。

参考：WinJS.UI.Pages.PageControl

快速入门：使用单页导航
平移滚动视图
请参阅条目"滚动视图"。
密码输入框
一个单行文本输入控件，类似于文本输入控件，但在用户输入时不会显示文本。
```
<input type="password" />
```
参考：input type=password
透视
创建显示多个项目的选项卡控件。
```
<div data-win-control='WinJS.UI.Pivot'></div>
```
参考：WinJS.UI.Pivot
透视项目
创建选项卡控件内的选项卡。
```
<div data-win-control='WinJS.UI.PivotItem'></div>
```
参考：WinJS.UI.PivotItem
弹出菜单
请参阅条目"上下文菜单"。
进度条

显示一个指示工作正在进行的长条。不明确的环在 Windows Phone 8.1 上不受支持。
```
<progress />
```
参考：progress

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

快速入门：添加进度控件
推送按钮
请参阅条目"按钮"。

R

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

<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.Rating"></div>
```
参考：WinJS.UI.Rating

快速入门：添加分级
Repeater
从一组数据生成 HTML。使用此控件生成项目列表。
```
<div data-win-control="WinJS.UI.Repeater"></div>
```
参考：WinJS.UI.Repeater

HTML Repeater 控件示例
重置按钮

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

快速入门：添加按钮
可编辑对话框/多信息文本框
一种提供文本输入功能的控件，类似于文本输入框，但可以处理包含子元素的内容。若要创建 RTF 框，请设置要编辑的元素的 contentEditable 属性。
```
<div contentEditable="true">
    
</div>
```
参考：contentEditable

S

滚动条
可以滚动浏览其中内容的一种容器。你可以通过将元素的 overflow 样式设置为滚动或自动来添加此滚动功能。
```
<div style="overflow:scroll;">
    
</div>
```
参考：overflow
滚动视图
显示一个用户可以放大和缩小的内容视图，并提供能够增强该体验的其他功能，例如贴靠点。
```
<div style=overflow:scroll;-ms-content-zooming:zoom>>
    
</div>
```
参考：overflow、ms-content-zooming
搜索框（仅限 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

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

<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

“设置”浮出控件（仅限 Windows）
提供对应用设置的访问。
```
<div data-win-control="WinJS.UI.SettingsFlyout"></div>
```
参考：SettingsFlyout
单行文本框
请参阅条目"文本框"。
滑块
提供用于选择数值的范围滑块。
```
<input type="range" />
```
参考：input type=range
拆分视图
将一个区域拆分为两个部分：一个可从边缘出现的窗格和一个用于填充可用空间的内容区域。
```
<div data-win-control="WinJS.UI.SplitView">
</div>
```
参考：SplitView
提交按钮

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

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

T

文本框
单行文本输入控件。
```
<input type="text" />
```
参考：input type=text
文本区域
多行文本输入控件。
```
<textarea></textarea>
```
参考：textarea
时间选取器（仅限 Windows）

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

快速入门：添加 Timepicker
切换开关
表示可以在两个状态之间进行切换的一种开关。
```
<div data-win-control="WinJS.UI.ToggleSwitch"></div>
```
参考：ToggleSwitch
工具栏
显示一组命令。Toolbar 可以出现在任何位置，包括 Flyout 或 AppBar。
```
<div data-win-control="WinJS.UI.Toolbar">
</div>
```
参考：Toolbar
工具提示（仅限 Windows）
显示可支持丰富内容（例如图像和带格式文本）的丰富工具提示，以显示有关某事物的详细信息。
```
<div data-win-control="WinJS.UI.ToolTip"></div>
```
参考：WinJS.UI.Tooltip
工具提示，简单
为要素显示一个简单的仅文本工具提示。
```
<element title="tooltip text" />
```
参考：title

U

URL 输入框
一个接受 URL 的单行文本输入控件。
```
<input type="url" />
```
参考：input type=url

V

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

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

参考：video

viewbox
缩放单独的子元素，从而能够不调整大小来填充可用空间。此控件对容器的大小变化和子元素的大小变化进行响应。例如，媒体查询可能会导致纵横比发生变化。
```
<div data-win-control="WinJS.UI.ViewBox"></div>
```
参考：WinJS.UI.ViewBox

W

Web 视图
请参阅条目 "iframe"。

Z

可缩放滚动视图
请参阅条目"滚动视图"。

控件列表 (HTML)

A

B

C

D

E

F

G

H

I

J

L

M

N

P

R

S

T

U

V

W

Z

相关主题

其他资源