jQueryが動作しない
-
http://aiai-housing.sakura.ne.jp/wp/
の各物件詳細ページに、印刷プレビューボタンを設置しようとしています。印刷プレビューボタン表示
<span class=”print-preview”>印刷プレビュー</span>印刷プレビュー動作コード
$(function() {//プリントプレビュークリックイベント
$(document).on(‘click’,’.print-preview’,function(){
doPrintPreview();
});});
/**
* プリントプレビュー
*/
doPrintPreview = (function(){
//現在のURLに’print’パラメータを付加し、新しいウィンドウで表示させる。
window.open(location.href+’?print=true’);
});印刷プレビュー表示の際の処理
$(function() {
//URLパラメータに’print’が存在する場合、
if (location.href.indexOf(‘?print’) > -1) {
//bodyにprintクラスを付加。
$(“body”).addClass(‘print’);//.btnBoxの中身を空にし、印刷ボタンをアペンド。
$(‘.btnBox’).html(”).append(‘<input type=”button” value=”印刷する” id=”doPrint” name=”doPrint”>’);//印刷ボタンのクリックイベントに印刷機能を設定
$(‘#doPrint’).on(‘click’, function(){
window.print();
});}
});印刷プレビュー用スタイルシート
@charset “UTF-8”;/*——————————————
プリントプレビュー用
——————————————*/
body.print {
body {
/* フォントを濃く */
color:#111;
/* 背景を白に */
background-color:#fff;
}
#header,
#bc,
#side,
#footer
{
/* 非表示 */
display:none;
}
#content {
/* 幅をブラウザに任せる */
width: auto;
padding: 0;
float: none;
background-color: #fff;
}
table td,
table th {
/* ボーダーを濃く */
border:solid 1px #000 !important;
}}
@media print {
/* 通常のプリントは見たままを印刷したい。 */
/* 印刷ボタンを表示しているボックスだけ印刷時に非表示 */
.btnBox {
display:none;
}
}参考ページ
http://milkyshade.com/javascript/741/それぞれのコード書く場所や、スタイルシートを読み込むコードを書く場所が分かりません。
散々試してみましたが、動作しません。ご教授くださいm(__)m
- トピック「jQueryが動作しない」には新たに返信することはできません。