1

我目前正在从事一个项目，该项目正在从 Nagios Check_mk 获取活动检查提要并显示在文本小部件上。我试图让小部件改变颜色，通过研讨会页面工作我被咖啡脚本卡住了，当值改变时它似乎没有任何效果。这就是我所拥有的

警报.coffee

class Dashing.Alert extends Dashing.Widget

ready: ->
# This is fired when the widget is done being rendered

onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with @node
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

@accessor 'value', Dashing.AnimatedValue

@accessor 'isTooHigh', ->
@get('value') > 200

警报 scss

 .widget-alert {
background: #00ff99; 
font-size: 65px; 
font-weight: bold; 
}

.danger {
background: #ff1a00;
}

所有其他文件与研讨会页面中的详细信息完全相同：非常感谢任何帮助。

4

1 回答 1

0

基本上颜色的变化或者颜色的动画闪烁都是由scss @keyframe 规则处理的，你必须将它绑定到一个选择器上，否则动画将没有效果

这是一些例子

    $background-alert-color-1: #FFFF66;
    $background-alert-color-2: #FF9618;
    $text-alert-color: #fff;


    @-webkit-keyframes status-alert-background {
      0%   { background-color: $background-alert-color-1; }
      50%  { background-color: $background-alert-color-2; }
      100% { background-color: $background-alert-color-1; }
    }

    .widget.status-alert {
      color: $text-alert-color;
      background-color: $background-alert-color-1;
      @include animation(status-alert-background, 2s, ease, infinite);

      .icon-alert-sign {
        display: inline-block;
      }

     .title, .more-info {
      color: $text-alert-color;
    }

对于一些示例和参考（也适用于咖啡脚本），您可以查看这个dashing_zabbix

于 2014-10-09T06:44:17.563 回答