2014-09-19 4 views
0

슬라이드 범위 [jquery] 이후에 텍스트를 경고하는 방법?슬라이드 범위 이후에 텍스트를 경고하는 방법?

내 첫 번째 질문은 사진에 있습니다.

enter image description here

그리고 내 두 번째 질문은, 체크 박스를 선택하면이 슬라이드 범위, 하지만 때 비활성화됩니다의 사용자가 클릭 슬라이드 범위가 경고합니다입니다. 코드를 적용하는 방법, 슬라이드 범위를 사용 중지하면 클릭 할 때 알림이 표시되지 않습니다.

이 내 스크립트 코드

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<input id="display_value" type="text" value="0"> 
 
<br> 
 
<div id="slide_data" style=" width: 300px; float: left; margin-top: 7px;"></div> 
 
<br>       
 
<br> 
 
<label style=" font-family: lato; font-size: 13px; "> 
 
    <input type="checkbox" name="checkbox_disable" id="checkbox_disable" style="cursor: pointer;" />Disable Slide Range 
 
</label> 
 

 

 
<script> 
 
window.onload=function(){ 
 
$(function() { 
 
     $("#slide_data").slider({ 
 
     range: "min", 
 
     value: 0, 
 
     min: 0, 
 
     max: 1000, 
 
     slide: function(event, ui) {  
 
        $("#display_value").val(ui.value); 
 
       } 
 
     }); 
 
    
 

 
     $("#checkbox_disable").click(function(){ 
 
     if(this.checked) 
 
     { 
 
      $("#slide_data").slider("option", "disabled", true); 
 
      alert('checked');   
 
     } 
 
     else 
 
     { 
 
      $("#slide_data").slider("option", "disabled", false); 
 
      alert('not checked'); 
 
     } 
 
     });   
 
    }); 
 
} 
 

 

 

 
// after user slide we will call function filters_web_hosting_package // 
 
$(document).ready(function(){ 
 
     $("#slide_data").click(
 
      function() { 
 
       alert("Slide"); 
 
       //filters_web_hosting_package(); 
 
      }    
 
     ); 
 
}); 
 
</script>

답변

1

그것은 jQuery의 API에있어입니다 :

stop: function(event, ui) {} 

귀하의 경우 :

stop: function(event, ui) { 
    alert("test") 
} 

Updated fiddle

0

슬라이드 개체에서 슬라이드 메서드를 사용할 필요가 없습니다. stop 메소드를 사용할 수 있습니다. 당신이 미끄러 진 후에 그것은 발사 될 것입니다. 이렇게하면 마지막으로 만든 함수가 필요하지 않습니다.

값의 표시는 여전히 * 그래서 문

window.onload=function(){ 
 
$(function() { 
 
     $("#slide_data").slider({ 
 
     range: "min", 
 
     value: 0, 
 
     min: 0, 
 
     max: 1000, 
 
     slide: function(event, ui) {  
 
      $("#display_value").val(ui.value); 
 
     }, 
 
     stop: function(event, ui) {  
 
      if(ui.value > 500) 
 
      alert("test"); 
 
     } 
 
     }); 
 
    
 

 
     $("#checkbox_disable").click(function(){ 
 
     if(this.checked) { 
 
      $("#slide_data").slider("option", "disabled", true); 
 
      alert('checked');   
 
     } else { 
 
      $("#slide_data").slider("option", "disabled", false); 
 
      alert('not checked'); 
 
     } 
 
     });   
 
    }); 
 
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
 

 
<input id="display_value" type="text" value="0"> 
 
<br> 
 
<div id="slide_data" style=" width: 300px; float: left; margin-top: 7px;"></div> 
 
<br>       
 
<br> 
 
<label style=" font-family: lato; font-size: 13px; "> 
 
    <input type="checkbox" name="checkbox_disable" id="checkbox_disable" style="cursor: pointer;" />Disable Slide Range 
 
</label>

0

경우 사용 $("#slide_data").mouseup 대신 $("#slide_data").click의 정지 방법을 추가 슬라이드 방법이 될 수 있습니다.

작동 FIDDLE.

관련 문제