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]

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.

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

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

$("#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​