Прочее

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

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

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

Off On

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

.switch{ border:none; background:left no-repeat; width:105px; height:46px; padding:0; margin:0; } .on, .off{ width:50px; height:40px; display:inline-block; cursor:pointer; }

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

$(document).ready(function(){ $('.switch').css('background', 'url("switch.png")'); $('.on_off').css('display','none'); $('.on, .off').css('text-indent','-10000px'); $("input[name=on_off]").change(function() { var button = $(this).val(); if(button == 'off'){ $('.switch').css('background-position', 'right'); } if(button == 'on'){ $('.switch').css('background-position', 'left'); } }); });

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

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

.switch{ border:none; /*background:left no-repeat;*/ background-position: right; background-repeat: no-repeat; width:105px; height:46px; padding:0; margin:0; } .on, .off{ width:50px; height:40px; display:inline-block; cursor:pointer; }

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

$('.switch').css('background-image', 'url("img/switch.png")'); $('.on_off').css('display','none'); $('.on, .off').css('text-indent','-10000px'); $("input[name=on_off]").change(function() { var button = $(this).val(); if(button == 'off'){ $('.switch').css('background-position', 'right'); } if(button == 'on'){ $('.switch').css('background-position', 'left'); } });

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

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

image

Евгений

Специалист по разработке систем на современных PHP фреймворках.