Hướng dẫn Tìm hiểu và cách làm Context Menu API của HTML 5

[PVS]

Tìm hiểu và cách làm Context Menu API của HTML 5

Đây thực sự là một API thú vị. Nó làm gia tăng thêm trải nghiệm của người dùng khi sử dụng website của bạn.
Thông thường, khi bạn nhấp phải chuột và một đối tượng nào đó trên website, chuyện gì sẽ xảy ra nhỉ? Ồ, tất nhiên thì nó sẽ hiện ra các chức năng mặc định có sẵn ví dụ như copy, paste, refresh, save as… Với context menu api thì nó cho phép lập trình viên có thể thêm vào danh sách mặc định sẵn các menu con khác với bất kỳ tính năng mà bạn có thể tưởng tượng.

Hình ảnh demo khi bạn nhấp phải vào đối tượng sẽ hiện ra thêm các menu khác nữa
​

Hiện tại thì API này chỉ mới hoạt động được trên trình duyệt Firefox thôi. Nếu muốn ứng dụng cho tất cả các trình duyệt khác thì chắc bạn sẽ phải đợi thêm ít lâu nữa đấy.
Bây giờ chúng ta khai báo đơn giản như vậy nhé.

<section contextmenu="new_menu">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, consectetur quas reprehenderit quibusdam accusamus inventore a enim perspiciatis impedit ipsum similique dolor est quia temporibus cum autem architecto tempora quam!
</section>
<!-- Begin context -->
<menu type="context" id="new_menu">
    <menuitem label="Menu name 01"></menuitem>
    <menuitem label="Menu name 02"></menuitem>
</menu>

Khi khai báo xong thì bạn cứ hãy mở trình duyệt firefox lên vào xem kết quả nhé. Nhớ là nhấp chuột phải vào đoạn văn bản ý. Nó sẽ hiển thị thêm 2 menu con ở phía trên cùng nữa.

Về cách thức hoạt động thì rất đơn giản, nếu bạn muốn thêm menu còn vào bất kỳ phần từ nào của website như header, footer, img, video,…. Thì chúng ta cần khai báo thêm thuộc tính contextmenu. Sau đó, chúng ta khai báo thêm danh sách menu cần thiết với thẻ <menu> có type=“context” và đặc biệt là giá trị id của thẻ <menu> phải giống với giá trị của contextmenu.

Bây giờ chúng ta sẽ tiến hành nâng cao hơn với ví dụ cụ thể như thế này. Khi nhấp chuột vào một bức ảnh, thì sẽ thêm 3 tính năng mới là rotate, zoom, share.
Chúng ta tiến hành khai báo html như sau:

<img contextmenu="customMenu" src="https://www.izwebz.com/wp-content/uploads/2014/08/Firmness.png" width="500" id="myImg">
    <!-- Begin context -->
<menu type="context" id="customMenu">
    <menuitem label="Rotate"></menuitem>
    <menuitem label="Zoom"></menuitem>
    <menu label="Share...">
        <menuitem label="Facebook"></menuitem>
        <menuitem label="Twitter"></menuitem>
    </menu>
</menu>

Sau đó khai báo các thuộc tính css trước:

img { -moz-transition: 0.2s; }
/* Xoay hình 90 độ */
.rotate { -moz-transform: rotate(90deg); }
/* Thay đổi kích thước hình nhỏ 70% */
.resize { -moz-transform: scale(0.7); }
/* Kết hợp cả 2 cách trên */
.resize.rotate { -moz-transform: scale(0.7) rotate(90deg); }

Trong khai báo thì các bạn có thể thấy chúng ta hoàn toàn có thể tạo thêm sub menu. Bây giờ nó đã hiển thị trên trình duyệt firefox khi nhấp chuột phải vào hình rồi. Nhưng mà, còn một vấn đề nữa là khi chọn thì nó vẫn chưa có tác động hay hiệu ứng gì cả. Bây giờ chúng ta sẽ bước sang bước code javascript để tạo hiệu ứng rotate, zoom, và share.
Bước đầu tiên, tham chiếu các đối tượng sẽ dùng đến với Query selector API

Bây giờ thì tiếp tục với việc áp dụng sự kiện onclick và API classList vào các menuintem thôi. Ví dụ: khi click vào menu item Rotate thì sẽ chạy css class .rotate để xoay hình 90 độ.

Tiếp theo là JS:

