<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Радио кнопки в виде слайдера.

Радио кнопки в виде слайдера.

В этой статье я хочу рассказать вам про то, как сделать радио кнопки в виде слайдера на JQuery.

Чтобы это сделать, нам понадобится одно дополнение для JQuery. Давайте зайдем на сайт http://rubentd.com/radios-to-slider/ На этом сайте вы можете сразу увидеть, как работает данный слайдер. Чтобы его установить, перейдите к низу страницы и найдите файлы с названием jquery.radios-to-slider.min.js и radios-to-slider.min.css. Это, собственно, JavaScript и css файлы, необходимые для корректной работы. Скачайте их себе на компьютер. Т.к. это дополнение к JQuery, то его нам тоже нужно установить. Для этого перейдите на сайт jquery.com и скачайте библиотеку оттуда или используйте CDN. После того, как вы все скачали, нужно это подключить в нашем html файле. Давайте его создадим и сделаем это.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Radio Buttons to Slider</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="jquery.radios-to-slider.js"></script>
  <link rel="stylesheet" href="radios-to-slider.css">
</head>
<body>
  <script>
   $(document).ready(function() {
    $("#radios").radiosToSlider();
   });
  </script>
  <div id="radios">
   <input id="option1" name="options" type="radio">
   <label for="option1">1<br>Выбор</label>

   <input id="option2" name="options" type="radio">
   <label for="option2">2<br>Выбор</label>

   <input id="option3" name="options" type="radio" checked>
   <label for="option3">3<br>Выбор</label>

   <input id="option4" name="options" type="radio">
   <label for="option4">4<br>Выбор</label>

   <input id="option5" name="options" type="radio">
   <label for="option5">5<br>Выбор</label>
  </div>
</body>
</html>

В теге head мы подключаем нужные нам скрипты и стили. В теге body достаточно просто создать div с каким-нибудь классом или id, а внутри него сделать обычные radio кнопки с id. Чтобы наш скрипт заработал, в теге script мы отбираем наш div с id=radios в нашем случаем и применяем к нему метод radiosToSlider(). Все, теперь наши слайдер-кнопки должны уже работать.

Единственный параметр, который может принимать конструктор, это animation. По-умолчанию он равен true, но если анимация вам не нужна, вы можете установить его в false. Делается это очень просто

$("#radios").radiosToSlider({animation: false});

Вот такой вот простой скрипт, но он позволяет сделать эффектные радио кнопки. Надеюсь, что кому-то пригодится. Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (6):

maxlegostaev0595 maxlegostaev0595 23.05.2014 10:51:54

А вы в курсе что сайт, который вы указали выше занесен в Единый Реестр и Ростелекомом банится.

Ответить

php_programmer php_programmer 23.05.2014 11:34:37

Не знаю, у меня все прекрасно работает. И с чего ему быть в реестре, если там только статьи и плагины, связанные с программированием?

Ответить

den.1910 den.1910 23.05.2014 12:24:05

Не знаю у меня тоже сайт не открывается. Тоже самое пишет ЗАНЕСЁН в ЕДИНЫЙ РЕЕСТР

Ответить

alexandrdante alexandrdante 23.05.2014 16:50:07

Используйте прокси.Не русское. Сайт безобиден

Ответить

maxlegostaev0595 maxlegostaev0595 23.05.2014 18:12:13

Может и безобиден, но если на нем только статьи, зачем его запихнули в Единый Реестр?

Ответить

php_programmer php_programmer 23.05.2014 18:49:43

Ну, этот вопрос, я думаю, Вам нужно задавать государству.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.