Miniauswahlmenü mittles JavaScript und CSS erzeugen

Choleriker

Neues Mitglied
Hallo zusammen,


ich versuche mich gerade einzulesen wie ich mit CSS und JavaScript ein kleines Auswahlmenü erstelle. Leider fand ich bisher im Netz nur Anleitungen mit HTML, CSS und JS, aber irgendwie keine die das Ganze nur mit CSS und JavaScript umsetzen.

Es soll bei einem Klick, also muss ich vermutlich mit „onclick“ arbeiten, ein Miniauswahlmenü aufpoppen, dass zwischen lediglich 2 Möglichkeiten (dementsprechend 2 unterschiedliche Buttons bereitstellt) unterscheidet. Je nach Auswahl öffnet sich ein anderes großes Menüfenster. Das Drumherum ist schon fertig und funktioniert. Ich müsste eigentlich „nur“ das kleine Miniauswahlmenü als Zwischenschritt einbauen.

Ich setze dabei an dieser Stelle im Quellcode an:

JavaScript:
if (!this.props.dataHandler.userData.isAdmin() && this.props.action === 'activeDevices') {
    tableBody.push(
        <tr
            id={primaryKeyValue}
            onClick={this.renderModal.bind(this, 'reserve', primaryKeyValue)}
            key={primaryKeyValue}
        >
            {children}
            <span className="table-img" id={primaryKeyValue + '_IMG'}></span>
        </tr>
    );
} else {
    tableBody.push(
        <tr id={primaryKeyValue} onClick={this.renderModal.bind(this, 'edit', primaryKeyValue)} key={primaryKeyValue}>
            {children}
            <span className="table-img" id={primaryKeyValue + '_IMG'}></span>
        </tr>
    );
}

Ich dachte, ich in der vorhandenen onClick-Anweisung zwischen "onClick=" und "{this.renderModal.bind(this, "edit", primaryKeyValue)}" in Zeile 5 irgendwie eine if/else-Verzweigung mit einer weiteren onClick-Anweisung einbauen, die dann das anschließende jeweilige große Menüfenster öffnet. Oder nach dem else eine weitere if/else-Verzweigung, die dann quasi abfragt ob geklickt wurde und für welches große Menü sich entschieden wurde und den entsprechenden Inhalt lädt. Falls das so möglich sein sollte?

Geht das denn überhaupt so wie ich mir das vorstelle? Bzw. ist das umsetzbar?

Eine andere Idee wäre, kein Miniauswahlmenü (obwohl das schöner aussieht) zu erzeugen, sondern bei einem Linksklick die eine und bei Rechtsklick die andere Menü-Variante zu öffnen.

Vorab schon mal herzlichen Dank.
 
Ich habe ganz vergessen zu erwähnen, dass ich die beiden Buttons schon unter der Funktion createButton() erstellt habe. Sie funktionieren auch soweit bzw. sehen eben so aus wie sie sollen, eine Funktion haben sie ja noch nicht. Erstellt wurden sie mittels "var usrMenu = <input key=...". Eigentlich müssen sie nur an der passenden Stelle eingebaut werden, aber ich weiß einfach nicht wie genau. Eigentlich sollten sie doch kurz vor dieser Aktion aufgerufen werden "onClick={this.renderModal.bind(this, 'edit', primaryKeyValue)}", da sie bzw. einer der Buttons auf dieses Fenster, das sich in Folge öffnen soll, verlinkt sein soll.
 
Hallo nochmal,

ich denke, ich habe das Ganze ggf. auch etwas umständlich beschrieben :D. Also noch mal von vorne. Ich habe das Probleme bei folgender Umsetzung. Bei Anklicken einer Zeile in einer Auswahlliste soll sich erst ein kleines Zwischenmenü öffnen bei dem man 2 Buttons zur Auswahl hat, die dann wiederum bei Klick zwei jeweilig unterschiedliche, größere Menüs aufrufen. Ist das nicht irgendwie mit einer onClick-Verkettung umsetzbar? Oder ganz einfach mit vorgeschalteten if/else? Ich bekomme es einfach nicht zum Laufen und bin am Verzweifeln.