var rotate = document.querySelector('menuitem[label="Rotate"]');
var zoom = document.querySelector('menuitem[label="Zoom"]');
var facebook = document.querySelector('menuitem[label="Facebook"]');
var twitter = document.querySelector('menuitem[label="Twitter"]');
var img = document.querySelector('#myImg');
                                
rotate.onclick = function(){
    img.classList.toggle("rotate");
}

zoom.onclick = function(){
    img.classList.toggle("resize");
}
facebook.onclick = function(){
    // Tạo url để share facebook
    var url = "http://facebook.com/sharer/sharer.php?u="+window.location.href;
    // Chuyển hướng cho trang với url mới tạo
    window.location.href = url;
}
twitter.onclick = function(){
    // Tạo url để share lên twitter
    var url = "http://twitter.com/intent/tweet?text=Share this link:"+window.location.href;
    // Chuyển hướng cho trang với url mới tạo
    window.location.href = url;
}

Trong đoạn code trên thì chúng ta có một số điểm lưu ý:
window.location.href có chức năng là lấy địa chỉ website hiện tại. Tuy nhiên nếu dùng nó với phương thức window.location.href = url thì chức năng của nó sẽ là chuyển hướng địa chỉ website sang một địa chỉ url khác mà chung ta cung cấp.
Địa chỉ url chia sẽ link của facebook, twitter đó là url được cung cấp thông qua Facebook API và Twitter API, bạn có thể tham khảo thêm trên website của họ.
Một điểm lưu ý khác là trong các sự kiện onclick có

img.classList.toggle("rotate");

classList đó là một API khác của HTML 5, có diệp tôi sẽ chia sẽ cho các bạn biết thêm về nó.

Bây giờ chúng ta sẽ làm màu mè thêm một chút nữa, bằng cách thêm vào các icon cho các menu mà bạn mới vừa tạo.
Ví dụ:

