2

jQuery Print Previewプラグインを自分のWebサイトに追加しようとしていますが、AddThisの印刷オプションを使用しています。AddThisを使用して印刷プレビュープラグインを追加する方法があるかどうかはわかりません。方法はありますか？

これが私のコードです：

JS：

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

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 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（または使用しているブラウザ）の標準の印刷ダイアログボックスがポップアップ表示されます。

JavaScript:window.print();AddThis JSは、印刷ダイアログをトリガーするようなものを使用しているため、jQuery印刷プレビュープラグインをバイパスしているように感じます。AddThisの動作を変更して、印刷プレビューをトリガーする簡単な方法はありますか？

4

2 に答える 2

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スクリプトとPrint Preview Pluginを一緒に使用すると、エラーがスローされます。印刷プレビューを変更する必要があります。

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;

問題が解決しました。

于 2012-07-08T17:11:13.777 に答える
0

2つのオプションがあります。1つは、印刷アイコンを使用してカスタムサービスを追加し、印刷APIの代わりにそれを使用することです。

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

addthisには印刷に適したAPIも組み込まれています。

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

于 2012-07-07T23:31:03.620 に答える