Как добавить 2 подписи на одной странице

Я пытаюсь разместить 2 поля подписи на одной странице, используя эту демонстрацию http://szimek.github.io/signature_pad и код на https://github.com/szimek/signature_pad.

Как я могу разместить 2 панели для подписи на одной странице с 2 прозрачными кнопками, которые работают для каждой панели, и 1 кнопкой сохранения? Кнопка сохранения должна отображать предупреждение с сообщением об ошибке о том, какая панель пуста, или сообщение об успехе, если обе панели подписаны.

Вот что у меня есть сейчас (спасибо 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);

javascript html jquery css signaturepad
person Ronaldinho Learn Coding    schedule 16.09.2015    source источник
comment
Добавьте кнопки и настройте их обработчики событий на вызов signaturePad.clear() для каждого пэда. Для кнопки сохранения установите ее функцию, чтобы проверять, пуста ли какая-либо панель, и отображать соответствующее сообщение.   -  person user812786    schedule 16.09.2015
comment
@whrrgarbl, но если я сделаю 2 блока для подписи, то где мне разместить кнопку сохранения? вы можете помочь с этим?   -  person Ronaldinho Learn Coding    schedule 16.09.2015
comment
Вы можете разместить кнопку в любом месте страницы, единственное, что имеет значение с точки зрения кодирования, - это то, что ее атрибут onclick запускает вашу функцию «сохранения».   -  person user812786    schedule 16.09.2015

Ответы (1)


arrow_upward
2
arrow_downward

Вот небольшой пример с кнопками очистки и сохранения.

Основные дополнения:

HTML - добавьте элементы для кнопок. Они могут быть куда угодно, просто убедитесь, что вы предоставили им уникальные идентификаторы, так как вы получите к ним доступ в коде JavaScript.

<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, но, конечно, есть и другие способы сделать это.

person user812786    schedule 16.09.2015