共用方式為


控制項清單 (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>
    

    參考: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" />
    

    參考:buttoninput type=button

    快速入門:新增按鈕

C

  • 畫布
    在文件上提供用來繪製、轉譯和操作影像和圖形的物件。

    <canvas />
    

    參考:canvas

    快速入門:繪製至畫布

  • 核取方塊
    多個核取方塊控制項

    代表使用者可以選取和清除的核取方塊。

    <input type="checkbox" />
    

    參考:input type=checkbox

    快速入門:新增核取方塊

  • 下拉式方塊
    請參閱"選取"項目。

  • 內容對話方塊
    顯示需要使用者注意或明確動作的重要資訊,並暫時封鎖與應用程式中其他元素的互動。

    <div 
      data-win-control="WinJS.UI.ContentDialog">
      <!-- Content -->
    </div
    

    參考:ContentDialog

  • 操作功能表
    在 Windows 市集應用程式中提供輕量型功能表,讓使用者可以在文字或 UI 物件上存取動作 (如剪貼簿命令)。

    var menu = new Windows.UI.Popups.PopupMenu();
    

    參考:Windows.UI.Popups.PopupMenu

D

E

  • 電子郵件輸入方塊
    單行輸入控制項,可接受一或多個電子郵件地址。

    <input type="email" />
    

    參考:input type=email

F

  • 檔案上傳
    建立包含文字方塊和瀏覽按鈕的檔案上傳物件。

    <input type="file" />
    

    參考:input type=file

  • 彈性方塊
    定義會在定義方塊維度時考慮可用空間的配置,該配置會啟用相對大小和定位。

    <div style="display: -ms-box;">
        <!-- Child elements -->
    </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}">
        <!-- Child elements -->
    </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 Hub 控制項範例

  • 中樞區段 (僅限 Windows)
    定義中樞的區段。

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

    參考:WinJS.UI.HubSection

    HTML Hub 控制項範例

  • 超連結
    請參閱 "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

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>
    

    參考:buttoninput type=reset

    快速入門:新增按鈕

  • Rich Edit 方塊/RTF 方塊
    提供文字輸入功能的控制項,它與文字輸入方塊類似,但是可以處理包含子元素的內容。若要建立 RTF 方塊,請設定要編輯之元素的 contentEditable 屬性。

    <div contentEditable="true">
        <!-- Elements to edit. -->
    </div>
    

    參考:contentEditable

S

  • 捲軸
    可讓您捲動其中內容的容器。您可以新增元素的 overflow 樣式並設定為 scroll 或 auto,以新增此捲動功能。

    <div style="overflow:scroll;">
        <!-- Contents -->
    </div>
    

    參考:overflow

  • 捲動檢視
    顯示使用者可以放大/縮小的內容檢視,以及提供增強該經驗的其他功能 (例如貼齊點)。

    <div style=overflow:scroll;-ms-content-zooming:zoom>>
        <!-- Contents to edit. -->
    </div>
    

    參考:overflowms-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>
    

    參考:buttoninput 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)
    TimePicker 淺色樣式

    讓使用者指定時間。

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

    參考:WinJS.UI.TimePicker

    快速入門:新增 TimePicker

  • 切換開關
    代表可以在兩個狀態之間切換的開關。

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

    參考:ToggleSwitch

  • 工具列
    顯示一組命令。Toolbar 可以顯示在任何位置,包括在 FlyoutAppBar 中。

    <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

  • 網頁檢視
    請參閱 "iframe" 項目。

Z

  • 可縮放捲動檢視
    請參閱"捲動檢視"項目。

相關主題

try.buildwinjs.com