Dashing.io 带有选取框的小部件
Dashing.io Widget with a marquee
我正在与 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>
在dashing中是这样显示的
and doesnt move
我没有碰咖啡脚本。这是小部件生成的默认设置。
我没看出哪里出了问题以及为什么它在 dashing 中不起作用。也许这里有人知道为什么它不能在 dashing 中工作,但在正常页面上使用 css 和 html。
感谢您的回答。
我自己搞定的。我只是将选取框放入 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 合作,我想构建一个带有选取框的小部件。我用 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>
在dashing中是这样显示的 and doesnt move
我没有碰咖啡脚本。这是小部件生成的默认设置。
我没看出哪里出了问题以及为什么它在 dashing 中不起作用。也许这里有人知道为什么它不能在 dashing 中工作,但在正常页面上使用 css 和 html。
感谢您的回答。
我自己搞定的。我只是将选取框放入 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 只是做了一个蓝色背景。