• 1889
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Побродив по просторам зарубежного инета нашел довольно интересную реализацию radio кнопки.Они сделаны выпадающим списком с привязкой к каждой кнопке изображения ,ну как применить это вам решать,ну а я расскажу как установить на наш шаблон.
Приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с нашим шаблоном.(Если есть в папке файлы с такими именами то переименуйте и в путях не забудьте прописать новые имена.)
2.В хеад подключаем стиль

Код:
<link href="{{ tpl_url }}styles/styles.css" rel="stylesheet" type="text/css" />
3.Там где будут наши кнопки ставим этот код
Код:
<div class="container">
<div class="filter-wrapper">
<div class="image-filters">
<input id="filter-1" type="radio" name="radio-set"><label for="filter-1">Cityscape</label>
<input id="filter-2" type="radio" name="radio-set"><label for="filter-2">VW Bus</label>
<input id="filter-3" type="radio" name="radio-set"><label for="filter-3">Cactus</label>
</div>
</div>
</div>
3.Перед закрытием body добавляем скрипты
Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{{ tpl_url }}js/main.js"></script>
<script>
$( function() {
$('.image-filters').customradio({
mobileImages: true,
imgsUrl: 'imgs/'
});
});
</script>
4.Ну готово,пользуемся пишем комменты.

Можешь почитать и вот эту статейку "Симпотичные часы на флеше"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element