jQuery 양식 슬라이더 사용자 정의

다음과 같은 입력 슬라이더가있는 웹 페이지가 있습니다 : http://jqueryui.com/demos/slider/#steps.jQuery 양식 슬라이더 사용자 정의

내가 필요한 것은 제출 버튼을 누르기 전에 사용자가 슬라이더를 움직이게하는 것입니다.

빨간 색 핸들을 기본 색상으로 놓고 빨간색으로 표시 될 때 제출을 클릭하면 핸들을 클릭하거나 이동해야한다는 경고 창이 나타납니다. 물론 그가 그렇게하면 색이 바뀌고 그는 계속할 수 있습니다.

내가 지금까지했습니다입니다 :

<html> 
    <head> 
     <meta charset="utf-8"> 
     <link type="text/css" href="jQuery/css/start/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="jQuery/js/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="jQuery/js/jquery-ui-1.8.21.custom.min.js"></script> 
      <style> 
       #demo-frame > div.demo { padding: 10px !important; }; 
      </style> 
     <script> 
      $(document).ready(function() { 
       $(".slider").slider({ 
        step: 0.01, 
        min: 0, 
        max: 1, 
        value: 0.5, 
        slide: function(event, ui) { 
         $("input[name=" + $(this).attr("id") + "_question]").val(ui.value); 
         } 
       }); 
      }); 

     </script> 

     <form action="next.php" method="POST"> 
       <input type="hidden" value=0.5 name="first_question"/> 
      <div class="demo"> 
       <p> 
        <label>question 1:</label> 
       </p> 
       <div class="slider" id="first"></div> 
       <br /> 
       <br /> 
       <input type="hidden" value=0.5 name="second_question"/> 
       <p> 
        <label>question 2:</label> 
       </p> 
       <div class="slider" id="second"></div> 
      </div><!-- End demo --> 
       <br /> 
       <input type="submit" value="submit" id="bt"/> 
     </form> 
    </body> 
</html>

이 너무 복잡하게 구현하는 것입니다? 도움이됩니다.

출처

2012-06-26 Diogo Pereira

이것은 분명히 할 수 있습니다. 슬라이더가 HTML 데이터 속성과 상호 작용하는지 여부를 저장하는 것이 좋습니다. 이미 가지고있는 slide 이벤트에서 설정할 수 있습니다. 그런 다음 양식이 제출되면 모든 슬라이더에 대해 데이터 속성이 설정되었는지 확인할 수 있습니다.

나는 이것을 사용자에게 보여주기 위해 몇 가지 기본적인 시각적 인 작업을 수행하는 예를 넣었습니다 (http://jsfiddle.net/s6XTu/2/).

출처

2012-06-27 10:45:53

고마워, 너는 나에게 예를 들었다. :) –

jQuery 양식 슬라이더 사용자 정의

답변

관련 문제