Context auf der Seite anders wie auf dem Link

[Andy Nail]

Hallo zusammen,

auf meiner Seite sollte man stets bei drücken der rechten Maustaste mein Menü bekommen. Doch sollten klar Funktionen fehlen wenn mann nicht auf dem Link draufklickt, doch sichtbar soll die Funktion trotzdem sein.

Doch trotz dass ich jedem Link die Funktion oncontext zugewiesen habe, wird stets ein und die selbe Funktion aufgerufen. Und das egal ob ich dem Body oder der Tabelle eine Funktion zuweise.

Also wem weise ich jetzt eine Funktion zu, oder wie soll ich das machen, denn zu gerne würde ich ein Context über jeden Link aufrufen.

Ok, auf den Fall schonmal vielen Dank und Gruß

Andreas Nagel

[Matthias Scharwies]

Servus!

Hallo zusammen,

auf meiner Seite sollte man stets bei drücken der rechten Maustaste mein Menü bekommen. Doch sollten klar Funktionen fehlen wenn mann nicht auf dem Link draufklickt, doch sichtbar soll die Funktion trotzdem sein.

Doch trotz dass ich jedem Link die Funktion oncontext zugewiesen habe, wird stets ein und die selbe Funktion aufgerufen. Und das egal ob ich dem Body oder der Tabelle eine Funktion zuweise.

Wie die Funktion heißt, ist imho eher egal. Du müsstest auf den contextmenu-Event lauschen und da ansetzen.

Also wem weise ich jetzt eine Funktion zu, oder wie soll ich das machen, denn zu gerne würde ich ein Context über jeden Link aufrufen.

Im Wiki ist ein allerdings schon älteres Beispiel, wie ein selbst gestaltetes Kontextmenü aussieht.

Da müsste einiges umgearbeitet werden:

• contextmenu-Event
• moderne Ereignisverarbeitung anstelle von onclick
• HTML5-Markup anstelle einer einspaltigen Tabelle. Welche Elemente würdet ihr denn vorschlagen?
  • <nav class="context-menu"> mit li und a
  • eine aside mit h2 und buttons

Will sich jemand mal drüber machen?

Herzliche Grüße

Matthias Scharwies

[Jonathan Harker]

Servus!

• HTML5-Markup anstelle einer einspaltigen Tabelle. Welche Elemente würdet ihr denn vorschlagen?
  • <nav class="context-menu"> mit li und a
  • eine aside mit h2 und buttons

Nimm doch das <menu>-Element:

https://developer.mozilla.org/de/docs/Web/HTML/Element/menu

Will sich jemand mal drüber machen?

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

• HTML5-Markup anstelle einer einspaltigen Tabelle. Welche Elemente würdet ihr denn vorschlagen?

Nimm doch das <menu>-Element:

• Self-Wiki: menu

Das ist wohl langsam gestorben.

Will sich jemand mal drüber machen?

Herzliche Grüße

Matthias Scharwies

-- Es gibt viel zu tun:

ToDo-Liste

Herzliche Grüße

Matthias Scharwies

[Andy Nail]

Jo Ok Hallo und auf jeden Fall Danke,

doch besser ich zeige mal wie das jetzt auf meiner Seite aussieht:

Ersteinmal baue ich das erste Menü:

