JQuery Позиция ползунка ползунка() не работает

У меня есть div, который отображает текущее значение ползунка, а div перемещается с положением ползунка.JQuery Позиция ползунка ползунка() не работает

На основании ответа на Using offset and jQuery slider

я придумал следующий код:

function SliderSetup() 
{ 
    $("#slider").slider({ 
      value:0, 
      min: -10, 
      max: 10, 
      step: 2, 
      animate:false, 
      slide: function(event, ui) { 
       setTimeout(showVal, 10); 
      } 
     }); 

    $("#slider").slider("value", 0); 
    showVal(); //setTimeout(showVal, 10) does not work either 
} 

function showVal() { 

var position = $('.ui-slider-handle:first').position(); //i tried offset()-didnt work 
var value = $('#slider').slider('value'); 
$('#value1').text(value).css({'left':position.left}); 
}

Положение DIV является правильным, когда пользователь использует ползунок, но по умолчанию значение не в правильное положение. Снимок экрана ниже

alt text http://i45.tinypic.com/t4tr9f.jpg

Edit: (? Начальная ширина значение элемента) Разметка

       <tr> 
            <td width="30%"> 
             <h2> 
              Select Value</h2> 
            </td> 
            <td width="60%"> 
             <div id="value1">&nbsp;</div> 
             <div id="slider"> 
             </div> 
            </td> 
            <td> 
             <div id="myDiv"> 
             </div> 
            </td> 
           </tr>

источник

2010-03-07 DotnetDude

+1 Для принятия предложения и честно пытаясь заставить его работать, а не копировать/вставить что-то там и жить с ним. –

Я думаю, что есть проблема с разметкой, или не стрелять это после того, как элементы будут готовы. В любом случае, здесь полный рабочий пример:

<html> 
    <head>  
    <title>Test</title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> 
    <style type="text/css"> 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     function SliderSetup() 
     { 
      $("#slider").slider({ 
        value:0, 
        min: -10, 
        max: 10, 
        step: 2, 
        animate:false, 
        slide: function(event, ui) { 
         setTimeout(showVal, 10); 
        } 
       });  
      $("#slider").slider("value", 0); 
      showVal(); 
     } 
     function showVal() { 
     var slider = $('.ui-slider-handle:first'); 
     var position = slider.offset(); 
     var value = $('#slider').slider('value'); 
     var val = $('#value1'); 
     val.text(value).css({'left':position.left + ((slider.width() - val.width()) /2), 'top':position.top -20 }); 
     }  
     $(function(){ 
     SliderSetup(); 
     }); 
    </script> 
    </head> 
    <body> 
    <br/><br/><br/> 
    <div id="value1" style="position: absolute"></div> 
    <div id="slider"></div> 
    </body> 
</html>

Код очень растянуты, мы надеемся помочь вам найти проблему быстрее. Изменения в css - это только то, что я больше сосредоточил значение на слайдере, перейдя в любую позицию, в которой вы хотите, чтобы он был в курсе. Чтобы проверить ширину вашего элемента значения, попробуйте определения этого CSS, что может быть вашим единственным вопросом, не может быть уверен, не видя разметку:

#value1 { border: solid 1px red; }

источник

2010-03-07 18:54:30

@ Ник - я до сих пор не могу правильно заняться. Я обновил свой пост с помощью разметки. Атрибут width может вызвать проблему? – DotnetDude

Нет необходимости нечеткого кодирования. ui имеет handle, который имеет offsetLeft и offsetTop.

Это все, что вам нужно:

var posLeft = ui.handle.offsetLeft;

источник

2015-09-15 11:25:40 Jochem

JQuery Позиция ползунка ползунка() не работает

ответ

Смежные вопросы