2
Ich arbeite an meinem Admin-Panel, die Mail-System-Abschnitt und ich finde Inspiration von Outlook.com. Ich habe drei benutzerdefinierte Rechtsklick-Hijack-Menüs wie Outlook hinzugefügt;JQuery Kontextmenü zeigen/verstecken Probleme
- Rechtsklick Mail-Nav First-Tier
- Rechtsklick Mail-Nav Second-Tier
- Rechtsklick Nachrichtenliste
Für den Rechtsklick der Meldeliste, die letzte sichtbare Option Ich versuche es so zu machen, dass beim Klicken ("DropMenu") die vier zusätzlichen Optionen angezeigt werden ("ForThisSenderMore"), so dass ein Klick an anderer Stelle das Menü entfernt, wenn Sie nicht auf "Titel" oder "DropMenu" klicken.
// Trigger action when the contexmenu is about to be shown
$('ul.inbox-nav > li > a').bind("contextmenu", function(event) {
event.preventDefault();
$("#MailMenuFirstTier").finish().toggle(100).
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
$('ul.inbox-nav > li > ul > li a').bind("contextmenu", function(event) {
event.preventDefault();
$("#MailMenuSecondTier").finish().toggle(100).
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
$('.table>tbody>tr>td').bind("contextmenu", function(event) {
event.preventDefault();
$("#MailBodyList").finish().toggle(100).
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the Element is clicked somewhere
$('ul.inbox-nav > li > a').bind("mousedown", function(e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$("#MailMenuFirstTier").hide(100);
}
});
$('ul.inbox-nav > li > ul > li').bind("mousedown", function(e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$("#MailMenuSecondTier").hide(100);
}
});
$('.table>tbody>tr>td').bind("mousedown", function(e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$("#MailBodyList").hide(100);
}
});
jQuery(document).click(function(event) {
if (jQuery(event.target).closest('ul.inbox-nav > li > a').length === 0) {
jQuery('#MailMenuFirstTier').hide();
}
if (jQuery(event.target).closest('ul.inbox-nav > li > ul > li a').length === 0) {
jQuery('#MailMenuSecondTier').hide();
}
if (jQuery(event.target).closest('.table>tbody>tr>td').length === 0) {
jQuery('#MailBodyList').hide();
}
});
jQuery(document).on("contextmenu", function(e) {
if (jQuery(event.target).closest('ul.inbox-nav > li > a').length === 0) {
$('#MailMenuFirstTier').hide();
}
if (jQuery(event.target).closest('ul.inbox-nav > li > ul > li a').length === 0) {
$('#MailMenuSecondTier').hide();
}
if (jQuery(event.target).closest('.table>tbody>tr>td').length === 0) {
$('#MailBodyList').hide();
}
});
$("#MailBodyList .DropMenu").click(function(e) {
$('.ForThisSenderMore').show();
});.custom-menu {
display: none;
z-index: 1000;
position: absolute;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
font-size: 12px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
.custom-menu .divider {
content: " ";
height: 1px;
margin: 4px 10px;
background: #929292;
}
#MailBodyList.custom-menu li.Title {
color: #929292;
}
#MailBodyList.custom-menu li.Title:hover {
background: #FFF;
cursor: default;
}
#MailBodyList.custom-menu li.ForThisSenderMore {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td>Right click me</td>
</tr>
</tbody>
</table>
<ul class="custom-menu" id="MailMenuFirstTier">
<li>New Sub-Folder</li>
<li>Mark All As Read</li>
<li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailMenuSecondTier">
<li>New Sub-Folder</li>
<li>Rename</li>
<li>Delete</li>
<li>Mark All As Read</li>
<li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailBodyList">
<li class="Title">For This Message</li>
<li>Reply</li>
<li>Reply All</li>
<li>Forward</li>
<div class="divider"></div>
<li>Mark As unread</li>
<li>Delete</li>
<li>Archive</li>
<li>Junk</li>
<li>Move</li>
<li>Create Rule</li>
<li>Save To BananzaCloud</li>
<li>View Message Source</li>
<div class="divider"></div>
<li class="DropMenu">For This Sender</li>
<li class="ForThisSenderMore">Send Email</li>
<li class="ForThisSenderMore">Find Email</li>
<li class="ForThisSenderMore">Move All Emails From...</li>
<li class="ForThisSenderMore">Delete All From...</li>
</ul>
Nur eine kurze Notiz, bevor ich weiter in etwas suchen, [Nicht verwenden Bind] (http://jquery.com/upgrade-guide/3.0/#deprecated-bind- und-Delegat) – Jhecht
Ich werde dies mit der anderen Antwort kombinieren, die ich Ihnen gab. – Jhecht