Прочее

Переключатели для сайта на 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? Сейчас для меня это тайна, но главное то, что результат получился таким, каким он планировался.

{"time":1561195913907,"blocks":[{"type":"paragraph","data":{"text":"Сейчас полным ходом идет разработка сервиса ускорения индексации, о которой я писал в статье про бесплатный инструмент автоматического прогона сайтов. И вот одним из насущных вопросов для меня стал дизайн, вернее не весь дизайн, а только лишь дизайн переключателя(on/off switch)."}},{"type":"paragraph","data":{"text":"Немного погуглив я нашел отечественный блог, где в доступной форме рассказывается о том, как смастерить переключатель на JQuery. Ниже будет код с того ресурса:"}},{"type":"code","data":{"code":"
\n \n \n
"}},{"type":"paragraph","data":{"text":"Далее, нам понадобится и css, который мне пришлось немного исправить. Но сейчас только оригинальный код с сайта-источника."}},{"type":"code","data":{"code":".switch{\n border:none;\n background:left no-repeat;\n width:105px;\n height:46px;\n padding:0;\n margin:0;\n}\n\n.on, .off{\n width:50px;\n height:40px;\n display:inline-block;\n cursor:pointer;\n}"}},{"type":"paragraph","data":{"text":"И последний кусок кода — JavaScript."}},{"type":"code","data":{"code":"$(document).ready(function(){\n\n $('.switch').css('background', 'url(\"switch.png\")');\n $('.on_off').css('display','none');\n $('.on, .off').css('text-indent','-10000px');\n\n $(\"input[name=on_off]\").change(function() {\n var button = $(this).val();\n\n if(button == 'off'){ $('.switch').css('background-position', 'right'); }\n if(button == 'on'){ $('.switch').css('background-position', 'left'); } \n\n });\n\n});"}},{"type":"paragraph","data":{"text":"Еще нам не хватает изображения, которое будет переключателем, вот и оно само."}},{"type":"paragraph","data":{"text":"Данный вариант подходил по внешнему виду, но не подходил немного по реализации. Во-первых, переключатель при старте был включен, мне же нужен был выключенный. Во-вторых, css файлы стилей были немного кривые, в них можно было поменять режим переключателя при старте, но js сбрасывал их. Поэтому пришлось исправлять скрипт, теперь он выглядит следующим образом:"}},{"type":"code","data":{"code":".switch{\n border:none;\n /*background:left no-repeat;*/\n background-position: right;\n background-repeat: no-repeat;\n width:105px;\n height:46px;\n padding:0;\n margin:0;\n}\n\n.on, .off{\n width:50px;\n height:40px;\n display:inline-block;\n cursor:pointer;\n}"}},{"type":"paragraph","data":{"text":"Html файл я не трогал, так как там все устраивало."}},{"type":"code","data":{"code":"$('.switch').css('background-image', 'url(\"img/switch.png\")');\n $('.on_off').css('display','none');\n $('.on, .off').css('text-indent','-10000px');\n\n $(\"input[name=on_off]\").change(function() {\n var button = $(this).val();\n if(button == 'off'){ $('.switch').css('background-position', 'right'); }\n if(button == 'on'){ $('.switch').css('background-position', 'left'); }\n\n });"}},{"type":"paragraph","data":{"text":"Теперь скрипт начал работать именно так, как было нужно. При этом, в стартовой позиции переключатель был выключен."}},{"type":"paragraph","data":{"text":"Статья с сайта-источника была написана 3 марта 2012 года, быть может поэтому, автор не использовал расширенные свойства background? Сейчас для меня это тайна, но главное то, что результат получился таким, каким он планировался."}}],"version":"2.13.0"}
image

Евгений

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