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

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

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

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