Die 2 Buttons habe ich schon unter der Funktion createButtons() folgendermaßen erstellt. Sie funktionieren auch soweit, bzw. eine Funktion haben sie ja noch nicht, aber sie sehen eben so aus wie sie aussehen sollen:

Button-Variablen:
var usrMenu = <input key="reserve" className="green" type="submit" id="uMenu" value="Reservieren" />;
var admMenu = <input key="edit" className="red" type="submit" id="aMenu" value="Bearbeiten" />;

Das Code-Schnippselchen in das es eingefügt werden sollte, sieht folgendermaßen aus:

Fenster-/Menüaufbau:
if (!this.props.dataHandler.userData.isAdmin() && this.props.action === 'activeDevices') {
    tableBody.push(
        <tr
            id={primaryKeyValue}
            onClick={this.renderModal.bind(this, 'reserve', primaryKeyValue)}
            key={primaryKeyValue}
        >
            {children}
            <span className="table-img" id={primaryKeyValue + '_IMG'}></span>
        </tr>
    );
} else {
    tableBody.push(
        <tr id={primaryKeyValue} onClick={this.renderModal.bind(this, 'edit', primaryKeyValue)} key={primaryKeyValue}>
            {children}
            <span className="table-img" id={primaryKeyValue + '_IMG'}></span>
        </tr>
    );
}

Das Ganze soll so umgebaut werden, dass im else-Zeig die beiden unterschiedlichen großen Menüs...:

Menüaufruf (großes Menü) und soz. Baustelle:
onClick={this.renderModal.bind(this, 'edit', primaryKeyValue)}

onClick={this.renderModal.bind(this, 'reserve', primaryKeyValue)}

...jeweilig entsprechend dem Klicken auf das vorgeschaltete Minimenü aufgerufen werden. Also es soll erst das Minimenü aufgerufen und dann bei Klick das jeweils ausgewählte, größere Menü.

Ich habe schon einiges ausprobiert, aber komme hier irgendwie auf keinen grünen Zweig :(.
 
Ich fürchte, ich verstehe das immer noch nicht so ganz. :D
Kannst du vielleicht mal ein Screenshot posten, wo man deinen aktuellen Stand sieht und darauf basierend besser nachvollziehen kann, was du erreichen möchtest?

Wenn ich dich richtig verstehe, sollen beim Klick auf die Tabellenzeile die beiden Buttons angezeigt werden.
Wenn man dann auf einen Button klickt, soll sich danach entsprechend das passende Modal öffnen.

Wenn sich das Modal bereits erfolgreich öffnet, kannst du doch das gleiche Prinzip auch für die Buttons anwenden.
Bei Klick auf die Tabellenzeile rufst du deine Methode für die Buttons auf.
Für die Buttons erstellst du dann nach dem gleichen Prinzip ein onClick-Event, dieses ruft allerdings das passende Modal auf.
Wie das konkret auszusehen hat, kann ich dir dank meiner nicht vorhanden React-Kenntnisse leider nicht sagen.

Vom Prinzip her ungefähr so:

JSX:
<tr id={primaryKeyValue} onClick={this.renderButtons.bind(this, primaryKeyValue)} key={primaryKeyValue}>
    {children}
    <span className="table-img" id={primaryKeyValue + '_IMG'}></span>
</tr>

JSX:
function renderButtons(primaryKeyValue) {
  var usrMenu = <input onClick={this.renderModal.bind(this, 'reserve', primaryKeyValue)} key="reserve" className="green" type="submit" id="uMenu" value="Reservieren" />;
  var admMenu = <input onClick={this.renderModal.bind(this, 'edit', primaryKeyValue)} key="edit" className="red" type="submit" id="aMenu" value="Bearbeiten" />;
}
 
Wenn ich dich richtig verstehe, sollen beim Klick auf die Tabellenzeile die beiden Buttons angezeigt werden.
Wenn man dann auf einen Button klickt, soll sich danach entsprechend das passende Modal öffnen.
Doch doch, genau so, hast du schon vollkommen richtig verstanden.

Wenn man auf ein Fenster mit scrollbarer Liste mit Einträgen klickt, soll beim anklicken eines Zeileneintrags das Mini-Untermenü mit den 2 Buttons geöffnet werden und bei der entsprechenden Auswahl dann jeweils das größere Menü.

Ja genau, das Modal öffnet sich bereits erfolgreich. Von der Theorie her hatte ich zwar die gleiche Idee mit der "Verkettung", aber an der Umsetzung hat's gewaltig gehapert :D.

Mit der Anweisung "this.renderModal.bind" sorgt man doch, so wie ich das verstehe, dann auch gleichzeitig dafür, dass die Buttons des vorgeschalteten "Minimenüs" den graphisch, einheitlichen "Fensterrahmen" um sich herum aufbauen?

Ich probiere das später mal aus und gebe dir dann nochmal Rückmeldung, ob das Ganze funktioniert. Aber schon mal besten Dank für deine tolle Hilfestellung :).
 
