contextmenu+js 定义元素的上下文菜单案例之：设计分享功能-白红宇

contextmenu+js 定义元素的上下文菜单案例之：设计分享功能

阅读量：7081 次

发布时间：2019-06-28

本文共 1873 字，大约阅读时间需要 6 分钟。

contextmenu 属性为元素规定上下文菜单。这个菜单会在用户右键点击元素时出现。

contextmenu 属性的值是需要打开的 <menu> 元素的 id。

啊啊，有点尴尬的是目前这个属性只有火狐浏览器支持。。。

<!doctype html>

<html>

<head>

var post = {

"source" : "/CSSOFList/img/逐梦之旅.zip",

"demo" : "/CSSOFList/img/逐梦之旅.jpg",

"feed" : "http://www.weibo.com/"

};

function downloadSource() {

window.open(post.source, '_self'); // window.open(URL,name,features,replace) open 用法，open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。具体可以看这里http://www.w3school.com.cn/jsref/met_win_open.asp

}

function viewDemo() {

window.open(post.demo, '_blank');

}

function getFeed() {

window.prompt('发送地址:', post.feed);

}

function sendEmail() {

var url = document.URL;

var body = '分享地址: ' + url +'';

window.location.href = 'mailto:?subject='+ document.title +'&body='+ body +'';

}

</script>

<style>

</style>

</head>

<body>

<section id="on-a-blog" contextmenu="download"> //contextmenu 的属性值是menu的ID。

</header>

<p>

短片是YouTube励志红人账号Mateusz M的作品，《Unbroken》，Mateusz M制作分享一些电影剪辑和励志演讲结合的视频，再给画面配上或激荡人心或柔缓抒情的音乐，视频便具有了鼓舞人心的力量。短片由几位演讲家Les Brown、Eric Thomas、Steve Jobs、 Louis Zamperini的演讲组成，出现的电影画面有《Jobs》《Her》，背景音乐Confidential Music - Archangel, Unashamed。我们看不到演讲家的脸，看不到他们的肢体动作和表情，但是他们的声音是饱含激情的。每一句话都掷地有声，每一个词都铿锵有力，每一声呐喊都好像是当头棒喝。也许这正是我们所需要的，我们需要这样不留情面的声音，戳破我们心存的侥幸，唤醒被催眠的信念，重燃自己的意志力！

</p>

</section>

<menuitem οnclick="viewDemo()" icon="/CSSOFList/img/icon2.png">查看源文件</menuitem> //<menuitem> 标签定义用户可以从弹出菜单调用的命令/菜单项目。目前只有firefox8 及其更高版本才支持，

<menuitem οnclick="sendEmail()" icon="/CSSOFList/img/icon4.png">Email</menuitem>

</menu>

</body>

</html>