Hướng dẫn Sử dụng JavaScript chạm cho màn hình cảm ứng bằng thư viện Hammer

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,634
Được Like
10,890
Sử dụng JavaScript chạm cho màn hình cảm ứng bằng thư viện Hammer

Công nghệ luôn luôn thay đổi và tiến bộ, màn hình cảm ứng ngày càng chiếm tỉ lệ lớn cho các thiết bị di động và sẽ ngày càng phổ thông. Bài viết này sẽ giới thiệu một thư viện JavaScript tuyệt vời giúp bạn xây dựng giao diện web cho màn hình cảm ứng với các sự kiện chạm bao gồm : tap, double tap, hold, drag, swipe, transform.

hammer.jpg

Thư viện hammer.js chỉ 22KB bạn có thể sử dụng nó với JavaScript-DOM thuần hoặc có thể sử dụng với thư viện jQuery bằng việc liên kết thêm với file jquery.hammer.js vào phía dưới hammer.js cùng với thư viện jQuery.

Sử dụng với JavaScript-DOM thuần chúng ta có các phương thức của hammer để xử lý như sau
Mã:
var hammer = new Hammer(document.getElementById("container"));
hammer.ondragstart = function(ev) { };
hammer.ondrag = function(ev) { };
hammer.ondragend = function(ev) { };
hammer.onswipe = function(ev) { };
hammer.ontap = function(ev) { };
hammer.ondoubletap = function(ev) { };
hammer.onhold = function(ev) { };
hammer.ontransformstart = function(ev) { };
hammer.ontransform = function(ev) { };
hammer.ontransformend = function(ev) { };
hammer.onrelease = function(ev) { };

Sử dụng với jQuery chúng ta có các sự kiện: hold, tap ,doubletap ,transformstart, transform, transformend, dragstart, drag, dragend, swipe, release
Mã:
$("#element")
    .hammer({
         // options...
    })
    .bind("tap", function(ev) {
         console.log(ev);
    });

Để xem demo, tải chương trình và các hướng dẫn chi tiết bạn hãy truy cập github.com. Hammer được tạo bởi Jorik Tangelder và được phát triển bởi mọi người tại Eight Media.

Chúc các bạn thành công.


Nguồn: sothichweb.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom