jQuery 旋钮 - 渲染问题

Posted 2023-02-22

【中文标题】jQuery 旋钮 - 渲染问题

【英文标题】：jQuery knob - Rendering issues

【发布时间】：2016-04-29 22:55:42

【问题描述】：

我正在尝试在 Angular 中使用 jquery 旋钮，并且我创建了一个指令来使用它。

现在，我已经看到了很多 jquery 旋钮示例，在大多数示例中，当前值显示在表盘的中心......但在我的情况下不是！ 还有，如何将数字设置为不带小数？

这是我的 html 和 angular 指令代码：

HTML

<knob ng-model="temp" value="0"></knob>
<input type="text" ng-model="temp">

knob.js

angular.module('knob', [])
    .directive('knob', function () 
        return 
            restrict: 'E',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) 
                element.knob(
                    min: attrs.min,
                    max: attrs.max,
                    thickness: .2,
                    step: .5,
                    angleOffset: -125,
                    displayInput: true,
                    angleArc: 250,
                    change: function (value) 
                        scope.$apply(function () 
                            ngModel.$setViewValue(value);
                        );
                    
                );
                ngModel.$render = function () 
                    element.val(ngModel.$viewValue).trigger("change");
                ;
            
        ;
    );

它在浏览器上的显示如下：

我希望它是怎样的（不是在谈论颜色，而是关于中间显示为 INT 的值）

在此先感谢

编辑

按照建议，我用 roundSlider 替换了 jquery 旋钮，但我有几个问题可以在这里找到： http://jsbin.com/doketasuju/edit?html,output

1) 为什么我不想要“菱形”样式的白色背景？

2) 如果我在输入中输入了一些东西，它就不起作用了！

这是一个关于我将如何使用它的示例，但我需要先解决这两个问题。 谢谢

编辑 2

这样添加标签：

它显然应该显示滑块属性的最小值和最大值

【问题讨论】：

问题是由于，旋钮应该由输入元素呈现（显示在中心）..但是这里使用了“旋钮”标签（指令的自定义标签）..所以需要改变基于此的绑定..您需要带旋钮的解决方案还是可以与任何其他插件兼容？

任何圆形滑块都可以

以下答案对您有帮助还是您需要任何其他功能？

不，不是真的...我以前用过这个插件，然后我换了旋钮。我知道旋钮应该以角度工作，如以下视频示例所示：youtube.com/watch?v=nz8lAKHBgJY。我和他做同样的事情，但我有小数而他没有，我不知道为什么

【参考方案1】：

对于编辑 2：

目前没有标签支持的内置选项。但是您可以通过使用内部代码来实现该功能。查看以下演示：

http://jsbin.com/gazara/1/edit?html,output

在这里通过调整.num1 span 和.num2 span 类的边距值，您可以定位标签。

半滑块演示：http://jsbin.com/tamumo/edit?html,output

【参考方案2】：

我已经通过jQuery roundSlider 插件实现了您的要求。

它通过内置支持角度绑定，因此无需为此在外部创建自定义指令。

请从这里查看演示：

http://jsbin.com/yoboruquvo/edit?html,output

有关 roundSlider 的更多详细信息，请查看 demos 和 documentation 页面。

希望对你有帮助...

编辑

1）通过设置与背景对应的滑块bg颜色就可以解决这个问题。

.rs-bg-color background: gray;

2) 解决了使用指令时的问题。

更新的演示：http://jsbin.com/puwefi/edit?html,output

【讨论】：

好的，我将使用您的示例。我不能花很多时间在这上面。非常感谢。

实际上，我对您的示例有几个问题...请参阅我编辑的问题。

你是最棒的！非常感谢您的耐心和帮助！

最后一个快速问题，我检查了文档，但我找不到它...你知道是否有一个选项可以让你添加标签（比如圆圈开头的 0最后是100）？还是我必须自己做？谢谢

label的意思是，要不要加圈外的数字啊？