<div style="position:absolute; z-index:0; " id="LinkMenue">
<div style="position:relative; z-index:3; border:1px solid #000; background-color:#eee; padding:5px; " id="MenueListe" oncontextmenu="return false">
<a id="Eigenschaften(ActiveLink.id)" name="LinkFunction" onclick="LinkEigenschaften(frames['DatenFrame'].ActiveLink.id+';'); PageMenuesUp('LinkMenue')" href="#" class='Menue'>Eigenschaften</a>
<a id="Senden" name="LinkFunction" onclick="Email(); PageMenuesUp('LinkMenue')" href="#" class='Menue'>Senden</a>
<a id="AddLink" name="LinkFunction" onclick="LinkPosition('hinzufügen',top.frames['DatenFrame'].ActiveLink.id+';', 1); PageMenuesUp('LinkMenue')" href="#" class='MenueHidden'>Hinzufügen</a>
<a id="PosLink" name="LinkFunction" onclick="LinkPosition('verschieben',frames['DatenFrame'].ActiveLink.id, 1); PageMenuesUp('LinkMenue')" href="#" class='MenueHidden'>Verschieben</a>
<a id="DelLink" name="LinkFunction" onclick="DelLink(frames['DatenFrame'].ActiveLink.id+';'); PageMenuesUp('LinkMenue')" href="#" class='MenueHidden'>Löschen</a>
<a id="Markieren" name="LinkFunction" onclick="LinkMarkieren(); PageMenuesUp('LinkMenue')" href="#" class='MenueHidden'>Markieren</a>
<a id="Config" name="LinkFunction" onclick="top.frames['DatenFrame'].ConfigPage(); PageMenuesUp('LinkMenue')" href="#" class='MenueHidden'><img id="ConfigHaken" src="Pictures/Hacken.png" width="25" height="25" style="border:0; margin-right:8px; margin-left:3px; margin-top:3px; visibility:hidden; float:left">Anpassen</a>
</div>
<div style="position:absolute; z-index:0; top:5px; left:5px; opacity: 0.30; filter:alpha(opacity=30); background-color:#000; height:100%; width:100%"></div>
</div>

Und dann das Menü das nur in Außnahmefällen gezeigt werden darf:

<div style="position:absolute; z-index:0; " id="MainMenue">
<div style="position:relative; z-index:3; border:1px solid #000; background-color:#eee; padding:5px; " id="MainListe" oncontextmenu="return false">
<a onclick="PageMenuesUp('MainMenue')" href="#" class='Menue' style="padding-left:46px">Eigenschaften</a>
<a onclick="PageMenuesUp('MainMenue')" href="#" class='Menue' style="padding-left:46px">Senden</a>
<a onclick="PageMenuesUp('MainMenue')" href="#" class='MenueHidden' style="padding-left:46px">Verschieben</a>
<a onclick="PageMenuesUp('MainMenue')" href="#" class='MenueHidden' style="padding-left:46px">Löschen</a>
<a onclick="PageMenuesUp('MainMenue')" href="#" class='MenueHidden' style="padding-left:46px">Markieren</a>
<a onclick="top.frames['DatenFrame'].ConfigPage(); PageMenuesUp('MainMenue')" href="#" class='Menue'><img id="ConfigHaken" src="Pictures/Hacken.png" width="25" height="25" style="border:0; margin-right:8px; margin-left:3px; margin-top:3px; visibility:hidden; float:left">Anpassen</a>
</div>
<div style="position:absolute; z-index:0; top:5px; left:5px; opacity: 0.30; filter:alpha(opacity=30); background-color:#000; height:100%; width:100%"></div>
</div>

Und auf der dynamisch erstellten Seite werden die Beiden so aufgerufen:

<table ID="Inhalt" border="0" style="min-height:100px; min-width:100px; border:0" cellspacing="20" oncontextmenu="LinkObjektePositionieren('MainMenue','DatenBereich'); PageMenuesShow('MainMenue',this.id)">

echo "<br><a oncontextmenu='LinkObjektePositionieren(\"LinkMenue\", \"DatenBereich\"); PageMenuesShow(\"LinkMenue\",this.id); this.focus()' onmouseover='ActiveLink.blur(); ActiveLink = this' onclick='$Befehl1 $Befehl2 $Befehl3' $Url id='$ID' Text='$Text' $Infos $Daten Datei='$Datei' $Link name='Link' Ansicht='$Ansicht' class='$Klasse'>$Icon$Anzeige<br>";

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!

