HTML5 Kontextmenü erweitern

[selig]

Guten Abend liebe Boardler,

Ich würde gerne das browsereigene Kontextmenü mithilfe von HTML5 erweitern, jedoch weiß ich leider nicht wie ich an die ID des jeweiligen Elements komme, durch das dass Kontextmenü aufgerufen wurde.

Im Quelltext definiere ich dieses Menü und möchte es für mehrere Elemente geltend machen:

<menu type="context" id="menu">   
    <menuitem label="Ändern" onclick="aendern(id_von_element)"></menuitem>   
    <menuitem label="Löschen" onclick="loeschen(id_von_element)"></menuitem> 
</menu>

Nun die Elemente, für die das Menü gelten soll:

<p id="element1" contextmenu="menu" >Element 1</p>
<p id="element2" contextmenu="menu" >Element 2</p>
<p id="element3" contextmenu="menu" >Element 3</p>

^^ Diese Elemente werden dynamisch aus einer DB aus gegeben

Und zum Schluss noch mein JS wo dann die Verarbeitung geschehen soll,...

function aendern(id) {  
   //JS zum ändern des Elements 
   //... Mach was mit "id"
}  

function loeschen(id) {   
   //JS zum löschen des Elements 
   //... Mach was mit "id"
}

Aber wie kann ich an die ID's kommen? Ist das überhaupt möglich?

Ich hoffe Ihr könnt mir helfen!


Mit freundlichen Grüßen
Selig

 

[Liberty]

Kannst dumme Frage von mir. Hast du überhaupt im head Bereich am Anfang deiner Seite irgendwo den Pfad zu deiner JS hinterlegt?

 <script language="javascript" type="text/javascript" src="datei.js"></script>

Ansonsten versteh ich jetzt nur Bahnhof und ich habe ca. 12 Minuten hiervor gesessen und versucht zu verstehen was du eigentlich machen willst. Solltest du die Absicht haben eine Navigationsmenue per JS ändern zu können durch das klicken von Buttons welche dann vorgefertigte Inhalte aus einer DB übernehmen dann bist du meiner Meinung nach so ziemlich auf dem falschen Weg.

Versuche bitte nochmals genau zu erklären was genau du jetzt bezwecken willst. Wie im Text bei mir rauszulesen ist verstehe ich bei deinem Vorhaben gerade nur Bahnhof. Vielleicht kann ich dir helfen wenn ich hintergestiegen bin was genau du machen willst.

 

[selig]

Hey, danke für deine Antwort!

Ja, klar habe ich das JS gedöns eingebunden!

Also ich habe ein HTML5 Menü definiert....
... Dieses wird mit Elementen verknüpft (Dies geschieht mit dem Attribut "contextmenu" im p-Tag der Elemente) ...
... Die Elemente besitzen ID's...
... Die ID's der Elemente möchte ich in der JS-Funktion verwenden, die durch das HTML5 - Kontextmenü aufgerufen wird....

Problem dabei: Das Kontextmenü sagt mir nicht, auf welchem Element der Rechtsklick ausgeführt wurde,...


Ich hoffe es ist jetzt etwas nachvollziehbarer - Habe am Telefon schon 5 Minuten benötigt, um es einem Freund nahezubringen


Mfg Selig

 

[Liberty]

Weil du von Element ID spricht denke ich mal meinst du die hier:

<p id="element1" contextmenu="menu" >Element 1</p>

Wird er meines Wissens nie ein Javacsript Befehl ausführen da es diese ID nur als CSS ID erkennt und nie mit JS in Verbindung bringen würde. Da mich das durch deinen Thread selbst interessiert ob das was du vor hast überhaupt in irgendeiner Form machbar ist werde ich am WE mal "Bücher" wälzen. Richtig mit Papier und so. :wink:

 

[selig]

Richtig mit Papier und so. :wink:

Urrgh - Analoges Wissen

Ja, aber der Browser müsste mir doch eigentlich sagen können, welches Element ich geklickt habe, und dementsprechend die ID des geklickten Elementes an die JS-Funktion weiterleiten! Wäre irgendwie schade, wenn er das nicht kann...

Ich danke dir für deine Mühen

Greetz selig

Edit/PS: Wenn du dir meinen Code mal fix selber zusammen bastelst in einer HTML-Datei, siehst du das er alles macht, bis auf die ID an die funktion zu übergeben - wenn ich aber nur ein Element habe und dessen ID fix in die JS-Funktion einbinde, dann schluckt er das ganze - nur möchte ich eben dynamisch elemente ausgeben und nicht für jedes element eine eigene Funktion erstellen (ca. 600 ausgaben pro aufruf der seite) :/

 

[Fluffy]

Uhh!!
Nach Jahren der Abwesenheit, konnte ich das mausen nicht mehr lassen, und betätige mich auch noch prompt als Thread-Nekrophiler hehe

Nun denn:
1. Wenn es keine besonderen Gründe gibt sollte JS am Ende eingebunden werden(bessere Performance), als prominente Ausnahme kann ich hier modernizerJs anführen.

2. ContextMenüs sind in Browsern noch gar nicht implementiert. Funktioniert z.Z. noch nicht einmal in FF(Version 29), w3schools.com ist da also nicht auf dem neusten Stand

3. Eventhandler bindet man schon seit Jahren nicht mehr mittels Attributen ein. Zugegeben es mag sein das man aufgrund des Frameworks dies mal machen muss, aber selbst da kann man drum herum bauen.

4. Wenn du das per JS nachbaust, gibt es im Event das geklickte Objekt.

$('.awesome-context-menus').on('click', 'p', function (event) {
var correspondingMenue = $(event.target).data('context-menu-identifier'),
     theIdClicked = $(event.target).attr('id');
});

Der Code sollte das machen was du willst, ist allerdings nicht getestet und ich bin schon etwas Müde
Was mich auch schon zu 5. bringt....

5.Wie du gesehen hast brauchst du keine IDs zu vergeben, du benutzt die ID's hier nähmlich nicht um einen uniquen Selektor bereitzustellen, sondern um einen Kontext zu übertragen, dies muss man dankt der data-Attribute im HTML nun auch nicht mehr machen, somit kannst du den attributen auch Namen geben, welche eine semantische Bedeutung haben.
Denn momentan weiss ich nicht was das Attribut id in deinem Code nun genau identifizieren soll, aber bei data-CorrespondingMenu sieht es schon anders aus^^.
Gruß

Fluffy

 

[selig]

Danke dir für die Informationen =)

Habe das Problem mittlerweile auch mit Js gelöst!

Trotzdem danke, war interessant zu lesen!