Предварительный просмотр jQuery

Я пытаюсь добавить плагин jQuery Print Preview на свой веб-сайт, но использую опцию AddThis Print. Я не уверен, есть ли способ добавить плагин предварительного просмотра для печати с помощью AddThis. Есть ли способ?

Вот мой код:

JS:

var $j = jQuery.noConflict();
   $j(document).ready(function() {
    $j('a.print-preview').printPreview();
});

Добавить этот код:

<!-- AddThis Peekaboo Toolbox : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style 
 addthis_default_style addthis_label_style addthis_32x32_style">
<a class="addthis_button_more">Share</a>
<ul>
<li><a class="addthis_button_facebook"></a></li>
<li><a class="addthis_button_twitter"></a></li>
<li><a class="addthis_button_google_plusone_share"></a></li>
<li><a class="addthis_button_email"></a></li>
<li><a class="addthis_button_print print-preview"></a></li>
</ul>
</div>
<!-- AddThis Peekaboo Toolbox : END -->
<script type="text/javascript" src="https://s7.addthis.com/js/
   300/addthis_widget.js"></script>

Когда я нажимаю "Печать", он открывает стандартное диалоговое окно печати в Firefox (или в любом браузере, который я использую).

У меня такое ощущение, что AddThis JS использует что-то вроде JavaScript:window.print(); запустить диалоговое окно печати, минуя плагин предварительного просмотра jQuery. Есть ли простой способ изменить поведение AddThis для запуска предварительного просмотра?

Источник

2 ответа

Решение

Мне удалось изменить поведение кнопки печати AddThis, удалив классы и добавив свои собственные классы. Вот код:

Оригинальный код AddThis:

<!-- AddThis Peekaboo Toolbox : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style 
  addthis_default_style addthis_label_style addthis_32x32_style">
<a class="addthis_button_more">Share</a>
<ul>
<li><a class="addthis_button_facebook"></a></li>
<li><a class="addthis_button_twitter"></a></li>
<li><a class="addthis_button_google_plusone_share"></a></li>
<li><a class="addthis_button_email"></a></li>
<li><a class="addthis_button_print"></a></li>
</ul>
</div>
<!-- AddThis Peekaboo Toolbox : END -->
<script type="text/javascript" src="https://s7.addthis.com/js/300/
  addthis_widget.js"></script>

Добавьте этот код, как он отображается на странице:

<div class="addthis_toolbox addthis_peekaboo_style 
   addthis_default_style addthis_label_style addthis_32x32_style">
<!-- Omited code not relevant to print function. --> 
<ul style="display: none;"> <!-- Changes to Display Block on Hover --> 
<!-- Omited code not relevant to print function. --> 
 <li>
  <a class="addthis_button_print at300b" title="Print" href="#">
  <span class=" at300bs at15nc at15t_print"></span>
      Print
   </a>
 </li>
</ul>

Отредактированный код для изменения функции печати и вызова предварительного просмотра плагина:

<div class="addthis_toolbox addthis_peekaboo_style 
   addthis_default_style addthis_label_style addthis_32x32_style">
<!-- Omited code not relevant to print function. --> 
<ul style="display: none;"> <!-- Changes to Display Block on Hover --> 
<!-- Omited code not relevant to print function. --> 
 <li>
  <a class="print-preview at-print">
   <span class="at-print-span"></span>
       Print
   </a>
 </li>
</ul>

CSS, чтобы показать печать правильно:

.at-print {
  padding: 0 2px;
  float: left;
  padding: 10px 20px !important;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.at-print-span {
  background-position: 0 -576px !important;
  background: url("//s7.addthis.com/static/r07/widget006_32x32_top.png") 
              no-repeat scroll left center transparent;
  display: block;
  height: 32px !important;
  line-height: 32px !important;
  overflow: hidden;
  width: 32px !important;
 float: left;
}

Я не уверен, что нужен весь CSS, но он работает.

ВАЖНАЯ ЗАМЕТКА:

Таким образом вы измените функциональность кнопки печати, чтобы я мог вызвать функцию предварительного просмотра jQuery. Однако вы будете выдавать ошибку при совместном использовании сценария AddThis и подключаемого модуля предварительного просмотра. Предварительный просмотр печати должен быть изменен.

Вот что должно быть сделано в строке 44, вы увидите следующий код:

// The frame lives
        for (var i=0; i < window.frames.length; i++) {
            if (window.frames[i].name == "print-frame") {
                var print_frame_ref = window.frames[i].document;
                break;
            }
        }

Замените приведенный выше код следующим:

print_frame_ref = print_frame[0].contentWindow.document;

проблема решена.

Источник

Есть два варианта. Один из них - добавить пользовательский сервис со значком печати и просто использовать его вместо API печати.

http://support.addthis.com/customer/portal/articles/381245-custom-services

в addthis также встроен API для печати:

http://www.addthis.com/services/list

Источник
Другие вопросы по тегам