1

私は現在、Nagios Check_mk からアクティブなチェック フィードを受け取り、テキスト ウィジェットに表示するプロジェクトに取り組んでいます。ウィジェットの色を変更しようとしています。ワークショップ ページを操作しています。コーヒー スクリプトで立ち往生しています。値が変更されても効果がないようです。ここに私が持っているものがあります

アラートコーヒー

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

いくつかの例と参照 (coffescript の場合も) については、これを確認できます。

于 2014-10-09T06:44:17.563 に答える