Zuletzt bearbeitet:
Alles klar. :)

Mit der Anweisung "this.renderModal.bind" sorgt man doch, so wie ich das verstehe, dann auch gleichzeitig dafür, dass die Buttons des vorgeschalteten "Minimenüs" den graphisch, einheitlichen "Fensterrahmen" um sich herum aufbauen?
Da kommt es ganz darauf an, was die Methode renderModal() tut.
Bedeutet das, die Methode renderModal() wurde gar nicht von dir geschrieben und entstammt einer Library o.ä.?
Grundsätzlich fehlt mir bei deinem Problem bzw. dieser Frage ein bisschen der Kontext.
 
Funktioniert leider nicht :(. Der Compiler zeigt mir folgende Fehler an:

renderButtons is defined but never used

usrMenu und admMenu is assigned a value but never used

Er compiliert mit den genannten Warnungen und an der entscheidenden Stelle stürzt das Programm ab.

Der Code ist von mehreren Leuten entwickelt und muss quasi nur etwas erweitert werden. Die Fkt renderModal stammt dementsprechend nicht von mir. So wie ich das verstehe sorgt sie aber auch eher für Reaktionen auf bestimmte Situationen, wenn bspw. etwas schon reserviert ist etc. Arbeitet scheinbar auch tatsächlich mit React.

Oder könnte man, falls es nicht gehen sollte, auch einfach die entsprechenden Menüs per Links Klick und Rechtsklick öffnen? Kann überhaupt zwischen linken und rechten Mausklick unterschieden werden?

Vielleicht setze ich auch einfach nur an der falschen Stelle an?

Ich schick dir ggf. mal eine PM, wenn du damit einverstanden bist?
 
Zuletzt bearbeitet:
renderButtons is defined but never used
Nun, du musst die Buttons natürlich schon noch in den DOM einfügen.
Wenn sie einfach nur als Variable rumliegen und nicht genutzt werden, kann natürlich auch nichts passieren.

Ich habe ja leider kaum Ahnung von React, aber die Suche "react create new element on click" führt z.B. zu dieser Stackoverflow-Diskussion: https://stackoverflow.com/questions/33840150/onclick-doesnt-render-new-react-component

Ich weiß nicht, was deine Methode renderModal() macht, aber eventuell ist es ratsam, die Elemente schon vorher im DOM zu platzieren und beim Klick lediglich den State anzupassen, sodass die Buttons dann angezeigt werden.

Oder könnte man, falls es nicht gehen sollte, auch einfach die entsprechenden Menüs per Links Klick und Rechtsklick öffnen? Kann überhaupt zwischen linken und rechten Mausklick unterschieden werden?
Ja, das würde auch funktionieren.
Ist aber nicht sonderlich ratsam, da du dadurch das erwartete Verhalten des Browsers veränderst.


Ich schick dir ggf. mal eine PM, wenn du damit einverstanden bist?
Grundsätzlich ist es mir lieber, wenn Probleme und Fragestellungen öffentlich diskutiert werden, damit andere Leute ggf. darauf stoßen und von dieser Diskussion profitieren können.
Du kannst mir aber natürlich eine private Nachricht schicken, wenn du den vollständigen Quellcode hier z.B. nicht öffentlich posten kannst und du das Gefühl hast, dass wir auf diesem Wege nicht vorankommen.
 
Zurück
Oben Unten