04/10/2018, 20:17

Tạo ứng dụng kí tên điện tử với jQuery Mobile và HTML5 Canvas

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

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.

Tạo ứng dụng kí tên điện tử với jQuery Mobile và HTML5 Canvas

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 awidth
var sizedWindowWidth =$('#div_signcontract').awidth();
if(sizedWindowWidth > 700)
sizedWindowWidth = $(window).awidth() / 2;
else if(sizedWindowWidth > 400)
sizedWindowWidth = sizedWindowWidth - 50;
else
sizedWindowWidth = 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.

Tags: HTML5 Canvas jquery mobile signature pad

Chuyên Mục: Javascript

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

Bài liên quan

Tạo ứng dụng kí tên điện tử với jQuery Mobile và HTML5 Canvas

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

Hoàng Hải Đăng viết 20:17 ngày 04/10/2018

Tạo ứng dụng đồng hồ điện tử với jQuery và CSS3

Chào tất cả các bạn, hôm nay chúng ta sẽ cùng nhau tạo ứng dụng hiển thị đồng hồ điện tử trên website hoặc blog. Với sự hỗ trợ từ jQuery và CSS3 animation , ứng dụng mà mình chia sẻ cho các bạn trong bài viết này sẽ thật pro, mà các bước thực hiện thì cực kỳ đơn giản, sẽ không khó để các bạn có ...

Tạ Quốc Bảo viết 20:13 ngày 04/10/2018

Tạo ứng dụng Color Picker đơn giản với HTML5 Canvas

Canvas là phần tử mới xuất hiện trong HTML5, việc hiểu rõ và sử dụng canvas sẽ giúp các bạn có thể viết được nhiều ứng dụng như games. Trong bài viết này, chúng ta sẽ tạo một ứng dụng nhỏ đơn giản về HTML5 Canvas. Với ứng dụng này, các bạn có thể lấy mã màu theo HEX và RGB mà chúng ta thường gọi ...

Trịnh Tiến Mạnh viết 20:12 ngày 04/10/2018

Tạo ứng dụng Qui Đổi Tiền Tệ với PHP và Google Finance

Có rất nhiều công ty tài chính hay bất động sản khi yêu cầu thiết kế web, thường đòi hỏi mục hiển thị tỷ lệ giá tiền tệ cũng như chức năng cho phép người xem khi viếng thăm website của họ có thể tự tay chuyển đổi đơn vị tiền tệ theo tỷ giá mới nhất. Nếu các bạn đang phân vân chưa biết làm sao thì ...

Hoàng Hải Đăng viết 18:00 ngày 04/10/2018

Tạo ứng dụng hiển thị đồng hồ với CSS3 và jQuery

hôm nay tôi sẽ tạo ứng dụng hiển thị đồng hồ trên website hoặc blog. Với sự hỗ trợ từ jQuery và CSS3 animation, mà các bước thực hiện thì cực kỳ đơn giản, sẽ không khó để các bạn có thể hiểu và tùy chỉnh nâng cao cho riêng mình. The Graphics Đầu tiên chúng ta cần chuẩn bị các hình ảnh cho ...

Tạ Quốc Bảo viết 17:34 ngày 12/08/2018
0