如何在roundSlider小部件中添加启用/禁用按钮? [英] How to add a enable/disable button to the roundSlider widget?
问题描述
在下面的代码片段中，我有三个roundSlider小部件，我试图在每个滑块下添加一个启用/禁用按钮.
In the below snippet code I have a three roundSlider widgets, and I am trying to add a enable/disable button under each slider.
请，我非常感谢您的帮助，向我展示/指导我如何添加这些启用/禁用按钮到小部件之外，或者最好是每个滑块下方的按钮.
Please, I would highly appreciate your help to show/guide me how to add a these enable/disable button to whether aside of the widgets or preferably a button under each slider.
代码:
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.container {
display: flex;
}
.child
{
margin-left:100px;
}
</style>
<body>
<div class="container">
<div class="child">
<div id="slider1" class='slider row1 col1'></div>
<center>
<p>slider1</p>
</center>
</div>
<div class="child">
<div id="slider2" class='slider row1 col2'></div>
<center>
<p>slider2</p>
</center>
</div>
<div class="child">
<div id="slider3" class='slider row1 col3'></div>
<center>
<p>slider3</p>
</center>
</div>
</div>
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) {
$.getJSON('/set_my_number/' + event.value);
}
});
$("#slider2").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 1000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
change: function(event) {
$.getJSON('/set_abcd/' + event.value);
}
});
$("#slider3").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 10000000000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
change: function(event) {
$.getJSON('/set_fghkva/' + event.value);
}
});
$("#turn_off_button").click(function() {
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>推荐答案
roundSlider 具有启用和禁用方法，因此您可以维护任何状态，并可以根据状态切换滑块的状态.
The roundSlider having the enable and disable methods, so you can maintain any state and based on the state you can toggle the state of the slider.
在下面的演示中，我已经实现了该功能，并且可以根据您的应用场景重用此功能:
In the below demo I have achieved that functionality and based on your application scenario you can reuse this:
这篇关于如何在roundSlider小部件中添加启用/禁用按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
