Список элементов управления (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Приложениям среды выполнения Windows на JavaScript доступна обширная библиотека элементов управления для поддержки разработки пользовательского интерфейса. Часть элементов управления имеет визуальное представление, а остальные элементы используются как контейнеры для других элементов управления или содержимого — например для изображений и мультимедиа.

В этом разделе приведен алфавитный список наиболее распространенных элементов управления для приложений среды выполнения Windows на JavaScript.

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

  • app bar (строка команд приложения)
    Предоставляет панель инструментов для отображения команд конкретного приложения.

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

    Справка: WinJS.UI.AppBar

    Краткое руководство: добавление панели приложения

  • audio
    Указывает звуковой файл, воспроизводящийся в документе. Например, музыкальные файлы или звуковые эффекты.

    <audio>
    <source src="uri" type="audioType" />
</audio>

    Справка: audio

B

C

  • canvas (полотно)
    Предоставляет объект, который используется для рисования, отображения изображений или графических объектов и управления ими в документе.

    <canvas />

    Справка: canvas

    Краткое руководство: рисование на полотне

  • checkbox (флажок)
    Несколько элементов управления “флажок”

    Представляет флажок, который пользователь может установить и снять.

    <input type="checkbox" />

    Справка: input type=checkbox

    Краткое руководство: добавление флажков

  • combo box (поле со списком)
    См. "выбор".

  • диалоговое окно содержимого
    Отображает важнейшую информацию, которая требует внимания или явного действия пользователя, и временно блокирует взаимодействие с другими элементами в приложении.

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

    Справка: ContentDialog

  • context menu (контекстное меню)
    Предоставляет простое меню, которое дает пользователю доступ к действиям (например, командам буфера обмена), применимым к тексту или объектам пользовательского интерфейса в приложениях Магазина Windows.

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

    Справка: Windows.UI.Popups.PopupMenu

D

E

  • email-input box (поле ввода адреса электронной почты)
    Элемент управления для однострочного ввода, который принимает один или несколько адресов электронной почты.

    <input type="email" />

    Справка: input type=email

F

  • file upload (отправка файла)
    Создает объект отправки файла с текстовым полем и кнопкой обзора.

    <input type="file" />

    Справка: input type=file

  • адаптируемый блок
    Определяет макет, который учитывает доступное пространство при определении размеров создаваемого поля, а также поддерживает установку относительных размеров и расположения.

    <div style="display: -ms-box;">
    <!-- Child elements -->
</div>

    Справка: display

  • flip view (представление отражения)
    Отображает элементы коллекции по одному.

    <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

  • grid (сетка)
    Макет CSS, который определяет гибкую область сетки, состоящую из строк и столбцов.

    <div style="{display: -ms-grid}">
    <!-- Child elements -->
</div>

    Справка: display

  • grid view (представление сетки)
    Элемент управления ListView с макетом "Сетка". Подробнее см. "представление списка".

    <div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

    Справка: WinJS.UI.ListView

    Краткое руководство: добавление элемента управления ListView

H

I

  • iframe
    Встроенный перемещаемый фрейм, который может отображать другой документ.

    <iframe src="url" />

    Справка: iframe

  • img
    Выводит изображение.

    <img src="url" />

    Справка: img

  • item container (контейнер элемента)
    Определяет элемент, который можно сжимать и перетаскивать и по которому можно проводить пальцем.

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

    Справка: WinJS.UI.ItemContainer

    Пример ItemContainer на HTML

J

  • jump view (представление перехода)
    См. "контекстное масштабирование".

L

M

  • media element (элемент мультимедиа)
    См. записи для "аудио" и "видео."

  • проигрыватель мультимедиа
    См. записи для "аудио" и "видео."

  • menu (меню)
    Выводит меню на экран. (только Windows)

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

    Справка: WinJS.UI.Menu

  • команда меню (только Windows)
    Представляет команду, отображаемую в объекте Menu.

    <button data-win-control="WinJS.UI.MenuCommand" />

    Справка: WinJS.UI.MenuCommand

  • message dialog (окно сообщения)
    Отображает сообщение, которое требует немедленной реакции пользователя.

    Справка: Windows.UI.Popups.MessageDialog

    Краткое руководство: добавление диалогового окна сообщения

  • multi-line text box (многострочное текстовое поле)
    См. "область текста".

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

  • number input box (числовое поле ввода)
    Элемент управления для однострочного ввода, который принимает числовое значение.

    <input type="number" />

    Справка: input type=number

P

R

  • radio button (переключатель)
    Тип элемента управления, который позволяет выбрать только одно значение из набора. Для использования этого элемента управления необходимо присвоить всем кнопкам одно и то же имя, чтобы связать все кнопки в наборе переключателей.

    <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

  • range
    См. "ползунок".

  • оценка (только 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

  • кнопка сброса
    Кнопка сброса

    Сбрасывает данные в форме.

    <button type="reset">Reset</button>

    Справка: button, input type=reset

    Краткое руководство: добавление кнопки

  • rich edit box/rich text box (поле ввода форматированного текста/текстовое поле в формате RTF)
    Элемент управления, который предоставляет функциональные возможности поля текстового ввода, но может обрабатывать содержимое с дочерними элементами. Чтобы создать текстовое поле в формате RTF, задайте свойство contentEditable для элементов, которые необходимо изменить.

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

    Справка: contentEditable

S

  • scroll bar (полоса прокрутки)
    Контейнер, который позволяет прокрутить содержимое. Чтобы добавить прокрутку, присвойте свойству overflow элемента значение scroll или auto.

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

    Справка: overflow

  • scroll view (представление прокрутки)
    Отображает представление содержимого, которое пользователь может увеличивать или уменьшать, и предоставляет дополнительные функциональные возможности, например точки прикрепления, которые улучшают взаимодействие с пользователем.

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

    Справка: overflow, ms-content-zooming

  • поле поиска (только Windows)
    Позволяет выполнять поисковые запросы и выбирать предлагаемые варианты.

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

    Справка: WinJS.UI.SearchBox

    Пример элемента управления "Поле поиска"

  • select (выбор)
    Представляет список, поле со списком или раскрывающийся список.

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

    Справка: select

  • semantic zoom (контекстное масштабирование)
    Позволяет переключаться между увеличенным и уменьшенным представлениями коллекции элементов.

    <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

  • single-line text box (однострочное текстовое поле)
    См. "текстовое поле".

  • slider (ползунок)
    Предоставляет элемент управления "Ползунок" с диапазоном значений.

    <input type="range" />

    Справка: input type=range

  • комбинированный режим
    Разделяет область на две части: панель, которая может появляться из-за края, и область содержимого, которая заполняет доступное пространство.

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

    Справка: SplitView

  • submit button (кнопка "Отправить")
    Элемент управления “Кнопка “Отправить””

    Создает кнопку, которая при нажатии отправляет форму.

    <button type="submit">Submit</button>

    Справка: button, input type=submit

    Краткое руководство: добавление кнопки

  • SVG
    Определяет SVG-документ или его фрагмент, который может отображать векторную графику.

    <svg xmlns="http://www.w3.org/2000/svg"></svg>

    Справка: svg

T

  • text box (текстовое поле)
    Элемент управления для однострочного текстового ввода.

    <input type="text" />

    Справка: input type=text

  • text area (область текста)
    Элемент управления для многострочного текстового ввода.

    <textarea></textarea>

    Справка: textarea

  • средство выбора времени (только Windows)
    Элемент управления TimePicker в светлом стиле

    Позволяет пользователю задать время.

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

    Справка: WinJS.UI.TimePicker

    Краткое руководство: добавление элемента управления TimePicker

  • toggle switch (тумблер)
    Представляет переключатель, который может находиться в одном из двух состояний.

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

    Справка: ToggleSwitch

  • панель инструментов
    Отображает набор команд. Toolbar может возникать в любом месте, в том числе в Flyout и AppBar.

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

    Справка: Toolbar

  • подсказка (только Windows)
    Отображает подсказку, которая поддерживает содержимое в формате RTF (например, изображения и форматированный текст) для вывода более подробных сведений.

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

    Справка: WinJS.UI.Tooltip

  • tooltip, simple (простая подсказка)
    Отображает текстовую подсказку для элемента.

    <element title="tooltip text" />

    Справка: title

U

  • URL input box (поле ввода URL-адреса)
    Элемент управления для однострочного ввода URL-адресов.

    <input type="url" />

    Справка: input type=url

V

  • video (видео)
    Указывает видео, которое необходимо воспроизвести в документе.

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

    Справка: video

  • viewbox
    Масштабирует отдельный дочерний элемент, чтобы заполнить доступное пространство без изменения его размера. Этот элемент управления влияет на изменение размера контейнера, а также изменение размера дочернего элемента. Например, в результате запроса носителя могут измениться пропорции.

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

    Справка: WinJS.UI.ViewBox

W

  • web view (представление веб-страницы)
    См. "iframe".

Z

  • zoomable scroll view (масштабируемое представления прокрутки)
    См. "представление прокрутки".

Связанные разделы

try.buildwinjs.com