gpt4 book ai didi

javascript - 如何向 roundSlider 小部件添加启用/禁用按钮?

转载 作者:行者123 更新时间:2023-11-27 23:25:44 25 4
gpt4 key购买 nike

在下面的代码片段中,我有一个三个 roundSlider 小部件,我试图在每个 slider 下添加一个启用/禁用按钮。

非常感谢您帮助我展示/指导我如何将这些启用/禁用按钮添加到小部件旁边,或者最好是每个 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具有启用和禁用方法,因此您可以保持任何状态,并根据状态切换 slider 的状态。

在下面的演示中,我已经实现了该功能,并且您可以根据您的应用场景重用它:

DEMO

关于javascript - 如何向 roundSlider 小部件添加启用/禁用按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57792647/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com