向 jQuery-Knob 滑块添加一个按钮

Add a button to jQuery-Knob slider

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

我决定通过 javascript 添加 div 元素,然后绑定原生的 Jquery 拖拽参数。

这是我所做的

这是我的代码

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); 

我动态添加了一个按钮和借用的参数,这些参数必须足以制作一个 well-suited 可拖动控件,但我一直做错了,因为如果我缩放浏览器或只是在另一个屏幕尺寸上打开它看起来像这样

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

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

或者我建议使用 jQuery roundSlider 插件,它类似于旋钮,但它基于 div 元素构建只要。所以你可以根据自己的意愿制作任何自定义外观。

有关详细信息,请查看 demos and documentation 页面。

查看 jsFiddle 中的演示,它与您的要求相似。

输出截图: