0

非表示の可視性を使用して複数ページのフォームを表示することがわかったコード スニペットを使用しています。私の問題はすべてこの方法に起因する可能性が非常に高いです。そのリソースはここからのものでした: http://www.devx.com/webdev/Article/10483/0/page/2

フォームの複数のページを表示するのはかなり簡単な方法です...おそらく、印刷できるようにすることを意図したものではありません。

<html>
<head>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">

$.getScript("printThis.js", function(){
});

var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}

function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
function showValues(form){
var values = '';
var len = form.length - 1; //Leave off Submit Button
for(i=0; i<len; i++){
    if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)
        continue;
    values += form[i].id;
    values += ': ';
    values += form[i].value;
    values += '\n';
}
alert(values);
}
</script>

<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
</style>
</head>

<body>
<form id="multiForm" action="App1.php" method="POST" action="javascript:void(0)" onSubmit="showValues(this)" id="app">

<div id="page1" class="page" style="visibility:visible;">

Applicant Name: <input type="text" size="50" name="name1" >

</form>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>

<div id="page2" class="page">

This is Page 2
<br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="B2" value="Print App" onClick="$('#page1').printThis({})">
<br><br>

</div>
</form>
</body>
</html>

「Print App」ボタンは printThis プラグインを適切に呼び出しています。ただし、page1 DIV セクションからコンテンツを取得できません。印刷されるのは、右上の通常のヘッダー部分 (ページ 1 の 1) と、ページの左下の空白とページの右下の約: 内容ではありません。

これは、page2 のコンテンツが表示されているときに、page1 の DIV が「非表示」に設定されているためだと思います。ボタン呼び出しで「page2」を代入すると、期待どおりに page2 からコンテンツを取得します。

だから...私が求めているのは、printThisボタンの呼び出しで参照されているDIVを一時的に変更して、ページ印刷を実行するのに十分なだけ長く見えるようにする方法だと思います。

何か案は？

4

1 に答える 1

0

私はプラグインの作成者です。印刷メディア クエリを CSS に組み込む必要があります。

これは、すべてのフォーム要素が表示されるため、ファイル > 印刷またはコントロール + P を選択するユーザーにも役立ちます。

印刷メディア クエリを使用すると、印刷ページ専用のスタイル変更を行うことができます。

例：

@media print {
     #page1, #page2 {
        display: block;
        visibility: visible;
        position: relative;
     }
}

これをcssに含めます。

さらに、上記のコードに基づいて、ページに css と javascript がインラインで含まれています。メンテナンスと改善されたコード標準のために、両方を外部ファイルに移動することを検討する必要があります。

printThis は、現在のセットアップでは機能しません。プラグインは、指定したコンテナー (セレクター) と、ドキュメントのヘッダーにあるリンクされた css を検索するためです。

したがって、上記の場合、次のことができます。

<!-- move all of this to the bottom of the page for performance -->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="printThis.js"></script>
<script type="text/javascript" src="myJavascript.js"></script>
<!-- the above file is your javascript externalized, remove $.getScript, wrap in $(document).ready() -->

次に、これを頭に入れます。

<link type='text/css' rel='stylesheet' href='style.css'>
<!-- contains your css from the page, including the print media query -->
于 2013-12-11T17:11:24.710 に答える