4

我很难在我的仪表板上链接小部件。我阅读了另一篇文章并从 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"
4

2 回答 2

9

从 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>
于 2013-10-27T21:29:22.707 回答
1

选项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 设备上的点击事件存在Open issue。

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

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

于 2017-01-25T20:09:11.127 回答