19/09/2018, 14:42
contextmenu trong HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 < ! DOCTYPE html > < html > < head > <style> div { background ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <style> div { background: yellow; border: 1px solid black; padding: 10px; } </style> </head> <body> <div contextmenu="mymenu"> <p>Chuột phải vào khung này để hìn thấy menu ! <menu type="context" id="mymenu"> <menuitem label="Tải lại trang" onclick="window.location.reload();" icon="https://webvn.com/wp-content/uploads/2014/10/ico_reload.png"></menuitem> <menu label="Chia sẻ..."> <menuitem label="Twitter" icon="https://webvn.com/wp-content/uploads/2014/10/ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem> <menuitem label="Facebook" icon="https://webvn.com/wp-content/uploads/2014/10/ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> </menu> <menuitem label="Gửi email" onclick="window.location='mailto:?body='+window.location.href;"></menuitem> </menu> </div> <p>Ví dụ này chỉ chạy trên trình duyệt Firefox!</p> </body> </html> |
Demo
Định nghĩa và cách sử dụng
Thuộc tính contextmenu cho phép hiển thị menu tùy chỉnh trong một thẻ. Menu sẽ xuất hiện khi người dùng nhấn chuột phải vào thẻ.
Giá trị của thuộc tính contextmenu là id của thẻ.
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| contextmenu | Không hỗ trợ | Có | Không hỗ trợ | Không hỗ trợ | Không hỗ trợ |
Sự khác nhau giữa HTML 4.01 và HTML5
Contextmenu là thuộc tính mới trong HTML5.
Cú pháp
|
1 |
<element contextmenu="menu_id"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| menu_id | ID của thẻ cần xuất hiện menu. |
