Добрый день всем.
Битый час уже голову ломаю.
Хочу сделать переключатель, как на продукции apple(тянуть за ползунок и, при достижении прокрутки, например 20px, переводить его в другое положение).
Собственно, вот кнопка эта. (картинка прикреплена)
<style>
.switch{
width:50px;
height:20px;
background-image:url(img/toggle/switch_bg.png);
}
.switch_intro{
width:70px;
height:16px;
margin-top:2px;
margin-left:4px;
overflow:hidden;
border-radius:17px;
}
#switch_top{
margin-left:-29px;
}
</style>
<div class="switch">
<div class="switch_intro">
<img id="switch_top" src="img/toggle/switch_all.png"/>
</div>
</div>
Движение делаю с помощью jQuery-ui
function init(){
$("#switch_top").draggable({
containment:'parent',
axis:'x'
});
return position.left; //не возвращает
}
init();
$("#switch_top").mouseup(function(){
alert(position.left); //выводит начальную позицию
});
Но draggable() не меняет position.
Так вот вопрос- как все- таки получать значение на сколько я передвинул мышкой и сделать
if (передвижение == 20px){
$("#switch_top").css("marginLeft", "0px"); //передвинуть бегунок в правое положение
}
Или, если через draggable так не передать, то посоветуйте какое- нибудь простое решение.
Please help
