Hôm nay mình sẽ đưa đến cho các bạn một ứng dụng cực chất, ứng dụng này thích hợp cho các trang web chạy trên các thiết bị di động như mobile hay máy tính bảng. Các bạn chỉ việc download hoặc copy và chèn vào web/blog là hoàn toàn có thể sử dụng được.
Xem Demo | Download
HTML
Đầu tiên, chúng ta sẽ tạo nút bấm để làm xuất hiện pop up.
1 2 3 | div id="page" data-role="content"a href="#divPopUpSignContract" data-rel="popup" data-position-to="window" data-role="button" data-inline="true"Open Sign Pad/a/div |
Sau đó các bạn thêm đoạn html bên dưới , đoạn html này chính là phần cho người dùng kí tên.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | div data-role="popup" id="divPopUpSignContract"div data-role="header" data-theme="b" a data-role="button" data-rel="back" data-transition="slide" class="ui-btn-right" onclick="closePopUp()" Close /ap class="popupHeader"Sign Pad/p/divdiv class="ui-content popUpHeight"div id="div_signcontract"canvas id="canvas"Canvas is not supported/canvasdivinput id="btnSubmitSign" type="button" data-inline="true" data-mini="true" data-theme="b" value="Submit Sign" onclick="fun_submit()" /input id="btnClearSign" type="button" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" //div/div/div/div |
jQuery
Cuối cùng là các bạn chỉ việc chèn đoạn script sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | script type="text/javascript"var isSign = false;var leftMButtonDown = false;jQuery(function(){//Initialize sign padinit_Sign_Canvas();});function fun_submit() {if(isSign) {var canvas = $("#canvas").get(0);var imgData = canvas.toDataURL();jQuery('#page').find('p').remove();jQuery('#page').find('img').remove();jQuery('#page').append(jQuery('pYour Sign:/p'));jQuery('#page').append($('img/').attr('src',imgData));closePopUp();} else {alert('Please sign');}}function closePopUp() {jQuery('#divPopUpSignContract').popup('close');jQuery('#divPopUpSignContract').popup('close');}function init_Sign_Canvas() {isSign = false;leftMButtonDown = false;//Set Canvas awidthvar sizedWindowWidth =$('#div_signcontract').awidth();if(sizedWindowWidth 700)sizedWindowWidth = $(window).awidth() / 2;else if(sizedWindowWidth 400)sizedWindowWidth = sizedWindowWidth - 50;elsesizedWindowWidth = sizedWindowWidth - 20; $("#canvas").awidth(sizedWindowWidth); $("#canvas").height(200); $("#canvas").css("border","1px solid #000"); var canvas = $("#canvas").get(0); canvasContext = canvas.getContext('2d'); if(canvasContext) { canvasContext.canvas.awidth = sizedWindowWidth; canvasContext.canvas.height = 200; canvasContext.fillStyle = "#fff"; canvasContext.fillRect(0,0,sizedWindowWidth,200); canvasContext.moveTo(50,150); canvasContext.lineTo(sizedWindowWidth-50,150); canvasContext.stroke(); canvasContext.fillStyle = "#000"; canvasContext.font="20px Arial"; canvasContext.fillText("x",40,155); } $(canvas).on('vmousedown', function (e) { if(e.which === 1) { leftMButtonDown = true; canvasContext.fillStyle = "#000"; var x = e.pageX - $(e.target).offset().left; var y = e.pageY - $(e.target).offset().top; canvasContext.moveTo(x, y); } e.preventDefault(); return false; }); $(canvas).on('vmouseup', function (e) { if(leftMButtonDown e.which === 1) { leftMButtonDown = false; isSign = true; } e.preventDefault(); return false; }); // draw a line from the last point to this one $(canvas).bind('vmousemove', function (e) { if(leftMButtonDown == true) { canvasContext.fillStyle = "#000"; var x = e.pageX - $(e.target).offset().left; var y = e.pageY - $(e.target).offset().top; canvasContext.lineTo(x,y); canvasContext.stroke(); } e.preventDefault(); return false; });}/script |
Mong là ứng dụng này sẽ giúp ích cho các bạn trong một số trường hợp.
