2

このデモhttp://szimek.github.io/signature_padとhttps://github.com/szimek/signature_padのコードを使用して、2 つの署名フィールドを同じページに配置しようとしています。

各パッドで機能する 2 つのクリア ボタンと 1 つの保存ボタンを使用して、同じページに 2 つの署名パッドを配置するにはどうすればよいですか? 保存ボタンは、どちらのパッドが空であるかというエラー メッセージを含む警告を表示するか、両方のパッドが署名されている場合は成功メッセージを表示する必要があります。

これが私が今持っているものです（szimekに感謝）：http://jsfiddle.net/szimek/ps65Q/

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:

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);
4

1 に答える 1

2

クリア ボタンと保存ボタンを使用した短い例を次に示します。

主な追加事項は次のとおりです。

HTML - ボタンの要素を追加します。これらは好きな場所に配置できますが、JavaScript コードでアクセスする方法として一意の ID を指定するようにしてください。

<button id="clear1">Clear</button>
<button id="clear2">Clear</button>
<button id="save">Save</button>

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);

すでにjQueryをお使いのようでしたので、onclick属性の設定に使ってみましたが、もちろん他にも方法はあります。

于 2015-09-16T20:48:31.217 に答える