Question

<!DOCTYPE html> 
<html>
<head>
<style type="text/css">@import url(/css/slider.css);</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 

<style type="text/css">
.ui-slider-handle {
border:1px solid silver;
height:10px;width:10px;
background-color:black;
}
</style>
</head>
<body>
<script type="text/javascript">
$('.ui-slider-handle ui-state-default ui-corner-all').slider( { minValue: 0%, maxValue: 100%, animate: true} );
</script>
<div id="example1" class="cropper-slider ui-slider ui-slider-horizontal ui-    widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-    default ui-corner-all" href="#" style="left: 0%;"></a></div>

</body>
</html>

脚本根本不控制滑块。我完全不知道我在这里做错了什么。我是否可以获得一些建议，以便让滑块范围栏工作？

Answer 1

答案其实很简单。在您的代码中，您尝试修改参数minValue和maxValue。

通过查看jQuery API，这些参数不存在。事实上，它们是min和max。但是，您也尝试将其设置为屏幕的百分比。这也不起作用，因为参数是数字，而不是百分比。

我已经设计了一个简单的解决方案来解决我认为你想要完成的事情。请注意，我已将标识符从'.ui-slider-handle ui-state-default ui-corner-all'更改为#example1

<强> HTML / jQuery的/ CSS：

<!DOCTYPE html> 
    <html>
    <head>
    <style type="text/css">@import url(/css/slider.css);</style>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<style type="text/css">
.ui-slider-handle {
border:1px solid silver;
height:10px;width:10px;
background-color:black;
}
</style>
</head>
<body>
<div id="example1" class="cropper-slider ui-slider ui-slider-horizontal ui-    widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-    default ui-corner-all" href="#" style="left: 0%;"></a></div>
<script>$("#example1").slider( { animate:true, max:$("#example1").width(), min:0 } );</script>
</body>
</html>

JSFiddle：https://jsfiddle.net/0evLwncn/

P.S。我建议您更好地组织代码，并在下次查看API。

Jquery Slider，无法让它工作

1 个答案: