HorizontalSlider

Предположим, что, будучи любителем кофеина, вы захотели создать горизонтальный движок, с помощью которого можно регулировать уровень кофеина в различных напитках. Первая попытка добавления простенького движка в страницу может выглядеть, как показано в примере 13.13. Не забудьте при этом сначала подключить к странице ресурс dijit.form.Slider.
Пример 13.13. HorizontalSlider (Дубль 1)
value="100"
maximum="175"
minimum="2"
style="margin: 5px;width:300px; height: 20px;">


В этом фрагменте создается простой движок без какихлибо меток; значения, которые можно получить, перемещая движок, лежат в диапазоне от 2 до 175, а размеры диджита определяются стилем. Значение по умолчанию равно 100, а при изменении значения метод onСlick извлекает его и выводит в консоль. Обратите внимание, что щелчок мышью в пределах диджита приводит к перемещению бегунка в позицию щелчка и к соответствующему изменению значения. Пока все идет неплохо. Для дальнейшего усовершенствования движка уберем кнопки, что располагаются по краям движка, добавив атрибут showButtons="false", и поместим сверху линейку HorizontalRule с метками HorizontalRuleLabels.


Все, что необходимо, уже подключено к странице, поэтому нам не потребуется подключать какиелибо дополнительные ресурсы. Однако, мы подключим модуль dojo.number, чтобы обрести средства форматирования значений при выводе на консоль. Просто добавьте в тело существующего движка дополнительную разметку, как показано в примере 13.14.

Пример 13.14. HorizontalSlider (Дубль 2)
value="100"
maximum="175"
minimum="2"
showButtons="false"
style="margin: 5px;width:300px; height: 20px;">
    style="height:10px;fontYsize:75%;color:gray;" count="6">

count=6 style="height:5px;">



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


Кроме того, в атрибуте container указано одно из значений перечисления – topDecoration, которое определяет местоположение линейки и меток.

Несмотря на то что движок уже получил линейку с процентами, было бы неплохо вывести некоторые данные в нижней части движка. Делается это точно так же, как и прежде, только вместо значения topDecoration будем использовать значение bottomDecoration. Однако мы не будем полагаться на возможности диджита вычислять числовые значения и определим содержимое списка сами, как показано в примере 13.15, включая явные теги
в метках, состоящих из нескольких слов, чтобы обеспечить привлекательность отображения.

Пример 13.15. HorizontalSlider (Дубль 3)
value="100"
maximum="175"
minimum="2"
showButtons="false"
style="margin: 5px;width:300px; height: 20px;">
    style="height:10px;fontsize:75%;color:gray;" count="6">

count=6 style="height:5px;">

count=5 style="height:5px;">

    container="bottomDecoration"
    style="height:10px;fontYsize:75%;color:gray;">
  1. green
    tea

  2. coffee

  3. red
    bull


.



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
Button
CheckBox
ComboBox
ComboButton
CurrencyTextBox

Вернуться в раздел: Dojo / Виджеты форм