Trong hướng dẫn này, tôi chỉ cho bạn một số plugin jQuery bằng cách sử dụng chúng, bạn có thể nắm bắt chữ ký người dùng trên trang web của mình
Tôi thảo luận về các plugin sau với một ví dụ –
- jChữ ký
- Bảng chữ ký
- Chữ ký giao diện người dùng jQuery
Họ thêm một vùng chứa trên trang web nơi người dùng có thể vẽ chữ ký của mình bằng con trỏ chuột
Tải xuống
nội dung
- jChữ ký
- Bảng chữ ký
- Chữ ký giao diện người dùng jQuery
- Sự kết luận
1. jChữ ký
Dưới đây là một số bước để bao gồm plugin này –
bước
- Tải xuống plugin jSignature và bao gồm các tập lệnh sau –
Bạn cần bao gồm tập lệnh
5 cho IE phiên bản cũ hơn
- Tạo phần tử vùng chứa
- Đang khởi tạo
6 trên container
$["#signature"].jSignature[{'UndoButton':true}];
Thí dụ
Trong ví dụ này, tôi đang hiển thị bản xem trước hình ảnh của chữ ký khi nút được nhấp vào
#signature{ width: 100%; height: auto; border: 1px solid black; }
$[document].ready[function[] { // Initialize jSignature var $sigdiv = $["#signature"].jSignature[{'UndoButton':true}]; $['#click'].click[function[]{ // Get response of type image var data = $sigdiv.jSignature['getData', 'image']; // Storing in textarea $['#output'].val[data]; // Alter image source $['#sign_prev'].attr['src',"data:"+data]; $['#sign_prev'].show[]; }]; }];
Xem bản trình diễn
2. Bảng chữ ký
Nó sử dụng canvas HTML5 nơi người dùng có thể vẽ chữ ký của họ. Nó hoạt động trên tất cả các trình duyệt hiện đại và không phụ thuộc vào bất kỳ thư viện bên ngoài nào
bước
- Tải xuống plugin từ đây và bao gồm đoạn mã sau –
- Tạo phần tử
7
- Khởi tạo
8 trên canvas
0
Thí dụ
Hiển thị bản xem trước chữ ký khi nhấp vào nút xem trước
1
Xem bản trình diễn
3. Chữ ký giao diện người dùng jQuery
Plugin này sử dụng thư viện giao diện người dùng jQuery và mô-đun chuột để vẽ chữ ký. Bạn có thể lấy thư viện này từ đây
bước
- Đầu tiên, bao gồm thư viện giao diện người dùng jQuery trên trang của bạn với jQuery
2
- Bao gồm
9 và
$["#signature"].jSignature[{'UndoButton':true}];
0
5
- Để bật cảm ứng trên thiết bị, bạn cần bao gồm
$["#signature"].jSignature[{'UndoButton':true}];
1
0
- Bạn cần bao gồm
$["#signature"].jSignature[{'UndoButton':true}];
2 cho các phiên bản IE cũ hơn
1
- Tạo phần tử vùng chứa
- Khởi tạo chữ ký trên vùng chứa
3
Thí dụ
Hiển thị bản xem trước chữ ký khi nhấp vào nút xem trước
4
Xem bản trình diễn
4. Kết luận
Trong phần minh họa, tôi sẽ chỉ cho bạn một số ví dụ đơn giản sử dụng plugin jQuery mà bạn có thể dễ dàng triển khai trong dự án của mình và bạn có thể lưu giá trị được tạo trong bảng cơ sở dữ liệu của mình để sử dụng sau hoặc tải xuống dưới dạng hình ảnh
Bạn có thể tìm hiểu thêm về các plugin này và nhiều tính năng khác từ tài liệu và ví dụ của chúng