Данная статья посвящена таким элементам как select, radio и checkbox. Оформление данных элементов создается самим браузером и задать индивидуальное оформление через css им нельзя. Данный js скрипт парсит DOM дерево, получает данные о input полях, скрывает их и позиционирует на их место новое графическое оформление. Вся передача данных, введенных в замененые поля передается через js скрипт в настоящий input, тем самым сохраняя полную работоспособность всех полей.
Данное решение совместимо со всеми популярными браузерами, включая IE6. Большим плюсом можно выделить достаточно сжатый обьем кода для подобного решения, так как аналогичные скрипты, основанные на mootools и jquery "весят" в несколько раз больше, поэтому мной было решено привести примеры именно с использованием
niceforms.js (автор Lucian Slatineanu)
Сначала нам нужно подключить к шаблону сам скрипт
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/niceforms.js"></script>
Далее создаем отдельный файл стилей или же вносим приведенные ниже стили для каждого из элементов в текущий файл стилей шаблона.
Если Вами было решено создать отдельный файл css, то не забудьте поключить его в шаблон
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>css/niceforms.css" rel="stylesheet" type="text/css" />
Все оформление элемента меняется картинками.
Обратите внимание, что класс .outtaHere "выкидывает" стандартную radio кнопку. Данный класс обязателен для всех элементов.1) Создаем radio кнопку<form action="#" method="post" class="niceform">
<input type="radio" name="radioSet" id="option1" value="0" /><label for="option1">Опция 1</label>
<br/>
<input type="radio" name="radioSet" id="option2" value="1" /><label for="option2">Опция 2</label>
</form>
В css добавляем
.outtaHere { position:absolute; left:-3000px; }
.radioArea, .radioAreaChecked { display:block; float:left; clear:left; width:15px; height:14px; font-size:0; cursor:pointer; }
.radioArea { background:url(images/radio.gif) no-repeat left top; }
.radioAreaChecked { background:url(images/radio.gif) no-repeat left bottom; }
<form action="#" method="post" class="niceform">
<input type="checkbox" name="checkSet1" id="check1" value="0" /><label for="check1">1</label><br />
<input type="checkbox" name="checkSet2" id="check2" value="1" checked="checked" /><label for="check2">2</label><br />
<input type="checkbox" name="checkSet3" id="check3" value="2" /><label for="check3">3</label><br />
</form>
В css добавляем
.outtaHere { position:absolute; left:-3000px; }
.checkboxArea, .checkboxAreaChecked { display:block; float:left; clear:left; width:13px; height:13px; font-size:0; padding:0; margin:0; cursor:pointer; }
.checkboxArea { background:url(checkbox.gif) no-repeat left top;}
.checkboxAreaChecked { background:url(checkbox.gif) no-repeat left bottom; }
.focused { border:1px dotted #ddd; }
<form action="#" method="post" class="niceform">
<select size="1" id="mySelect2" name="mySelect2" class="width_160">
<option value="Test area no.2">Test area no.2</option>
<option value="Another test">Another test</option>
<option selected="selected" value="And another one">And another one</option>
<option value="And yet another one">And yet another one</option>
<option value="One last option for me">One last option for me</option>
</select>
</form>
В css добавляем
.outtaHere { position:absolute; left:-3000px; } /*** Выкидывает стандартную кнопку radio ***/
/* Оформление самого select*/
.selectArea { width:200px; height:21px; background:url(select_bg.gif) repeat-x left top; }
.selectArea .left { width:8px; height:21px; float:left; background:url(select_left.gif) no-repeat left top; }
.selectArea .right { width:21px; height:21px; float:right; background:url(select_right.gif) no-repeat left top; }
.selectArea .right a { display:block; width:200px; height:21px; margin-left:-179px; position:absolute; }
.selectArea .right i { display:none; }
.selectArea .center { width:160px; color:#FFF; padding-top:3px; overflow:hidden; white-space:nowrap; }
/* Оформление выпадающего списка */
.optionsDivInvisible, .optionsDivVisible { position:absolute; margin-top:-1px; margin-left:3px; width:172px; background:#6f7074; padding:2px; font-size:11px; z-index:20; }
.optionsDivInvisible { display:none; }
.optionsDivVisible { display:block; }
.optionsDivVisible p { margin:0; padding:0; }
.optionsDivVisible a { color:#F2F2F2; text-decoration:none; display:block; padding:1px 4px; border:1px solid #6f7074; }
.optionsDivVisible a:hover { color:#FFF; background:#5F6062; border-color:#cfd0d6; }
Как видно при помощи niceforms.js можно создать абсолютно любое оформление для select, radio и checkbox.
Так же используя niceforms.js можно оформлять textfield и button, но это реализуемо и через css, поэтому не буду приводить примеры для них + из скрипта удалены функции для них с целью уменьшения обьема
Примеры работы[вложение удалено Администратором]
24.11.2016, 19:11:59