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>

“打印应用程序”按钮正确调用 printThis 插件。但是，我没有从 page1 DIV 部分获得任何内容。打印的只是右上角的正常标题部分（第 1 页，共 1 页）和 about：左下角的空白和页面右下角的日期……没有内容，在我的示例文件中应该是申请人姓名输入框。

我认为这是因为 page1 的 DIV 在显示 page2 的内容时设置为“隐藏”。如果我在按钮调用中替换“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 回答