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.

<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.

<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 </a>
<p class="popupHeader">Sign Pad</p>
</div>
<div class="ui-content popUpHeight">
<div id="div_signcontract">
<canvas id="canvas">Canvas is not supported</canvas>
<div>
<input 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:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
var isSign = false;
var leftMButtonDown = false;

jQuery(function(){
//Initialize sign pad
init_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('<p>Your 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 width
var sizedWindowWidth =$('#div_signcontract').width();
if(sizedWindowWidth > 700)
sizedWindowWidth = $(window).width() / 2;
else if(sizedWindowWidth > 400)
sizedWindowWidth = sizedWindowWidth - 50;
else
sizedWindowWidth = sizedWindowWidth - 20;
 
 $("#canvas").width(sizedWindowWidth);
 $("#canvas").height(200);
 $("#canvas").css("border","1px solid #000");

 var canvas = $("#canvas").get(0);

 canvasContext = canvas.getContext('2d');

 if(canvasContext)
 {
 canvasContext.canvas.width  = 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.

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster