带有选取框的 Dashing.io 小部件答案

【问题标题】：Dashing.io Widget with a marquee带有选取框的 Dashing.io 小部件
【发布时间】：2017-10-18 17:49:06
【问题描述】：

我正在使用 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

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

我没有看到有什么问题以及为什么它在 dashing 中不起作用。也许这里有人知道为什么它不能在 dashing 中工作，而是在普通页面上使用 css 和 html。

感谢您的回答。

【问题讨论】：

标签： html css sass dashing

【解决方案1】：

我自己弄的。我只是把选框放到 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 只是做一个蓝色背景。

【讨论】：