HTML5中原生的右鍵菜單創(chuàng)建方法

2020-03-24 19:04:45

字體：大中小

供稿：網(wǎng)友

即使是JavaScript被禁止，這些html' target='_blank'>右鍵菜單仍然能正常顯示。所以，如果你想尊重用戶的選擇，最好的方法是用JavaScript來(lái)創(chuàng)建這些菜單元素，注入到DOM元素里，這樣，當(dāng)JavaScript被禁止時(shí)，這些右鍵菜單也不顯示了。HTML5規(guī)范里有一個(gè)被大家忽略里的好東西，那就是右鍵菜單。HTML5里的右鍵菜單規(guī)范顯示，程序員可以通過(guò)創(chuàng)建簡(jiǎn)單的HTML5menu和menuitem標(biāo)記來(lái)生成右鍵菜單。菜單只在指定區(qū)域的右鍵菜單內(nèi)顯示。所以，你不需要再通過(guò)創(chuàng)建瀏覽器插件來(lái)實(shí)現(xiàn)這種效果。下面就讓我來(lái)展示如何用基本的HTML標(biāo)記來(lái)創(chuàng)建個(gè)性化的右鍵菜單！HTML代碼首先我們定義一個(gè)HTML區(qū)域，給它分配一個(gè)ID，之后我們要用到這個(gè)ID：XML/HTML Code復(fù)制內(nèi)容到剪貼板
menutype= context id= mymenu menuitemlabel= 重新加載本文 onclick= window.location.reload(); icon= /images/refresh-icon.png /menuitem menuitemlabel= 跳躍至評(píng)論區(qū) onclick= window.location='#comments'; icon= /images/comment_icon.gif /menuitem menulabel= 分享本文至... icon= /images/share_icon.gif menuitemlabel= 新浪微博 icon= /images/twitter_icon.gif onclick= goTo('//twitter.com/intent/tweet?text='+document.title+':'+window.location.href); /menuitem menuitemlabel= QQ空間 icon= /images/facebook_icon16x16.gif onclick= goTo('//facebook.com/sharer/sharer.php?u='+window.location.href); /menuitem /menu /menu
注意，這里的menu標(biāo)記的ID和上面的contextmenu里的值是一致的，這樣做的效果是，只有在上面的那個(gè)section區(qū)域里點(diǎn)擊右鍵時(shí)才會(huì)顯示這些右鍵菜單。這些菜單里可以配置菜單名，菜單圖標(biāo)和onclick事件，用來(lái)聲明它們的意義和要執(zhí)行的動(dòng)作。動(dòng)作可以是預(yù)先定義的JavaScript動(dòng)作，或是執(zhí)行inline的JavaScript代碼。相同的菜單可以放到頁(yè)面的多個(gè)區(qū)域，不需要重復(fù)創(chuàng)建。目前只有火狐瀏覽器是唯一實(shí)現(xiàn)了這個(gè)API的瀏覽器。一些特別重要的功能我一般不喜歡放到右鍵菜單里，但有這樣的功能當(dāng)然是十分方便，這個(gè)API的主旨是提高易用性而不會(huì)有任何負(fù)面影響。我在菜單里放置的分享功能就是一個(gè)很好的例子。相信你在你的項(xiàng)目里也經(jīng)常使用右鍵菜單，不是嗎？html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html怎樣設(shè)置背景顏色？HTML背景顏色代碼詳細(xì)分析

下一篇：HTML5 本地存儲(chǔ) LocalStorage詳解