Можностей, предоставляемых веб-разработчикам


ПОЛЗУНОК СО СКРИПТОМ ДЛЯ ВЫВОДА



Pdf көрінісі
бет129/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   125   126   127   128   129   130   131   132   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

ПОЛЗУНОК СО СКРИПТОМ ДЛЯ ВЫВОДА
Мы уже познакомились с 
 
type=range>
 ранее в этой главе. Обратите внимание, 
что по умолчанию браузеры отображают ползунок, но не выводят для него минимальное, 
максимальное и текущее значение. Давайте напишем код для следующего случая: пусть нам 
нужно показать пользователю диапазон допустимых значений в виде ползунка, причем мы 
хотим добиться автоматического вывода значений верхней и нижней границы и динами-
ческого вывода текущего значения ползунка.
Ползунок будет перемещаться от 1 до 11, как и все нормальные элементы управления (будь 
то гитарный усилитель или что-либо другое), с шагом 1, и поскольку это значение исполь-
зуется по умолчанию, мы можем вообще не добавлять атрибут 
step
.

Чтобы отобразить значения верхней и нижней границы, будем использовать генерируемый 
контент (который не работает для ползунков в браузерах WebKit).
input[type=range]::before {content: attr(min);}
input[type=range]::after {content: attr(max);}
Этот код отобразит нужные значения и создаст для них оформление с помощью CSS. В ка-
честве примера (рис. 3.12) приведем результат работы следующего кода.
input[type=range]{width:500px; color:red; font-family:
¬ cursive; font-size:2em;}
Рис . 3 .12 .
 Визуализация 
 и генерируемые значения min и max в Opera
Чтобы отобразить текущее значение ползунка, мы будем использовать новый элемент 

.




Достарыңызбен бөлісу:
1   ...   125   126   127   128   129   130   131   132   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет