Rechtsklick Menü

Html5 Rechtsklick Menü

by Wolf Wortmann

HTML

Einfach rechstklick auf einen Menü Punkt
<!-- Die klickbare Liste -->
<ul>
    <li contextmenu='rmenu' id="207" name='1'>eins</li>
    <li contextmenu='rmenu' id="343" name='2'>zwei</li>
    <li contextmenu='rmenu' id="768" name='3'>drei</li>
    <li contextmenu='rmenu' id="23" name='4'>vier</li>
</ul>
<!-- Das Menü -->
<menu type="context" id="rmenu">
    <menuitem label="Bearbeiten" icon="icon.png" class="menu_1" id="menup1"></menuitem>
    <menuitem label="Löschen" class="menu_2" id="menup2"></menuitem>
</menu>

JavaScript

//Die Variablen müssen auserhalb der Funktion (Global) definiert sein, um auch auserhalb mit ihnen arbeiten zu können.
var lastClickName = false;
var lastClickId = false;

//Wenn auf contextmenu ein Rechtsklick ausgeführt wird, abfangen, auf welches Element dieser ging un in Var's speichern.
$(document).ready(function(){
    document.oncontextmenu = function(e){
        lastClickName = e.target.getAttribute("name");
        lastClickId = e.target.id;
    }
});

//Bei klick auf ein Element mit der Klasse >> menu_1
$(".menu_1").click(function() {
//Bei klick auf ein Element mit der Id >> menup1
//$("#menup1").click(function() {
    
    alert("Sie wollen das Element mit\n\nName=  "+lastClickName+"\nId= "+lastClickId+"\n\nbearbeiten.");
})

//Bei klick auf ein Element mit der Klasse >> menu_2
$(".menu_2").click(function() {
//Bei klick auf ein Element mit der Id >> menup2
//$("#menup2").click(function() {
    
    alert("Sie wollen das Element mit\n\nName=  "+lastClickName+"\nId= "+lastClickId+"\n\nlöschen.");
})