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

Я пытаюсь добавить jQuery Print Preview Plugin на мой сайт, но я использую опцию печати AddThis. Я не уверен, что есть способ для меня, чтобы добавить плагин предварительного просмотра печати с помощью 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 Print Preview. Есть ли простой способ изменить поведение AddThis для запуска предварительного просмотра печати?

2 2
javascript jquery printing print-preview

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 Print. Однако при совместном использовании скрипта AddThis и плагина Print Preview вы выдадите ошибку. Предварительный просмотр должен быть изменен.

Вот что нужно сделать вокруг строки 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;

Вопрос решен.

2

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

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

Есть такжеprintfriendly API, встроенный в addthis:

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

0