Kontextmenü
bearbeitet von Matthias ScharwiesServus!
> Jo Ok Hallo und auf jeden Fall Danke,
>
> doch besser ich zeige mal wie das jetzt auf meiner Seite aussieht:
Ich steig da nicht ganz durch.
> Also und jetzt weis ich nicht von wo aus ich den Ersten aufruf starten soll und denke doch das dass reicht was ich hier gezeigt habe aus einer dynamisch erstellen Seite!
Ich würde Dr empfehlen, das Prinzip der [Trennung von Inhalt, Präsentation und Verhalten](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Trennung_von_Inhalt,_Pr%C3%A4sentation_und_Verhalten) zu beachten. Dann wird der code gleich übersichtlicher und damit wartungsfreundlicher:
**1. HTML**
~~~HTML
<nav id="context" class="inactive">
<button id="features">Eigenschaften</button>
<button id="send">Senden</button>
<button id="move">Verschieben</button>
<button id="erase">Löschen</button>
<button id="mark">Markieren</button>
</nav>
~~~
Es ist jetzt viel kürzer und übersichtlicher. Ich habe ein nav-Element verwendet, weil menu wohl aus dem Standard fliegt und es semantisch eindeutiger ist als ein div.
Da du wohl eher Aktionen ausführst, als auf andere Seiten zu verweisen, habe ich statt des a- ein button-Element verwendet. (*Optimal wäre eine Einbettung in eine Liste.*)
**2. CSS**
~~~CSS
nav#context .inactive {
display: none;
...
}
nav#context .active {
display: block;
...
}
~~~
Alle Positionierungen und Formatierungen kommen hier rein. Durch `display: none;` ist es aber ausgeblendet.
**3. JavaScript**
Die von dir verwendeten HTML-Event-Attribute machen das ganze Markup sehr unübersichtlich. Besser ist es, die Ereignisverarbeitung komplett ins JavaScript zu ziehen:
~~~JavaScript
'use strict';
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('contextmenu', showContextMenu);
showContextMenu () {
// Kontextmenü wird sichtbar gemacht
document.querySelector('#context').className = 'active';
// Achte, ob Buttons geklickt werden
document.querySelector('#features').addEventListener('click', show Features);
document.querySelector('#send').addEventListener('click', send);
}
});
~~~
Beim Laden des Inhalts wird eine anonyme Funktion aufgerufen, die einen Eventlistener beinhaltet, der bei einem Rechtsklick die Funktion `showContextMenu` aufruft.
Diese ändert die Klasse des Menüs von `inactive `auf `active`, sodass es sichtbar wird.
Danach werden weitere Eventlistener für die einzelnen Buttons eingerichtet.
Lies dir mal folgende Tutorials durch:
* [JavaScript/Tutorials/Grundlagen des DOM](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Grundlagen_des_DOM)
* [JavaScript/Tutorials/Grundlagen der Ereignisverarbeitung](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Ereignisverarbeitung)
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}
Kontextmenü
bearbeitet von Matthias ScharwiesServus!
> Jo Ok Hallo und auf jeden Fall Danke,
>
> doch besser ich zeige mal wie das jetzt auf meiner Seite aussieht:
Ich steig da nicht ganz durch.
> Also und jetzt weis ich nicht von wo aus ich den Ersten aufruf starten soll und denke doch das dass reicht was ich hier gezeigt habe aus einer dynamisch erstellen Seite!
Ich würde Dr empfehlen, das Prinzip der [Trennung von Inhalt, Präsentation und Verhalten](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Trennung_von_Inhalt,_Pr%C3%A4sentation_und_Verhalten) zu beachten. Dann wird der code gleich übersichtlicher und damit wartungsfreundlicher:
**1. HTML**
~~~HTML
<nav id="context" class="inactive">
<button id="features">Eigenschaften</button>
<button id="send">Senden</button>
<button id="move">Verschieben</button>
<button id="erase">Löschen</button>
<button id="mark">Markieren</button>
</nav>
~~~
Es ist jetzt viel kürzer und übersichtlicher. Ich habe ein nav-Element verwendet, wiel menu wohl aus dem Standard fliegt und es semantisch eindeutiger ist als ein div.
Da du wohl eher Aktionen ausführst, als auf andere Seiten zu verweisen, habe ich statt des a- ein button-Element verwendet. (*Optimal wäre eine Einbettung in eine Liste.*)
**2. CSS**
~~~CSS
nav#context .inactive {
display: none;
...
}
nav#context .active {
display: block;
...
}
~~~
Alle Positionierungen und Formatierungen kommen hier rein. Durch `display: none;` ist es aber ausgeblendet.
**3. JavaScript**
Die von dir verwendeten HTML-Event-Attribute machen das ganze Markup sehr unübersichtlich. Besser ist es, die Ereignisverarbeitung komplett ins JavaScript zu ziehen:
~~~JavaScript
'use strict';
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('contextmenu', showContextMenu);
showContextMenu () {
// Kontextmenü wird sichtbar gemacht
document.querySelector('#context').className = 'active';
// Achte, ob Buttons geklickt werden
document.querySelector('#features').addEventListener('click', show Features);
document.querySelector('#send').addEventListener('click', send);
}
});
~~~
Beim Laden des Inhalts wird eine anonyme Funktion aufgerufen, die einen Eventlistener beinhaltet, der bei einem Rechtsklick die Funktion `showContextMenu` aufruft.
Diese ändert die Klasse des Menüs von `inactive `auf `active`, sodass es sichtbar wird.
Danach werden weitere Eventlistener für die einzelnen Buttons eingerichtet.
Lies dir mal folgende Tutorials durch:
* [JavaScript/Tutorials/Grundlagen des DOM](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Grundlagen_des_DOM)
* [JavaScript/Tutorials/Grundlagen der Ereignisverarbeitung](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Ereignisverarbeitung)
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}