Виджеты, связывающие виджеты Dashboard

Получил помощь от лихого сообщества. Вот как это работает. Просто измените 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 у вас будет следующее:

Примечание. в этом примере у меня есть Switcher (необходимо установить dashing-contrib) и используется для переключения между двумя плитками, которые используют разные виджеты (Hotness и список по умолчанию). Это будет работать на любой созданной плитке. Это как раз то место, где я его использую.

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

Note:

Кое-что, что я еще не тестировал, но я обнаружил при поиске в Интернете, заключается в том, что использование любого из приведенных выше вариантов может не работать на устройствах iOS. Проблема, которая может быть уже исправлена, и я ни в коем случае не ругаю Гридстера, связана с Гридстером. На сайте Gridster есть Открытая проблема с событиями кликов на устройствах iOS.

Спасибо Phylor на GitHub за временное исправление. /solution, работа которого была подтверждена 21.02.2016 (не мной).

Просто добавьте следующее в начало файла 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>

Это мой первый пост, поэтому я прошу прощения за любые ошибки форматирования, но решил, что пришло время отблагодарить сообщество, которое так мне помогло. Надеюсь это поможет!