Hammer thư viện JavaScript chạm cho màn hình cảm ứng

Hammer thư viện JavaScript chạm cho màn hình cảm ứng

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.

Bạn thấy bài viết này như thế nào?: 
Average: 10 (2 votes)
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Gangnam Style trở thành clip được xem nhiều nhất Youtube

Gangnam Style trở thành clip được xem nhiều nhất Youtube

Sức nóng của “hiện tượng” Gangnam Style dường như vẫn chưa có dấu hiệu hạ nhiệt, khi mới đây clip của ca khúc này đã chính thức trở thành clip có số lượng xem nhiều nhất trong lịch sử Youtube, với hơn 820 triệu lượt xem.

Javascript Why To? Là 1 programming language phổ biến nhất bây giờ

Javascript Why To? Là 1 programming language phổ biến nhất bây giờ

There are seemingly an ever-increasing number of efforts with the purpose of allowing programmers to write in some other language, like Java, CoffeeScript

Làm emoticon có hình gương mặt bằng Skype Humoticons

Làm emoticon có hình gương mặt bằng Skype Humoticons

Là một ứng dụng trên Facebook, Skype Humoticons giúp người dùng tạo biểu tượng để sử dụng như các emoticon thông thường.

Công ty diệt chuột T&C

 

Diet con trung