我希望在table
中,如果用户将鼠标放在每行上有动画着色的行上,当鼠标移出时,行的颜色将恢复为默认值。但如果用户右键单击行,则该行为红色,直到单击上下文菜单。
我尝试了这段代码,但是当用户右键单击并想要选择一个菜单项时,红色行返回默认值但我希望行为红色直到单击(选择):
$(function () {
$('.users').contextMenu({
selector: 'tr',
callback: function (key, options) {
if (key == 'delete') {
if (confirm(" Are you sure?")) {
$.post("../Actions/Delete.ashx", { type: "user", id: $(this).attr('id') });
$(this).animate({ backgroundColor: '#FF80FF' }, 1000);
}
}
},
items: {
"edit": { name: "edit" },
"delete": { name: "delete" }
}
});
$('tr').mouseover(function () {
$('td', this).stop(true, true).animate
({ backgroundColor: "#80FF00" }, 300);
});
$('tr').mouseout(function () {
$('td', this).stop(true, true).animate
({ backgroundColor: "white" }, 300);
});
$('tr').mousedown(function (event) {
if (event.which==3) {
$('td', this).animate
({ backgroundColor: "red" }, 300);
}
});
});
答案 0 :(得分:0)
检查右键单击clicked
标志:
$(function () {
var clicked=false;
$('.users').contextMenu({
selector: 'tr',
callback: function (key, options) {
if (key == 'delete') {
if (confirm(" Are you sure?")) {
$.post("../Actions/Delete.ashx", { type: "user", id: $(this).attr('id') });
$(this).animate({ backgroundColor: '#FF80FF' }, 1000);
}
clicked=false;
}
},
items: {
"edit": { name: "edit" },
"delete": { name: "delete" }
}
});
$('tr').mouseover(function () {
$('td', this).stop(true, true).animate
({ backgroundColor: "#80FF00" }, 300);
});
$('tr').mouseout(function () {
if(!clicked){
$('td', this).stop(true, true).animate
({ backgroundColor: "white" }, 300);
}
});
$('tr').mousedown(function (event) {
if (event.which==3) {
clicked=true;
$('td', this).animate
({ backgroundColor: "red" }, 300);
}
});
});