CSS - 纯CSS中的旋钮光标+ AngularJS

玩过jQuery Knob框架后，我意识到很难使用AngularJS动态值并决定在纯CSS中创建自己的弧/旋钮。CSS - 纯CSS中的旋钮光标+ AngularJS

在旋钮中，我代表3个值：最小值，最大值和当前值，它们都应该是动态的。当数值超出范围时，旋钮的颜色会改变。

HTML：

<div class="{{getColor()}} arc arc_start"></div>

JS：

function getColor(){ 
if($scope.value > $scope.maximum){ 
    return "arc_danger"; 
} 
if($scope.value < $scope.minimum){ 
    return "arc_gray"; 
} 
return "arc_success"; 
}

现在，如果该值在上述范围内，我想说明它使用小旋钮光标，类似于jQuery中实现的一个旋钮。

这是链接到plunkr，它说明了我想实现的目标。 http://plnkr.co/edit/Zb8bVih4hireLwNS3bfc?p=preview

来源

2017-04-12 Pety Petyy

所以，你想重写一个使用CSS的整个JavaScript库，并且你希望有人为你做这件事吗？ – Seano666

不。我正在寻找一种css/js方法来说明旋钮上的光标，只需将jQuery Knob作为它可能的外观示例即可。 –

我喜欢这个想法，但我不认为应该完全放弃使用JQuery旋钮而不使用其全部功能。我已经更新你的JQuery旋钮是动态的。

plnkr link

$('.knob').on("input", function() { 
     $scope.value = $('#value').val(); 
     $scope.minimum = $('#min').val(); 
     $scope.maximum = $('#max').val(); 
     $('.dial').val($scope.value); 
     $('.dial').trigger('change'); 
     $('.dial').trigger('configure', {'min': $scope.minimum,'max':$scope.maximum,'fgColor':getColor()}); 
});

我不知道，如果使用在彼此的顶部两个div的答案。如果你真的不能使用它的功能来满足你的需求，也许可以使用圆形的进度条进行研究。

SO question link

jsfiddle link

希望这有助于。

来源

2017-04-14 06:00:19 Ethilium

“CSS进度圈”问题是一个很棒的重定向。我使用从那里接受的答案来实现基于CSS的进度圈。感谢您的答案中的多种选择和透明度。 –

CSS - 纯CSS中的旋钮光标+ AngularJS

回答

相关问题