Заказные элементы формы HTML

Подробности

Создано 06.03.2011 16:53

Автор: Евгений Гальчук

Просмотров: 885

Вы когда-нибудь хотели использовать ваши собственные изображения для элементов форм таких как: флажки, переключатели, или списки выбора? Речь пойдёт о сценарии, при помощи которого это можно легко сделать. Этот сценарий JavaScript блокирует нормальные объекты ввода формы и выводит вместо них ваши настроенные элементы. Он работает безупречно в Firefox, Сафари, Internet Explorer 7-8, Опера и других обозревателях. В Internet Explorer, списки выбора не стилизуются, но переключатели, и флажки смотрятся и функционируют красиво (для стилизации списков в IE нужно разрешить ActiveX).

Это просто:

<input type="checkbox"  class="styled" />

Использование

Вы можете свободно использовать, изменять этот сценарий в коммерческих целях (как пишет автор). Только оставьте заголовок, его имя и адрес web-сайта в начале сценария JavaScript. Этот сценарий лицензирован согласно Creative Commons license.

Как это работает?

Сценарии JavaScript ищет любой объявленный элемент формы с классом class="styled"; скрывает реальный элемент; придерживает тэг span с CSS классом и элементом; и, наконец, добавляет события к тегу span, которое обрабатывается после нажатия кнопки мышки.

Чтобы заставить флажки, переключатели и списки выбора работать должным образом, Вы должны будете изменить три переменных в сценарии: checkboxHeight, radioHeight и selectWidth на строках 21-23. Если Вы используете изображения, которые создал автор, Вам не нужно изменять переменные, но если Вы собираетесь использовать собственные изображения, Вам придётся изменить вышеуказанные переменные. Флажки и переключатели напрямую связаны с фоновыми прозрачными изображениями PNG. Первые две переменные являются высотой флажков и кнопок-переключателей, третья переменная - ширина списка выбора.

• var checkboxHeight = "25";
• var radioHeight = "25";
• var selectWidth = "190";

CSS

Если Вы делаете ваши собственные изображения, Вы должны изменить несколько пунктов в таблице стилей. В span.checkbox и span.radio, значение высоты (height) должно быть – четвертая часть от полной высоты размера изображений. Вам также может быть придётся изменять значение ширины (width) в селекторе span.select. Вы, вероятно, не будете редактировать другие части CSS, но всё равно, эта часть свободна для использования.

@charset "utf-8";
/* CSS Document */

span.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}

span.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(radio.gif) no-repeat;
display: block;
clear: left;
float: left;
}

span.select {
position: absolute;
width: 158px; /* С включенным дополнением, ширина - 190 пикселей: фактическая ширина    изображения. */
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial, sans-serif;
background: url(select.gif) no-repeat;
overflow: hidden;
}

XHTML

Сценарий не будет настраивать флажки, кнопки или списки выбора, если Вы не объявите стилизованный класс. Просто добавьте класс class="styled" к любому флажку, кнопке, или списку.

<input type="checkbox" name="a" checked="checked" class="styled" />Флажок 1<br />
<input type="checkbox" name="b" class="styled" />Флажок 2<br /><br />
<input type="radio" name="c" checked="checked" class="styled" />Кнопка 1<br />
<input type="radio" name="c" class="styled" />Кнопка 2<br /><br />
Список/Меню <br />
<select name="d" class="styled">
 <option value="1">Опция 1</option>
 <option value="2">Опция 2</option>
 <option value="3">Опция 3</option>
 <option value="4">Опция 4</option>
</select>

• < Назад
• Вперёд >