如何在幻灯片范围后提醒文字？

Question

如何在幻灯片范围[jquery]之后提醒文字？

我的第一个问题是图片。

我的第二个问题是，选中复选框时，它会禁用幻灯片范围， 但是当用户点击幻灯片范围时，它会发出警报。如何应用代码，如果幻灯片范围禁用，则单击时不会发出警报。

这是我的脚本代码

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;  

Answer 1

这是jQuery的API：

stop: function( event, ui ) {}

你的案子：

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

Updated fiddle

Answer 2

您不需要在幻灯片对象中使用幻灯片方法。你可以使用stop方法。你滑倒后会发火。这样你就不需要你创建的最后一个函数了。

值的显示仍然可以在slide方法*中，所以为if语句添加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>

Answer 3

使用$("#slide_data").mouseup代替$("#slide_data").click。

工作FIDDLE。