<section contextmenu="new_menu">
Hãy nhấp phải chuột vào đoạn text này.
</section>
<!-- Begin context -->
<menu type="context" id="new_menu">
    <menuitem label="Hình Rotate" icon="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEsklEQVRIS7WVf0yUdRzH38+v+8khgijqoRgjbaagGDqyObPNVorQH0SZuuZWLYg2a62FMx2pc239EfhHbVrqnBr2kyuhEaJTRMSQlaZAl3gcvwzR+8HdPfc8z7fPcwnjDE7b6rbb3e75ft6vz/f9fX8/xyHGy/5Ro1kZnro96JNXJSSI2cmJElRZg9vpwZ+uoYsik38KuT3bca4wMJEMN9GDORWuCg0oWf9EAgrS4yBKgFcBOKrgeSBE3483D+LTylZow8OVWu26N8bTGhcw55Me16oFcfZXM224TL31hamUMYxdzPEc4gxAhhkoP3gdpw80daPxhdR7If8AZBwYcK3PsdoXpFhwNaBBoArSos65u5+ARlvTCKgxeki/z7ZxqKrrw1e76rrRvCEKEgWYf/xWxfI0qWTJLCt6QhrICbKDg0Hi0HkzBHd/EKrCYE8xYt5MC4JBjWAMjFQSrQL2fXYVrVXNlTi3adSuUcD8LwbiTCbJW7p0Eq5Rod61QN3dCir45useBPp9zUwOV6tyCKpPWctZTTkbtmQi2SZCUWlLtHaqhUdp/jEqHLShodin2zUKWFw9VPn4bGOxmYxltH29cw+JO6p7oQXlLPe2uW1j/bU+X59JDl0qLMtFSrwIVWWQjAJqa7pxcV/DXpzbWBIFWOS4w56eZ4ZHTwo9kSQe1TV9UL3+rD/ejRYfAVkLajI1k/FS8Z4VCA4rkabukIUHNh52ouXl9CjA0loPy7IboZKnehT9dAaNpwZwfUvahFHWBcRnqs/nbV2ZM2WSFDkP3YGK16qB2nWRutHiFfVelp4kRpLBU3S6ekLouuxB55ZZMQGGNd9vnbtmYfmS3GQKgAaDWcTRXWfgO/RkNOCxEx4mk+dKQI28VbpJ2rByxfl22vxYt92w1lGWvnrhB48uuwswifj2w0YEDq+MBsQSGfts8uYmpoQVeA8ujwgYnnX8nl28/KEEOmhG2zdYJDjeq4H2Y/6/B1hfOsUqdy9DadmFCMCaf2KVaUp83aJNiyI71rMdkBmatn3pRPM9hxxrB+bnTtp5i+iq3J2DQUrLjp2tQCCYy0tC45rXs3HNS8HQoy0JcDa4cLOhZS/O3hPTiQDmvLqiuBnxR/aXL8H+yz70DARxxdGOWQ8nYcXqVNR3h2mckDhFj4kCft3zA80RfzzObvZGpWg8gLXg5JHpi6cVlb/yCN75rhfBELA624bFUwQ0DZEVHQGINE90cY4Ot/tYGwKurh04s2H7iN6EEbRubOmenmGZmbcuFVXnvfDckiHZaHzSBVRJVNBHCXmuD0GObrC3rgP+dqebnX7RPrbZcQEp7zv9uUttFp/I4bcuGYPuAAS6QLyZByeQul6lW6IDVEBuciLc5WoL1xdm3XdcjyyYvvXapdtBLVO2GCCYBPAGEiY/mN46CfOBMET3bWg3eilBcnnQkbftgf9wRhbO2dVR4VH4kkHd6EjnPARFQVK7GwqjUR2S37x99KmPYyUw5hjQC9N2dhbJKo70mQzQiCFR3id39GDg878v2v1eD7RoRtkvqfQXeaPfbI3oJdIO/lPASJcz3/qZ+UQjjP1D/w9AB00rvsCYP/TAgL8AUnLpKOAxnpwAAAAASUVORK5CYII="></menuitem>
    <menuitem label="Hình Zoom" icon="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACk0lEQVQ4T5WTbUhTcRTGn7sXp2JrOVITBSFQ6BVMlxWSBJFkEETSi1FrWqREskJIAhOTkOjDKCXTNGb5JUPTnNpSJiGak3IfDK0slmSmuaZ329293beuQpF0EztwPv3P8zvP4Zw/gWXC0elICLKaQo+gPqvgOMFPsWrO53uipL215y6d6FmQEv/SOzr60r6ymgFaHwcGIVAQBCiah5+kEHB/RNgnV1GJxXxTFtBa17qKWRNDhm3YDBXBIuALIjYqAioNwPxQYnyaw5i9H/T7wTRZwIPqp9aYPbtO6tdqQXop6CJUoII8kuLCQbE8Jud4OF3zGG1pui8LqKm1vcjI3Z9O+FkIUoVGQeDLdwapseGQZsHILIXxmVD03rPysoC6ervzwOm9qVyAA0+IEkAJhhcx5aVBUTwIlQBGpUNbZQMlC7h2tXGouPR4CsUK4EVRsi1CpVLAL9mfJVl4vEGE6PRoLK9iZAHZR6oKb1cbLdE6aWapM8MLmGdE0IQA94Qfao0GpCS1FBS3yAIqL1/Im47MqS0rSpG2rIBHchKQVkgKHGhaAW20BqUFNRh+1pr0F2C6DK6o9eu29uib0db9GRXXDyJMrYZfQtFSTjHADfNdDNiajR8m7NYlgJHzGNyYf9SAxDzMW7JhHsotHHrrM6Tv3pS+Okof+W3GF3hp7x4N+ObM7snnriWX2G/Eqx3FZ5KRWA663YTZLpszvgrbF4oSEjJCeV4bqVSSlNvdO/fn9S466DyEwUxLiQHxJgQbstDx6M3rwzZsW+6f/HojOo+hK7Paug/aLQjeyoS1acaZ3ycudl5JEHWmnaLpogFCx0NcqfcMV4yJySsR/naQk//4VKzTeEfpCzoq3vFZ/yNeqP0JSqchPoqqm/wAAAAASUVORK5CYII="></menuitem>
</menu>

Kết quả:

​

Lưu ý: Trong ví dụ trên thì giá trị trong icon=”…..” mình dùng base64 để đưa hình vào. Tất nhiên bạn có thể dùng bằng cách đưa link hình trực tiếp vào icon=”images/icon.png”.

#Kết luận
Tuy rằng API này mới hoạt động được trên FireFox thôi. Nhưng mình nghĩ nó sẽ có triển vọng lớn đó. Giúp cho lập trình viên linh động hơn và người dùng cũng có được trải nghiệm tốt hơn khi lướt web.

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

Nguồn: izwebz.com​