Question

我正在使用dashing.io，我想用一个选框来构建一个小部件。我用css动画和html（http://jsfiddle.net/oLLzsyud/）做了一个选框。它适用于此，但它得到了像这样的小部件：的 SCCS：

    .widget-marquee {
    background: #004894;
    $color_celeste_approx: #cccccc;

    .marquee {
        width: 200px;
        margin: auto;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        border: solid 1px $color_celeste_approx;
        animation: marquee 10s linear infinite;
        &:hover {
            animation-play-state: paused;
        }
    }

    @keyframes marquee {
        100% {
            text-indent: -100%;
        }
        0% {
            text-indent: 100%;
        }
    }
}

HTML：

<div class="marquee">
    <span data-bind="stoer"></span>
</div>

在潇洒中它显示如下 and doesnt move

我没碰到咖啡脚本。它是小部件生成的默认设置。

我没有看到什么是错的，为什么它没有在潇洒中工作。也许有人在这里知道它为什么不用于破坏，但在普通页面上使用css和html。

感谢您的回答。

Answer 1

我自己得到了它。我只是将marqueere放入html文件中：

    <style>
.marquee {
  width: 1500px;
  margin: auto;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  border: solid 1px #cccccc;
  animation: marquee 10s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  100% {
    text-indent: -125%;
  }
  0% {
    text-indent: 125%;
  }
}
</style>

<div class="marquee">
    <span data-bind="status"></span>
</div>

数据在coffeescript文件中读取：

class Dashing.Marquee extends Dashing.Widget

  statusalt = [" "]
  Array::unique = ->
    output = {}
    output[@[key]] = @[key] for key in [0...@length]
    value for key, value of output

  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.

    statusneu = [
      @get('bsm') + " +++ ",
      @get('stoer') + " +++ ",
      @get('lzeit') + " +++ ",
      @get('sla') + " +++ ",
      @get('bkob') + " +++ ",
      @get('major') + " +++ ",
      @get('probl') + " +++ ",
      @get('fulfil') + " +++ ",
      @get('bm') + " +++ ",
      @get('bk') + " +++ ",
      @get('pm') + " +++ ",
      @get('fianz') + " +++ ",
    ]
    statusfilter = statusneu.filter (x) -> x !=  "undefined +++ "

    if statusfilter is statusalt
      status = statusalt.toString().split(",").join(" ")
    else
      statusneu= statusfilter.concat statusalt
      status = statusneu.unique().toString().split(",").join(" ")
      statusalt = statusfilter

    @set 'status', status.concat(@get('updatedAtMessage') + " +++ ")

它可能不是最好的解决方案，但它适用于我的仪表板。 scss只是蓝色背景。

带选框的Dashing.io Widget

1 个答案: