如何在roundSlider小部件中添加启用/禁用按钮？
[英]How to add a enable/disable button to the roundSlider widget?
问题描述
In the below snippet code I have a three roundSlider widgets, and I am trying to add a enable/disable button under each slider. 
在下面的代码片段中，我有三个roundSlider小部件，并且我试图在每个滑块下添加一个启用/禁用按钮。
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. 请，我非常感谢您的帮助，向我展示/指导我如何添加这些启用/禁用按钮到小部件旁边，或者最好是每个滑块下面的按钮。
code: 码：
<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>
1 个解决方案
解决方案1
0 已采纳 2019-09-04 19:17:37
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. roundSlider具有enable和disable方法，因此您可以维护任何状态，并可以基于该状态切换滑块的状态。
In the below demo I have achieved that functionality and based on your application scenario you can reuse this: 在下面的演示中，我已经实现了该功能，并且可以根据您的应用场景重用此功能：
DEMO
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.