在jQuery-Knob滑块上添加一个按钮

Question

我需要你的帮助。我正在为必要的项目工作，以实现一个带有可拖动按钮控制的圆形滑块。我决定使用this jQuery-Knob slider。它很棒，但我需要添加可以设置样式和拖动的按钮

我决定通过javascript添加div元素，然后将原生的Jquery Knob params拖到它上面。

我在这里做了什么

这是我的代码

function addBtnControl(self) {
              // cache variables
              var button = document.getElementById('knob-ctrl'),
                  cx = 22*self.scale,
                  cy = 20*self.scale,
                  a = self.arc(self.cv),
                  start = xyOnArc(self.xy-cx, self.xy-cy, self.radius/self.scale, a.s);

              // check if pointer-events are supported
              // if not than use fallback btn ctrl for IE
              App.config.Modernizr.addTest('csspointerevents',function(){
                return 'pointerEvents' in document.documentElement.style;
              });
              if (App.config.Modernizr.csspointerevents) {
                self.cursorExt = 0;

                button.style.left = start.x + "px";
                button.style.top = start.y + "px";
              }

              function xyOnArc(cx, cy, radius, radianAngleX) {
                var x = cx + radius * Math.cos(radianAngleX);
                var y = cy + radius * Math.sin(radianAngleX);
                return ({
                    x: x,
                    y: y
                });
              }
            }

            // init Button Ctrl

            addBtnControl(this); 

我动态添加了一个按钮并借用了一些必须足以构成一个非常适合可拖动控件的参数，但是我做错了，因为如果我缩放浏览器或者只是在另一个屏幕尺寸上打开它看起来像这样

传递给它的函数和参数有问题。

Answer 1

实际上jQuery旋钮使用的是Canvas，因此添加外部图层会更复杂。

或者我建议使用类似于knob的jQuery roundSlider插件，但它仅基于 div 元素构建。因此，您可以根据自己的意愿进行任何自定义外观。

有关详细信息，请查看demos和documentation页。

从jsFiddle查看与您的要求类似的演示。

输出屏幕截图：