Поделиться через

Элементы управления по функциям (HTML)

  • Статья

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

Приложения среды выполнения Windows на JavaScript предоставляют элементы управления, которые выполняют различные функции. Чтобы выбрать элемент управления для сценария, сравните элементы управления, имеющие схожие функциональные возможности. (Алфавитный список элементов управления см. в разделе Список элементов управления.)

См. эти компоненты в действии в нашей серии о компонентах приложения, с начала и до конца: Пользовательский интерфейс приложения Магазина Windows от начала до конца

Панели и команды приложения

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

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

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

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

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

    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

    Пример элемента управления NavBar на HTML

  • всплывающее меню
    См. "контекстное меню".

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

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

    Справка: Toolbar

Кнопки

Элементы управления для коллекций и данных

Всплывающие элементы

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

    <div 
  data-win-control="WinJS.UI.ContentDialog">
  <!-- Content -->
</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

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

    Справка: 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)
    Отображает подсказку, которая поддерживает содержимое в формате RTF (например, изображения и форматированный текст) для вывода более подробных сведений.

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

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

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

    <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;">
    <!-- Child elements -->
</div>

    Справка: display

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

    <div style="{display: -ms-grid}">
    <!-- Child elements -->
</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

    Пример ItemContainer на HTML

  • сдвиг представления прокрутки
    См. "представление прокрутки".

  • сводка
    Создает набор вкладок, отображающих несколько элементов.

    <div data-win-control='WinJS.UI.Pivot'></div>

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

  • сводный элемент
    Создает вкладку в наборе вкладок.

    <div data-win-control='WinJS.UI.PivotItem'></div>

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

  • полоса прокрутки
    Контейнер, который позволяет прокрутить содержимое. Чтобы добавить прокрутку, присвойте свойству 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

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

    <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

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

Элементы управления "Ход выполнения"

Элементы управления для оценки

Элементы управления для выбора

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

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

    <input type="checkbox" />

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

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

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

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

    Задает дату.

    <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

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

  • поле поиска (только 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

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

    <input type="range" />

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

  • средство выбора времени (только 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

Элементы управления для текста

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

    <input type="email" />

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

  • многострочное текстовое поле
    См. "область текста".

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

    <input type="number" />

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

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

    <input type="password" />

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

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

    <div contentEditable="true">
    <!-- Elements to edit. -->
</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)
    Отображает подсказку, которая поддерживает содержимое в формате RTF (например, изображения и форматированный текст) для вывода более подробных сведений.

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

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

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

    <element title="tooltip text" />

    Справка: title

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

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

try.buildwinjs.com

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

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

Изменения API WinJS для Windows Phone