<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/contextMenu.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.contextMenu.min.js"></script>
<style>
body {
background: #000;
}
.container {
width: 1000px;
height: 720px;
position: absolute;
left: 50%;
margin: 100px 0 0 -500px;
}
.container .box {
width: 46%;
height: 100%;
background: #eee;
}
#box1 {
float: left;
}
#box2 {
float: right;
}
.title {
height: 50px;
line-height: 50px;
font-size: 24px;
text-align: center;
}
pre {
font-size: 12px;
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<div class="container">
<div id="box1" class="box">
<div class="title">右鍵點我！</div>
<pre>
$("#box1").contextMenu({
menu: [{
text: "新增",
callback: function() {
alert("新增");
}
},
{
text: "複製",
callback: function() {
alert("複製");
}
},
{
text: "粘貼",
callback: function() {
alert("粘貼");
}
},
{
text: "刪除",
callback: function() {
alert("刪除");
}
}
]
});
</pre>
</div>
<div id="box2" class="box">
<div class="title">右鍵點我！</div>
<pre>
$("#box2").contextMenu({
width: 110,// width
itemHeight: 30,// 菜單項height
bgColor: "#333",// 背景顏色
color: "#fff",// 字體顏色
fontSize: 12,// 字體大小
hoverBgColor: "#99CC66",// hover背景顏色
target: function(ele) {// 當前元素
console.log(ele);
},
menu: [{// 菜單項
text: "新增",
icon: "img/add.png",
callback: function() {
alert("新增");
}
},
{
text: "複製",
icon: "img/copy.png",
callback: function() {
alert("複製");
}
},
{
text: "粘貼",
icon: "img/paste.png",
callback: function() {
alert("粘貼");
}
},
{
text: "刪除",
icon: "img/del.png",
callback: function() {
alert("刪除");
}
}
]
});
</pre>
</div>
</div>
<script>
$("#box1").contextMenu({
menu: [{
text: "新增",
callback: function() {
alert("新增");
}
},
{
text: "複製",
callback: function() {
alert("複製");
}
},
{
text: "粘貼",
callback: function() {
alert("粘貼");
}
},
{
text: "刪除",
callback: function() {
alert("刪除");
}
}
]
});
$("#box2").contextMenu({
width: 110, // width
itemHeight: 30, // 菜單項height
bgColor: "#333", // 背景顏色
color: "#fff", // 字體顏色
fontSize: 12, // 字體大小
hoverBgColor: "#99CC66", // hover背景顏色
target: function(ele) { // 當前元素
console.log(ele);
},
menu: [{ // 菜單項
text: "新增",
icon: "img/add.png",
callback: function() {
alert("新增");
}
},
{
text: "複製",
icon: "img/copy.png",
callback: function() {
alert("複製");
}
},
{
text: "粘貼",
icon: "img/paste.png",
callback: function() {
alert("粘貼");
}
},
{
text: "刪除",
icon: "img/del.png",
callback: function() {
alert("刪除");
}
}
]
});
</script>
</body>
</html>