[英]How to add 2 signature_pad in a same page
I am trying to put 2 signature fields in a same page, using this demo http://szimek.github.io/signature_pad and code at https://github.com/szimek/signature_pad . 我正在尝试使用此演示http://szimek.github.io/signature_pad和代码https://github.com/szimek/signature_pad将2个签名字段放在同一页面中。
How can I put 2 signature pads in the same page, with 2 clear buttons that work for each pad and 1 save button? 如何将2个签名板放在同一页上,每个板有2个清除按钮,另1个保存按钮? The save button should show an alert with an error message of which pad is empty, or a success message if both pads are signed. 保存按钮应显示一个警报,其中包含一个错误消息,指出哪个填充板为空;如果两个填充板均已签名,则显示成功消息。
Here is what I have now (thanks to szimek): http://jsfiddle.net/szimek/ps65Q/ 这是我现在拥有的(感谢szimek): http : //jsfiddle.net/szimek/ps65Q/
HTML: HTML:
var wrapper1 = document.getElementById("signature-pad-1"),
canvas1 = wrapper1.querySelector("canvas"),
signaturePad1;
var wrapper2 = document.getElementById("signature-pad-2"),
canvas2 = wrapper2.querySelector("canvas"),
signaturePad2;
function resizeCanvas(canvas) {
var ratio = window.devicePixelRatio || 1;
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);
resizeCanvas(canvas2);
signaturePad2 = new SignaturePad(canvas2);
JS: JS:
var wrapper1 = document.getElementById("signature-pad-1"),
canvas1 = wrapper1.querySelector("canvas"),
signaturePad1;
var wrapper2 = document.getElementById("signature-pad-2"),
canvas2 = wrapper2.querySelector("canvas"),
signaturePad2;
function resizeCanvas(canvas) {
var ratio = window.devicePixelRatio || 1;
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);
resizeCanvas(canvas2);
signaturePad2 = new SignaturePad(canvas2);
Here is a short example with clear and save buttons . 这是一个带有清除和保存按钮的简短示例 。
The main additions are: 主要增加的是:
HTML - add elements for the buttons. HTML-为按钮添加元素。 These can go anywhere you like, just make sure to give them unique IDs, as this is how you will access them in the JavaScript code. 它们可以随心所欲,只需确保为它们提供唯一的ID,因为这就是您在JavaScript代码中访问它们的方式。
<button id="clear1">Clear</button>
<button id="clear2">Clear</button>
<button id="save">Save</button>
JS - add functions for clearing and saving, and set the onclick
attributes of the buttons you just made to call these functions. JS-添加用于清除和保存的功能,并设置刚调用这些功能的按钮的onclick
属性。
function clear1() {
signaturePad1.clear();
}
function clear2() {
signaturePad2.clear();
}
function save() {
if (signaturePad1.isEmpty() || signaturePad2.isEmpty())
alert("Error: Please sign both pads!");
else
alert("Success!");
}
$("#clear1").click(clear1);
$("#clear2").click(clear2);
$("#save").click(save);
It looked like you were already using jQuery, so I used it for setting the onclick attribute, but of course there are other ways to do that. 看起来您已经在使用jQuery,所以我用它来设置onclick属性,但是当然还有其他方法可以做到这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.