0

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

我决定通过 javascript 添加 div 元素，然后将原生 Jquery Knob 参数绑定到它。

这是我所做的

在此处输入图像描述

这是我的代码

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

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

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

在此处输入图像描述

4

1 回答 1

2

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

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

有关更多详细信息，请查看演示和文档页面。

jsFiddle检查与您的要求相似的此演示。

输出截图：

jquery 圆形滑块 - 自定义外观

于 2015-07-21T19:59:51.603 回答