虚线仪表板链接小部件

Dashing dashboard linking widgets

本文关键字：小部 链接 仪表板 虚线      更新时间：2023-09-26

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

我修改了我的 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"

得到了潇洒社区的帮助。这是它的工作原理。只需修改您的仪表板 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>

选项 1

当想要在单击时在新选项卡中打开链接，并且只想将其放在仪表板上的某些磁贴上时，以下内容将起作用：

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

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

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

<% 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 的 iOS 设备上存在一个未解决的点击事件问题。

感谢 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>

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

相关文章：