Question

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

我修改了text.coffee以获得此部分（示例是我的其他仪表板）

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

当我点击我的文本小部件时，没有任何反应。我也试过这样做，但没有。

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

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

location.href = "www.stackoverflow.com"

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

EDIT1：

我也没有运气就尝试了以下建议。

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

Answer 1

从潇洒的社区获得帮助。下面是它的工作原理。只需修改您的信息中心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>

Answer 2

选项1

以下内容适用于想要在点击时在新标签页中打开链接，并且仅在仪表板上的某些图块上显示该链接时：

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

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

注意： 在此示例中我设置Switcher（需要安装dashing-contrib），并用于在两个正在使用的磁贴之间切换不同的小部件（Hotness和默认的List）。这适用于创建的任何图块。这就是我碰巧使用它的地方。

<% 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。

的顶部添加一项功能

注意：此示例将使所有图块都可以点击并打开一个空白标签，如果没有为图块提供网址链接，那么它不是理想的解决方案，但可以正常工作*

$(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。

感谢 Phylor 在GitHub处提供临时解决方案/解决方案，该工作已于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>

这是我的第一篇文章，所以我为任何格式错误道歉，但认为现在是时候开始回馈那些帮助我了解的社区。希望这有帮助！

Dashing仪表板链接小部件

2 个答案: