控制項清單 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
使用 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>音訊
指定在文件中播放的音效或音訊內容 (如音樂或效果)。<audio> <source src="uri" type="audioType" /> </audio>參考：audio
B
返回按鈕 (僅限 Windows)
以按鈕的形式提供向後瀏覽。<div><button data-win-control="WinJS.UI.BackButton"></button></div>按鈕
.png "按鈕控制項")
代表一個按鈕控制項。
<button>A button</button>- 或 -
<input type="button" value="A button" />
C
畫布
在文件上提供用來繪製、轉譯和操作影像和圖形的物件。<canvas />參考：canvas
核取方塊
.png "多個核取方塊控制項")
代表使用者可以選取和清除的核取方塊。
<input type="checkbox" />下拉式方塊
請參閱"選取"項目。內容對話方塊
顯示需要使用者注意或明確動作的重要資訊，並暫時封鎖與應用程式中其他元素的互動。<div data-win-control="WinJS.UI.ContentDialog"> <!-- Content --> </div操作功能表
在 Windows 市集應用程式中提供輕量型功能表，讓使用者可以在文字或 UI 物件上存取動作 (如剪貼簿命令)。var menu = new Windows.UI.Popups.PopupMenu();
D
日期選擇器 (僅限 Windows)
.png "DatePicker 淺色樣式")
設定日期。
<div data-win-control="WinJS.UI.DatePicker"></div>參考：DatePicker
下拉式清單
請參閱"選取"項目。
E
電子郵件輸入方塊
單行輸入控制項，可接受一或多個電子郵件地址。<input type="email" />
F
檔案上傳
建立包含文字方塊和瀏覽按鈕的檔案上傳物件。<input type="file" />彈性方塊
定義會在定義方塊維度時考慮可用空間的配置，該配置會啟用相對大小和定位。<div style="display: -ms-box;"> <!-- Child elements --> </div>參考：display
翻轉檢視
顯示集合，一次一個項目。<div data-win-control="WinJS.UI.FlipView"></div>飛出視窗 (僅限 Windows)
顯示一則要求使用者互動的訊息。(與對話方塊不同的是，飛出視窗不會建立另一個視窗，也不會封鎖其他使用者互動)。<div data-win-control="WinJS.UI.Flyout"></div>
G
格線
定義由欄和列組成之彈性格線區域的 CSS 配置。<div style="{display: -ms-grid}"> <!-- Child elements --> </div>參考：display
格線檢視
具備格線配置的 ListView。如需詳細資訊，請參閱"清單檢視"項目。<div data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
H
Html 控制項
顯示 HTML 網頁的內容。<div data-win-control="WinJS.UI.HtmlControl"></div>中樞 (僅限 Windows)
建立由各個可瀏覽區段組成的中樞瀏覽模式。每個區段都由中樞區段加以定義。<div data-win-control="WinJS.UI.Hub"></div>參考：WinJS.UI.Hub
中樞區段 (僅限 Windows)
定義中樞的區段。<div data-win-control="WinJS.UI.HubSection"></div>超連結
請參閱 "a" 項目。
I
iframe
可以顯示另一份文件的內嵌浮動畫面。<iframe src="url" />參考：iframe
img
顯示影像。<img src="url" />參考：img
項目容器
定義一個可以按下、撥動以及拖曳的項目。<div data-win-control="WinJS.UI.ItemContainer"></div>
J
- 捷徑檢視
請參閱"語意式縮放"項目。
L
標籤
為頁面上的另一個元素指定標籤。<label for="otherControl">Label text</label> <input type="text" id="otherControl" />參考：label
清單方塊
請參閱"選取"項目。清單檢視
在清單或格線配置中顯示資料集合。<div data-win-control="WinJS.UI.ListView"></div>
M
媒體元素
請參閱"音訊"和"視訊"項目。媒體播放程式
請參閱"音訊"和"視訊"項目。功能表
顯示功能表。 (僅限 Windows)<div data-win-control="WinJS.UI.Menu"></div>功能表命令 (僅限 Windows)
代表在 Menu 物件中顯示的命令。<button data-win-control="WinJS.UI.MenuCommand" />訊息對話方塊
顯示需要使用者立即回應的訊息。多行文字方塊
請參閱 "textarea" 項目。
N
瀏覽列 (僅限 Windows)
在使用者可以顯示或隱藏的工具列上顯示瀏覽命令。<div data-win-control="WinJS.UI.NavBar"></div>瀏覽列命令 (僅限 Windows)
代表瀏覽列容器中的瀏覽命令。<div data-win-control="WinJS.UI.NavBarCommand"></div>瀏覽列容器 (僅限 Windows)
在瀏覽列包含一組瀏覽列命令。<div data-win-control="WinJS.UI.NavBarContainer"></div>數值輸入方塊
接受數值的單行輸入控制項。<input type="number" />
P
頁面控制項
代表瀏覽應用程式中的自訂控制項或頁面。移動瀏覽捲動檢視
請參閱"捲動檢視"項目。密碼輸入方塊
單行文字輸入控制項與文字輸入控制項類似，但是使用者輸入文字時不會顯示。<input type="password" />樞紐分析
建立顯示多個項目的索引標籤控制項。<div data-win-control='WinJS.UI.Pivot'></div>樞紐分析項目
在索引標籤控制項內建立索引標籤。<div data-win-control='WinJS.UI.PivotItem'></div>快顯功能表
請參閱"操作功能表"項目。進度列
.png "進度控制項樣式")
顯示指示工作正在進行的進度列。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>範圍
請參閱"滑桿"項目。評等 (僅限 Windows)
.png "評等控制項")
讓使用者進行評等或檢視現有評等。
<div data-win-control="WinJS.UI.Rating"></div>Repeater
從一組資料產生 HTML。使用這個控制項產生項目清單。<div data-win-control="WinJS.UI.Repeater"></div>重設按鈕
.png "重設按鈕")
重設表單中的資料。
<button type="reset">Reset</button>Rich Edit 方塊/RTF 方塊
提供文字輸入功能的控制項，它與文字輸入方塊類似，但是可以處理包含子元素的內容。若要建立 RTF 方塊，請設定要編輯之元素的 contentEditable 屬性。<div contentEditable="true"> <!-- Elements to edit. --> </div>
S
捲軸
可讓您捲動其中內容的容器。您可以新增元素的 overflow 樣式並設定為 scroll 或 auto，以新增此捲動功能。<div style="overflow:scroll;"> <!-- Contents --> </div>參考：overflow
捲動檢視
顯示使用者可以放大/縮小的內容檢視，以及提供增強該經驗的其他功能 (例如貼齊點)。<div style=overflow:scroll;-ms-content-zooming:zoom>> <!-- Contents to edit. --> </div>搜尋方塊 (僅限 Windows)
讓使用者執行搜尋查詢並選取建議。<div data-win-control="WinJS.UI.SearchBox"></div>選取
代表清單方塊、下拉式方塊或下拉式清單。<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>設定飛出視窗 (僅限 Windows)
提供對應用程式設定的存取。<div data-win-control="WinJS.UI.SettingsFlyout"></div>單行文字方塊
請參閱"文字方塊"項目。滑桿
提供範圍滑桿以選取數值。<input type="range" />分割檢視
將區域分割成兩個部分：一個可從邊緣顯示的窗格，以及一個填滿可用空間的內容區域。<div data-win-control="WinJS.UI.SplitView"> </div>參考：SplitView
提交按鈕
.png "提交按鈕控制項")
建立按一下時會提交表單的按鈕。
<button type="submit">Submit</button>svg
定義可以轉譯向量圖形的 SVG 文件或文件片段。<svg xmlns="http://www.w3.org/2000/svg"></svg>參考：svg
T
文字方塊
單行文字輸入控制項。<input type="text" />文字區域
多行文字輸入控制項。<textarea></textarea>參考：textarea
時間選擇器 (僅限 Windows)
.png "TimePicker 淺色樣式")
讓使用者指定時間。
<div data-win-control="WinJS.UI.TimePicker"></div>切換開關
代表可以在兩個狀態之間切換的開關。<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>簡單工具提示
為元素顯示一個簡單、僅包含文字的工具提示。<element title="tooltip text" />參考：title
U
URL 輸入方塊
接受 URL 的單行文字輸入控制項。<input type="url" />
V
視訊
指定要在文件中播放的視訊內容。<video controls="controls"> <source src="url" type="videoType" /> </video>參考：video
viewbox
調整單一子元素使其填滿可用的空間，無須調整大小。這個控制項會回應容器大小的變更，以及子元素大小的變更。例如，媒體查詢可能會導致外觀比例變更。<div data-win-control="WinJS.UI.ViewBox"></div>
W
- 網頁檢視
請參閱 "iframe" 項目。
Z
- 可縮放捲動檢視
請參閱"捲動檢視"項目。