Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 28 - августа Кнопки и иконки
2725 - 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.Ну готово,пользуемся пишем комменты.

Можешь почитать и вот эту статейку "Создание анимированных кнопок при помощи CSS3"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [4]
  • Гости: [4]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 35
  • Генерация страницы: 0.109сек
  • Потребление памяти: 4.943 Mb 
  •   яндекс.ћетрика