0 Пользователей и 1 Гость просматривают эту тему.
  • 11 Ответов
  • 40796 Просмотров
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Данная статья посвящена таким элементам как 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; }

2) Создаем checkbox
Код
<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; }

3) Создаем select
Код
<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, поэтому не буду приводить примеры для них + из скрипта удалены функции для них с целью уменьшения обьема

Примеры работы

[вложение удалено Администратором]
« Последнее редактирование: 06.11.2008, 17:09:23 от poizon »
*

Shuravi

  • Новичок
  • 9
  • 0 / 1
Привет, может кто подскажет, где в Joomla 1.5.8 прячутся эти цвета (см. пример).
В 1.0.х когдато давно, удалось найти и заменить. В ступоре три дня сижу из за них.
--
http://picasaweb.google.com/lh/photo/QlF-hV9qa-sabhkHKLyoaw?feat=directlink
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
стандартные формы (чекбоксы, радио, селекты) не имеют стилей.
Эта статья как раз о том, как их сделать
*

Shuravi

  • Новичок
  • 9
  • 0 / 1
U mena cheto ne poluchaetsa s "niceforms.js" , u mena legaci mambot opublikovan, mojet eto izza nego..
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
js файлы в 1.5 нужно подключать иначе. Этот пост относится к ветке 1.0.х и примеры приведены непосредственно под нее. Прочтите в разделе faq по 1.5 как делать шаблоны для нее, там есть примеры подключения css стилей, тут нужно сделать налогично или же прописывать в шаблоне абсюлютные пути к файлам niceforms.js и niceforms.css
*

Shuravi

  • Новичок
  • 9
  • 0 / 1
Spasibo, obiazatelno budu probovat

Не могу понять как заставить работать скрипт...
Подключил стили и скрипт, в стилях изменил только свойства для radio - не работает
Обратил внимание, что в стандартном шаблоне модуля Голосования у формы не указан класс, добавил class="niceform" - не работает.
Как всё таки применить данный скрипт к голосованию?
P.S. Кэш отключён!
*

Mirsaytov

  • Захожу иногда
  • 57
  • 16 / 0
все классно работает, спасибо!

вот только походу идет конфлик с доп скриптом, который я поставил, чтобы чекбокс можно было выбрать только 1
после кстановки вышеуказанного скрипта опять выбираются все флажки

Код
<script type="text/javascript" language="javascript"> 
function like_a_radio(oBox) {
var el, i = 0, f = oBox.form;
while (el = f[i++]) if (el.type == 'checkbox') el.checked = (el == oBox && el.checked);
}
</script>

Код
<input type="checkbox" onclick="like_a_radio(this)" />

не подскажите как решить данную проблему? Заранее спасибо!
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
можно весь скрипт в студию? или то, что приведено выше и есть весь код? просто пока что нет времени проверять работу сего...
« Последнее редактирование: 10.10.2009, 03:32:00 от poizon »
*

Mirsaytov

  • Захожу иногда
  • 57
  • 16 / 0
Все что приведено выше и есть скрипт, который не дает выбирать несколько флажков, а только один

Есть способ замаскировать ридиобоксы под флажки, но мне нужно использовать одновременно и флажки и радиобоксы
*

Mirsaytov

  • Захожу иногда
  • 57
  • 16 / 0
решил заменить флажки радиокнопками, классный скрипт!

поиздевался над mainmenu, в итоге получилось  _http://fooflooff.ru/products.html
*

Markiz

  • Новичок
  • 15
  • 1 / 0
Народ очень прошу опишите как то же самое создать в Joomla 1.5.

Попытался редактировать встроенный шаблон ja_purity для Joomla 1.5

1)скачал вышеприложенный архив demo
2)кинул niceforms.js в templates\ja_purity\js\
3)кинул niceforms.css в templates\ja_purity\css\
4)из папки image в ja_purity\images\ соответственно
5)открыл templates\ja_purity\index.php и вставил
Код
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/niceforms.js"></script>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>css/niceforms.css" rel="stylesheet" type="text/css" />
6)добавил в модуль mod_jea_search\tmpl\default.php строчку
Код
<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>
7) появились обычные 2 радиокнопки.

посмотрел через FireBug. скрипты в в шапке подключены

HELP :'(
« Последнее редактирование: 31.08.2010, 20:04:25 от Markiz »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Изменение стандартного отображения блога категории

Автор Olg

Ответов: 12
Просмотров: 17809
Последний ответ 24.11.2016, 19:11:59
от Alex GOOD
Изменение картинки при наведении на него курсора мышки в YOOaccordion

Автор kaurych

Ответов: 17
Просмотров: 10498
Последний ответ 22.11.2008, 17:47:33
от kaurych
Оформление Чекбоксов ( Checkbox) скачать

Автор ButuzOFF

Ответов: 2
Просмотров: 4317
Последний ответ 20.08.2008, 21:34:32
от poizon