Search the Community
Showing results for tags 'trackbar'.
Found 1 result
-
Нужно реализовать ползунок Нашел тот который нужен на просторах интернета https://jsfiddle.net/120n2arx/63/ И тут вопрос. Я никогда не работал с jQuery, у автора все работает, копирую себе в файлы, ничего не работает. Отображается сам ползунок но с ним никаких действий производить не получается. Как решить проблему? Ошибка наверняка банальная. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="slider.css"> <script src="http://code.jquery.com/jquery-1.9.1.js"> var drag = false; var values = []; for(var i = 0; i < 24; i++) for(var j = 0 ; j < 60;j+=10){ var h = (i+"").length < 2?"0"+i:i; var m = (j+"").length < 2?"0"+j:j; values.push(h+":"+m) } $(".slider").each(function(i,e){ updateView(e); }); $(".slider>.bar>.lp,.slider>.bar>.rp").bind("mousedown",function(){ drag = $(this); }) $(document).bind("mousemove",function(e){ if(!drag) return; var x = (e.pageX - $(drag).outerWidth()/2 - $(drag).parent().parent().offset().left)/$(drag).parent().parent().outerWidth(); if(x < 0 ) x = 0; if(x > 1) x = 1; var rp = $(drag).parent().find(".rp"); var lp = $(drag).parent().find(".lp"); if($(drag).hasClass("lp") && x > $(rp).attr("data-pos") ){ $(rp).attr("data-pos",x); } if($(drag).hasClass("rp") && x < $(lp).attr("data-pos") ){ $(lp).attr("data-pos",x); } $(drag).attr("data-pos",x); updateView($(drag).parent().parent()); }); $(document).bind("mouseup",function(){ drag = false; }); function updateView(slider){ var l =$(slider).find(".lp").attr("data-pos"); var r =$(slider).find(".rp").attr("data-pos"); var x = $(slider).outerWidth() * l; var w = (r - l)*$(slider).outerWidth(); $(slider).find(".bar").css({left:x+"px",width:w+"px"}); var index = Math.round(values.length*l); if(index >= values.length) index = values.length-1; $(slider).find(".lp").html("<span>"+values[index]+"</span>"); index = Math.round(values.length*r); if(index >= values.length) index = values.length-1; $(slider).find(".rp").html("<span>"+values[index]+"</span>"); } </script> </head> <body> <div class="slider"> <div class="bar"> <div class="lp" data-pos="0.1"></div> <div class="rp" data-pos="0.7"></div> </div> </div> </body> </html>
