仪表板链接小部件答案

【问题标题】：Dashing dashboard linking widgets仪表板链接小部件
【发布时间】：2013-11-05 18:31:05
【问题描述】：

我很难在我的仪表板上链接小部件。我阅读了另一篇文章并从 dashing 社区获得了一些帮助，但是，我无法链接小部件

我将 text.coffee 修改为包含此部分（示例是我的另一个仪表板）

click: (event) ->
  location.href = "sample"

当我点击我的文本小部件时，什么也没有发生。我也试过这样做，但没有。

click: (event) ->
  location.href = "www.stackoverflow.com"

但是，当我在meter.coffee 的onData 部分添加以下行时，它会重定向到stackoverflow.com。

location.href = "www.stackoverflow.com"

我做错了什么？你有我可以尝试的例子吗？

编辑1：

我也尝试了以下建议，但没有任何运气。

click: (e) ->
  e.preventDefault()
  location.href = "http://www.stackoverflow.com"

【问题讨论】：

触发此点击的上下文是什么。尝试在末尾添加return false。 preventDefault 如果有需要，我猜它也应该在最后。
我的仪表小部件中有点击事件块，但是，添加 return false 没有帮助。类 Dashing.Meter 扩展 Dashing.Widget @accessor 'value', Dashing.AnimatedValue click: (event) -> location.href = "stackoverflow.com" return false

标签： javascript ruby coffeescript dashboard dashing

【解决方案1】：

从 dashing 社区获得帮助。下面是它的工作原理。只需修改您的仪表板 erb 以链接您要查看的页面

<li data-row="2" data-col="2" data-sizex="2" data-sizey="1" onclick="location.href='http://www.stackoverflow.com';">
  <div data-id="test_text_widget" data-view="Text" data-title="Test"</div>
</li>

【讨论】：

该死，我正要写一个带有onclick属性的版本=)
感谢您的回答，您帮了我很大的忙！ :)

【解决方案2】：

选项 1

当想要在点击时在新选项卡中打开链接并且只希望它在仪表板上的某些图块上时，以下方法将起作用：

onClick="javascript: window.open('http://url', '_blank');"

例如，在您的dashboard.erb 文件中，您将拥有以下内容：

注意： 在这个例子中我有Switcher 设置（需要安装dashing-contrib），并用于在使用不同小部件的2个图块之间切换（@ 987654323@ 和默认列表）。这将适用于创建的任何图块。这正是我碰巧使用它的地方。

<% content_for :title do %>Dashboard Name<% end %>
  <div class="gridster">
     <ul>

       <li data-switcher-interval="5000" data-row="1" data-col="1" data-sizex="1" data-sizey="1" onClick="javascript: window.open('http://www.stackoverflow.com', '_blank');">
         <div data-id="data-id-name from .rb job" data-view="Hotness" data-title="Title of Widget" data-moreinfo="more information text" data-cool="1" data-warm="30"></div>
         <div data-id="data-id-name from .rb job" data-view="List" data-unordered="true" data-title="Title of Widget" data-moreinfo="more information text"></div>
         <i class="fa fa-warning icon-background-small"></i>                 
       </li>

     </ul>
  </div>

选项 2

另一种方法是在 dashboard.erb 的顶部添加一个函数。

注意：如果没有为磁贴提供 url 链接，此示例将使所有磁贴都可点击并打开一个空白选项卡，因此它不是理想的解决方案，但确实有效*

$(function bringToTop() {
  $('li').live('click', function(e){
    var widget = $(this).find('.widget');
    if(widget.data('url')){
    var url = widget.data('link');
    var win = window.open(url, '_blank');
    win.focus();
    }
  });
});

所以你的整个dashboard.erb 文件应该是这样的：

<script type='text/javascript'>
  $(function bringToTop() {
    $('li').live('click', function(e){
       var widget = $(this).find('.widget');
       if(widget.data('url')){
       var url = widget.data('link');
       var win = window.open(url, '_blank');
       win.focus();
       }
      });
     });
</script>
<% content_for :title do %>Dashboard Name<% end %>
  <div class="gridster">
   <ul>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
       <div data-id="mydata" data-view="Hotness" data-title="Data Title" data-cool="20" data-warm="1000" data-link='http:\\www.stackoverflow.com'></div>
    </li>
 </ul>

注意：

我尚未测试但在网上搜索时发现，使用我提供的上述任一选项可能无法在 iOS 设备上运行。这个问题可能已经解决了，而且我不会以任何方式敲击 Gridster，它与 Gridster 相关。 Gridster 那边有一个Open issue for click events on iOS devices。

感谢 GitHub 上的 Phylor 提供临时修复/解决方案，该解决方案已于 2016 年 2 月 21 日确认有效（不是我本人）。

只需将以下内容添加到您的 dashboard.erb 文件的顶部：

<script type='text/javascript'>
   function openUrl(obj) {
   var widget = $(obj).find('.widget');
   var url = widget.data('url');
   window.open(url, '_blank');
   }

  $(function() {
   $('li').live('click', function(e){
      openUrl(this);
     });
   $('li').live('touchend', function(e){
      openUrl(this);
     });
   });
</script>

这是我的第一篇文章，因此对于任何格式错误，我深表歉意，但我认为是时候开始回馈帮助我的社区了。希望这会有所帮助！

【讨论】：