Jquery 右键菜单及运用
$(function () {
$(".validatebox-tip").hide();
var mousePos;
$("#canNote").contextMenu({
menu: 'myMenu'
}, function (action, el, pos) {
/*alert(
'Action: ' + action + '\n\n' +
'Element text: ' + $(this).html() + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY + ' (relative to document)'
);*/
showPoint(action, pos);
});
$("#canNote").mousemove(function (e) {
e = e || window.event;
mousePos = mousePosition(e);
});
});
function showPoint(source, point) {
var img = "";
switch (source) {
case "book":
note = note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;" + "' src='MyStyle/img/book.jpg'>";
break;
case "file":
note = note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;" + "' src='MyStyle/img/file.jpg'>";
break;
case "music":
note = note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;" + "' src='MyStyle/img/music.jpg'>";
break;
case "txt":
note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;"
+ "' src='MyStyle/img/txt.jpg'>";
break;
case "video":
note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;"
+ "' src='MyStyle/img/video.jpg'>";
break;
case "web":
note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;"
+ "' src='MyStyle/img/web.jpg'>";
break;
default:
break;
}
$("body").append(note);
$(".note").draggable({ containment: "#canNote", drap: function () {
$(".validatebox-tip").show();
$(".note, #canNote").disableContextMenu();
}
}).mouseover(function (move) {
//mousePos = mousePosition(move);
$(this).css({ border: "1px orange solid" });
var left = $(this).css("left").replace("px", "") * 1.0 + $(this).css("width").replace("px", "") * 1.0 + 5.0;
var top = $(this).css("top").replace("px", "") * 1.0 + $(this).css("height").replace("px", "") * 1.0 - 5.0;
//alert(left+"---"+top);
$(".validatebox-tip").css({
position: "absolute",
left: left,
top: top
});
$(".validatebox-tip-content").html("some Note base infomation,some Note base infomation,some Note base infomation")
$(".validatebox-tip").show();
}).mouseleave(function () {
$(this).css({ border: "1px #000000 solid " });
$(".validatebox-tip").hide();
}).dblclick(function () {
});
$(".note").contextMenu({
menu: 'Delete'
}, function (action, el, pos) {
if (action == "delete") {
$(el).remove();
}
else if (action == "edit") {
EditActivityInfo(el, pos);
}
$(".validatebox-tip").hide();
});
$("body").click(function (move) {
$(".validatebox-tip").hide();
});
}
function mousePosition(ev) {
if (ev.pageX || ev.pageY) {
return { x: ev.pageX, y: ev.pageY };
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function EditActivityInfo(handler, pos) {
var pathArray = $(handler).attr("src").split('/');
var length = pathArray.length;
var img = pathArray[length - 1];
//alert(img);
switch (img) {
case "txt.jpg":
ShowTextNote();
break;
case "book.jpg":
//break;
case "file.jpg":
//break;
case "music.jpg":
case "video.jpg":
//break;
case "web.jpg":
ShowUpLoad();
break;
default:
break;
}
}
function ShowTextNote() {
$("#Text").dialog({
resizable: true,
height: 300,
width: 400,
modal: true,
buttons: {
"Save": function () {
alert(" has saved!");
$(this).dialog("close");
},
"Cancel": function () { $(this).close(); }
}
});
}
function ShowUpLoad() {
$("#UpFile").dialog({
resizable: true,
height: 100,
width: 400,
modal: true,
buttons: {
"Save": function () {
alert(" has saved!");
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
}, null);
}
$(".validatebox-tip").hide();
var mousePos;
$("#canNote").contextMenu({
menu: 'myMenu'
}, function (action, el, pos) {
/*alert(
'Action: ' + action + '\n\n' +
'Element text: ' + $(this).html() + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY + ' (relative to document)'
);*/
showPoint(action, pos);
});
$("#canNote").mousemove(function (e) {
e = e || window.event;
mousePos = mousePosition(e);
});
});
function showPoint(source, point) {
var img = "";
switch (source) {
case "book":
note = note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;" + "' src='MyStyle/img/book.jpg'>";
break;
case "file":
note = note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;" + "' src='MyStyle/img/file.jpg'>";
break;
case "music":
note = note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;" + "' src='MyStyle/img/music.jpg'>";
break;
case "txt":
note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;"
+ "' src='MyStyle/img/txt.jpg'>";
break;
case "video":
note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;"
+ "' src='MyStyle/img/video.jpg'>";
break;
case "web":
note = "<img class='note' style='position:absolute;left:" + point.docX + "px;top:" + point.docY + "px;"
+ "' src='MyStyle/img/web.jpg'>";
break;
default:
break;
}
$("body").append(note);
$(".note").draggable({ containment: "#canNote", drap: function () {
$(".validatebox-tip").show();
$(".note, #canNote").disableContextMenu();
}
}).mouseover(function (move) {
//mousePos = mousePosition(move);
$(this).css({ border: "1px orange solid" });
var left = $(this).css("left").replace("px", "") * 1.0 + $(this).css("width").replace("px", "") * 1.0 + 5.0;
var top = $(this).css("top").replace("px", "") * 1.0 + $(this).css("height").replace("px", "") * 1.0 - 5.0;
//alert(left+"---"+top);
$(".validatebox-tip").css({
position: "absolute",
left: left,
top: top
});
$(".validatebox-tip-content").html("some Note base infomation,some Note base infomation,some Note base infomation")
$(".validatebox-tip").show();
}).mouseleave(function () {
$(this).css({ border: "1px #000000 solid " });
$(".validatebox-tip").hide();
}).dblclick(function () {
});
$(".note").contextMenu({
menu: 'Delete'
}, function (action, el, pos) {
if (action == "delete") {
$(el).remove();
}
else if (action == "edit") {
EditActivityInfo(el, pos);
}
$(".validatebox-tip").hide();
});
$("body").click(function (move) {
$(".validatebox-tip").hide();
});
}
function mousePosition(ev) {
if (ev.pageX || ev.pageY) {
return { x: ev.pageX, y: ev.pageY };
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function EditActivityInfo(handler, pos) {
var pathArray = $(handler).attr("src").split('/');
var length = pathArray.length;
var img = pathArray[length - 1];
//alert(img);
switch (img) {
case "txt.jpg":
ShowTextNote();
break;
case "book.jpg":
//break;
case "file.jpg":
//break;
case "music.jpg":
case "video.jpg":
//break;
case "web.jpg":
ShowUpLoad();
break;
default:
break;
}
}
function ShowTextNote() {
$("#Text").dialog({
resizable: true,
height: 300,
width: 400,
modal: true,
buttons: {
"Save": function () {
alert(" has saved!");
$(this).dialog("close");
},
"Cancel": function () { $(this).close(); }
}
});
}
function ShowUpLoad() {
$("#UpFile").dialog({
resizable: true,
height: 100,
width: 400,
modal: true,
buttons: {
"Save": function () {
alert(" has saved!");
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
}, null);
}
