JqTransform — нестандартное оформление форм

Все реже на сайтах можно встретить стандартное оформление элементов форм — checkbox, radiobutton, textarea, select и др. Если средства CSS еще могут справиться с визуальным оформлением текстовых полей и кнопок, то внешний вид чекбоксов и радио-кнопок им не подвластен.

Перепробовала уйму способов, использующих jQuery, но идеального решения нет. Однако недавно наткнулась на хороший плагин jqTransform, который отлично справляется с задачей.

Исходники с демо-примером можно скачать на официальном сайте.

Поключаем плагин

Нужна собственно сама библиотека jQuery, скрипт плагина и его инициализация:

1
2
3
4
5
6
7
<script type=»text/javascript» src=»jquery-1.5.2.min.js»></script>
<script type=»text/javascript» src=»jquery.jqtransform.js»></script>
<script type=»text/javascript»>
$(function(){
$(‘form’).jqTransform();
});
</script>

В 5 строке указываем, применительно к каким элементам будет использоваться скрипт. В данном случае — ко всем формам, но если нужно избирательное оформление, то можно задать класс или идентификатор.

В качестве параметра метода jqTransform(); можно передать путь к папке, в которой лежит графика, как это сделано в демо-примере:

1
2
3
$(function(){
$(‘form’).jqTransform({imgPath:’jqtransformplugin/img/’});
});

И, конечно, не забываем подключить стили плагина, без которых ничего не заработает. Кстати, править стилевое оформление надо именно здесь:

1
<link rel=»stylesheet» type=»text/css» href=»jqtransform.css»>