Переключатели для сайта на css3/jQuery/Html
 

Переключатели для сайта на css3/jQuery/Html

28 декабря 2013 3:30 Категории: Графика

Сейчас полным ходом идет разработка сервиса ускорения индексации, о которой я писал в статье про бесплатный инструмент автоматического прогона сайтов. И вот одним из насущных вопросов для меня стал дизайн, вернее не весь дизайн, а только лишь дизайн переключателя(on/off switch).

Немного погуглив я нашел отечественный блог, где в доступной форме рассказывается о том, как смастерить переключатель на JQuery. Ниже будет код с того ресурса:

Далее, нам понадобится и css, который мне пришлось немного исправить. Но сейчас только оригинальный код с сайта-источника.

И последний кусок кода — JavaScript.

Еще нам не хватает изображения, которое будет переключателем, вот и оно само:

Изображение switch.png для переключателя

Изображение switch.png для переключателя

Данный вариант подходил по внешнему виду, но не подходил немного по реализации. Во-первых, переключатель при старте был включен, мне же нужен был выключенный. Во-вторых, css файлы стилей были немного кривые,в них можно было поменять режим переключателя при старте, но js сбрасывал их. Поэтому пришлось исправлять скрипт, теперь он выглядит следующим образом:

Html файл я не трогал, так как там все устраивало.

Теперь скрипт начал работать именно так, как было нужно. При этом, в стартовой позиции переключатель был выключен.

Статья с сайта-источника была написана 3 марта 2012 года, быть может поэтому, автор не использовал расширенные свойства background? Сейчас для меня это тайна, но главное то, что результат получился таким, каким он планировался.