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

回答

相關問題