Хаки и Скрипты Next Generation CMS : Кнопки и иконки, Интерфейс, Слайдшоу и анимация : Делаем стильные radio кнопки

irbees2008 Опубликовано - 28 - августа Кнопки и иконки

Адаптировал: 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.Ну готово,пользуемся пишем комменты.

Можешь почитать и вот эту статейку "Вертикальное ,выпадающее меню на jquery"

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

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