Somit kann ich mich über Nachrichten mit Hilfe von Euch nur sehr freuen und mich gleichzeitig jetzt schon bei Euch bedanken will.

Also Danke mit Gruß Andreas

[Matthias Scharwies]

Servus!

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 zu beachten. Dann wird der Code gleich übersichtlicher und damit wartungsfreundlicher:

1. 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

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:

'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
• JavaScript/Tutorials/Grundlagen der Ereignisverarbeitung

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Ergänzung:

document.addEventListener('contextmenu', function(e) {
    showContextMenu();
    e.preventDefault();
}, false);

@Gunnar Bittersmann

Welche Elemente sollte man denn Deiner Ansicht nach verwenden?

• HTML5-Markup anstelle einer einspaltigen Tabelle. Welche Elemente würdet ihr denn vorschlagen?
  • <nav id="context"> mit li und a
  • aside mit h2 und buttons

oder doch menu?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

<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>

Ich habe ein nav-Element verwendet

nav ist falsch: “The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.” [Spec]

Buttons für Aktionen auf der Seite sind keine Navigation.

Da du wohl eher Aktionen ausführst, als auf andere Seiten zu verweisen, habe ich statt des a- ein button-Element verwendet.

button ist richtig. a ohne sinnvolles href (z.B. wie hier href="#") ist falsch.

Diese ändert die Klasse des Menüs von inactive auf active, sodass es sichtbar wird.

Wozu Klassen? (Noch dazu zwei davon?) Dafür gibt es das hidden-Attribut, was anstelle der Klassen zu verwenden ist.

Dann funktioniert die Steuerung der Sichtbarkeit sogar ohne CSS.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Vielen Dank für die Rückmeldung!

Ich habe ein nav-Element verwendet

nav ist falsch: “The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.” [Spec]

Ok, also aside oder div? Ich hab' jetzt ein div genommen.

Buttons für Aktionen auf der Seite sind keine Navigation.

Da du wohl eher Aktionen ausführst, als auf andere Seiten zu verweisen, habe ich statt des a- ein button-Element verwendet.

button ist richtig. a ohne sinnvolles href (z.B. wie hier href="#") ist falsch.

Diese ändert die Klasse des Menüs von inactive auf active, sodass es sichtbar wird.

Wozu Klassen? (Noch dazu zwei davon?) Dafür gibt es das hidden-Attribut, was anstelle der Klassen zu verwenden ist.

Dann funktioniert die Steuerung der Sichtbarkeit sogar ohne CSS.

Perfekt!

Die oben genannten Codebeispiele finden sich in diesem Tutorial:

• JavaScript/Anwendung und Praxis/Kontextmenü

Es zeigt zumindest den Weg zum Kontextmenü ein bisschen kleinschrittiger als das alte Beispiel, das im 2. Kapitel noch zu sehen ist.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Ok, also aside oder div?

Bei den Aktionen handelt es sich wohl nicht um Nebensächliches. Also nix aside.

Ich hab' jetzt ein div genommen.

Passt.

LLAP 🖖

[Andy Nail]

Jo Hallo und Vielen Dank,

doch konnte icch das Ganze noch nicht testen. Und dass ich 2 Menüs zeige hat den Hintergrund das ich die Funktion Anpassen 2x Mal aufrufe und dafür nicht auf einen Link klicken will. Und danach soll der Eintrag vorne ein Hakensymbol sowie das ganze Menü einen Schatten Zeigen, was das Ganze etwas stylischer macht und ich hier bei dem nax bisher vermisse. Ich konnte damit ehrlich gesagt auch noch nicht tätig werdeen, doch glaube ich fast das es sich hierbei um ein Windows standard Kontext Menü handelt. Denn es ist ja Desingtechnisch nix zu sehen, wofür ich mich ja nur entschuldigen kann, das damals unbedingt über css zu regeln gewollt zu haben.

Auf jeden Fall nochmals Danke

Gruß Andreas