Калькулятор с ползунком
Приветствую!
Подскажите как реализовать такой калькулятор с одним ползунком. У ползунка 7 фиксированных положений. На каждое выбранное положение выводятся в блоках привязанные значения плюс название тарифа. Приложил гифку для наглядности. http://i.giphy.com/l3q2JrF1L63xHIjIs.gif |
|
Спасибо)
Но тут они добавляются, а надо, чтобы показывало только один блок, соответственно выбранному значению ползунка. Не соображу что поменять надо) И еще когда ползунок в самом начале, то должен отображаться блок 1... |
Galyanov,
там же всё написано Цитата:
|
jQuery UI range slider to show and hide blocks of content
Galyanov,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery UI range slider to show and hide blocks of content</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css"> <style> h1{margin:0.5em} .ui-slider{width:650px;margin:2em 1em} #blocks-container{float:left;margin:0 1em} #blocks-container div{float:left;width:120px;height:100px;margin:0.5em;padding:1em;border:1px solid gray;background:#C0C0C0} #slider{margin:10px;width:500px;height:8px} .ui-slider-handle{border-radius:50%;position:relative;font-size:14px;display:block} .ui-slider-horizontal .ui-slider-handle{top:-0.4em;background:#00F} :focus{outline:0;border:0} #blocks-container > div{ display: none; } #blocks-container > div:nth-child(1){ display: block; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <h1>тариф 1</h1> <div id="slider"></div> <div id="blocks-container"> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> <div>Content 4</div> </div> <script> $(function() { var blocks = $("#blocks-container").children(), h = $("h1"); // blocks.hide().eq(0).show() в css function showHide(event, ui) { var range = +ui.value; blocks.hide().eq(range).show(); h.html("тариф "+ (range+1)) } $("#slider").slider( { animate: true, range: "min", value: 0, min: 0, max: 3, step: 1, slide: showHide } ); }); </script> </body> </html> |
Во, то что доктор прописал) А я сижу тут ковыряю не то что-то...
Большое спасибо:) Не могу плюсануть Вам, последний раз тоже Вам плюсовал) |
Часовой пояс GMT +3, время: 16:38. |