dropdown mit download

Sempervivum · 24. Februar 2024

... und die Version mit ausführlichen Texten in jeweils einem getrennten Element:

Code:

    <!-- Das HTML für die Popovers, für jede Option ein Element -->
    <div id="popover-1" popover>
        <h4>Die Überschrift im Popover 1</h4>
        <p>Der Text im Popover 1</p>
    </div>
    <div id="popover-2" popover>
        <h4>Die Überschrift im Popover 2</h4>
        <p>Der Text im Popover 2</p>
    </div>
    <select class="image-dropdown" id="image-dropdown3">
        <!-- Optionen mit Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-Kreuzung-flach.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png"
            data-popover-id="popover-1">
            Gleis-Kreuzung-flach
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-links.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-links.png"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png"
            data-popover-id="popover-2">
            Weiche-Zufahrt-von-links </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-rechts.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-rechts.png">
            Weiche-Zufahrt-von-rechts
        </option>
        <!-- Optionen ohne Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Wechsel-Zufahrt-doppelt.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Wechsel-Zufahrt-doppelt.png">
            Weiche-Wechsel-Zufahrt-doppelt
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Wechsel-Zufahrt-doppelt-Zusatz-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Wechsel-Zufahrt-doppelt.png">
            Weiche-Wechsel-Zufahrt-doppelt-Zusatz-2x
        </option>
    </select>

Code:

        function makeOption(data, container) {
            if (!data.id) return data.text;
            const
                popoverId = data.element.dataset.popoverId;
            let popoverHtml = '';
            if (popoverId) {
                popoverHtml = `<button type="button" popovertarget="${popoverId}"></button>`;
            }
            const $state = $(`
            <span class="select2-option">
                <img src="${data.element.dataset.imgUrl}">
                <span class="dl-icon" data-link=${data.element.value}>⭳</span>
                <span class="option-text">${data.text}</span>
                ${popoverHtml}
                </span>`);
            return $state;
        };

bdt600 · 24. Februar 2024

@Sempervivum
Und immer wieder fertige Lösungen posten

PeterPlus · 25. Februar 2024

Sempervivum hat gesagt.:

... und die Version mit ausführlichen Texten in jeweils einem getrennten Element:

Code:

    <!-- Das HTML für die Popovers, für jede Option ein Element -->
    <div id="popover-1" popover>
        <h4>Die Überschrift im Popover 1</h4>
        <p>Der Text im Popover 1</p>
    </div>
    <div id="popover-2" popover>
        <h4>Die Überschrift im Popover 2</h4>
        <p>Der Text im Popover 2</p>
    </div>
    <select class="image-dropdown" id="image-dropdown3">
        <!-- Optionen mit Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-Kreuzung-flach.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png"
            data-popover-id="popover-1">
            Gleis-Kreuzung-flach
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-links.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-links.png"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png"
            data-popover-id="popover-2">
            Weiche-Zufahrt-von-links </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-rechts.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-rechts.png">
            Weiche-Zufahrt-von-rechts
        </option>
        <!-- Optionen ohne Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Wechsel-Zufahrt-doppelt.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Wechsel-Zufahrt-doppelt.png">
            Weiche-Wechsel-Zufahrt-doppelt
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Wechsel-Zufahrt-doppelt-Zusatz-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Wechsel-Zufahrt-doppelt.png">
            Weiche-Wechsel-Zufahrt-doppelt-Zusatz-2x
        </option>
    </select>

Code:

        function makeOption(data, container) {
            if (!data.id) return data.text;
            const
                popoverId = data.element.dataset.popoverId;
            let popoverHtml = '';
            if (popoverId) {
                popoverHtml = `<button type="button" popovertarget="${popoverId}"></button>`;
            }
            const $state = $(`
            <span class="select2-option">
                <img src="${data.element.dataset.imgUrl}">
                <span class="dl-icon" data-link=${data.element.value}>⭳</span>
                <span class="option-text">${data.text}</span>
                ${popoverHtml}
                </span>`);
            return $state;
        };

DANKE!!! Das ist mehr als erwartet und DIE Lösung!
Hatte mehrmals auch versucht KI mittels Bing einzusetzen, aber das Programm steigt dann immer irgendwann aus, wenn die Anfrage zu kompliziert wird.
Bin heilfroh, dass die Sache so machbar ist und werd´ es einarbeiten, sobald möglich.
Brauchst Du nicht viell. irgendwas vom 3D-Druck, Ersatzteil oder Sonstwas? Möchte mich irgendwie bedanken können.
Schönes WE noch aus Wien!
Peter

Sempervivum · 25. Februar 2024

Freut mich, dass die Lösung dir gefällt.

Brauchst Du nicht viell. irgendwas vom 3D-Druck, Ersatzteil oder Sonstwas?

Daran hatte ich selber schon gedacht: Ich habe in den letzten Wochen schon zwei solche Teile gebraucht und jetzt wieder. Und zwar aktuell eine Schutzhülle für mein Tablet, ein Surface Go 2. Allerdings ist nicht der Druck das Problem, dafür gibt es ja Dienste im Netz, sondern es muss, auf meine Bedürfnisse zugeschnitten, erst Mal konstruiert werden. Und das wird nicht gehen aus der Entfernung, denn es muss ja genau Maß genommen werden. Ich habe jedoch jetzt zwei Konstrukteure an der Hand, die das für mich erledigen können.

Beste Grüße und ich wünsche ebenfalls einen schönen Sonntag!
Ulrich

PeterPlus · 15. April 2024

Sempervivum hat gesagt.:

Das ist auch nicht ganz einfach, weil die Optionen, wo der Button für den Infotext drin sein muss, dynamisch generiert werden als span-Elemente.
Ich habe zunächst eine einfache Lösung realisiert wo der Text des Popover in einem data-Attribut abgelegt wird:

Code:

    <select class="image-dropdown" id="image-dropdown3">
        <!-- Option mit Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-Kreuzung-flach.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png"
            data-popover-id="popover-1" data-popover-text="Der Text für Popover 1">
            Gleis-Kreuzung-flach
        </option>
        <!-- Option ohne Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-links.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-links.png"
            Weiche-Zufahrt-von-links </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-rechts.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-rechts.png">
            Weiche-Zufahrt-von-rechts
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Wechsel-Zufahrt-doppelt.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Wechsel-Zufahrt-doppelt.png">
            Weiche-Wechsel-Zufahrt-doppelt
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Wechsel-Zufahrt-doppelt-Zusatz-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Wechsel-Zufahrt-doppelt.png">
            Weiche-Wechsel-Zufahrt-doppelt-Zusatz-2x
        </option>
    </select>

Und die Funktion makeOption durch diese ersetzen, nicht hinzu fügen:

Code:

        function makeOption(data, container) {
            if (!data.id) return data.text;
            const
                popoverId = data.element.dataset.popoverId,
                popoverText = data.element.dataset.popoverText;
            let popoverHtml = '';
            if (popoverId) {
                popoverHtml = `
                <button type="button" popovertarget="${popoverId}"></button>
                <span id=${popoverId} popover>${popoverText}</span>`;
            }
            const $state = $(`
            <span class="select2-option">
                <img src="${data.element.dataset.imgUrl}">
                <span class="dl-icon" data-link=${data.element.value}>⭳</span>
                <span class="option-text">${data.text}</span>
                ${popoverHtml}
                </span>`);
            return $state;
        };

Das ist nur praktikabel bei einfachen und kurzen Texten. Sollen die Popovers umfangreicher werden wie in dem vorhandenen Beispiel, müssten wir sie in getrennten HTML-Elementen oder Templates ablegen, was auch kein Problem wäre.

Weil die Texte für jede Option spezifisch sein müssen sehe ich keine Möglichkeit, das weiter zu vereinfachen. Die Texte und die Optionen, zu denen sie gehören, müssen ja von dir fest gelegt werden.

Hallo,
spät aber doch wollte ich die Sache jetzt einarbeiten und leider zeigt er mir anstatt dem Kurz-Text Popover die ganze Zeile an:

data-popover-id="popover-1" data-popover-text="Test für kleinen Info-Text">

Zu finden in MF23-DOWNLOAD

Und zwar getestet an der nächsten Position nach der "Gleis-Kreuzung-flach" (wie im Text von Dir) und zwar "Weiche-Zufahrt-von-links"

Sempervivum · 15. April 2024

Guten Morgen Peter und willkommen zurück!

Das option-Tag wird vorzeitig geschlossen:

Code:

                <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-links.stl"
                    data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-links.png">
                    data-popover-id="popover-1" data-popover-text="Test f&uuml;r kleinen Info-Text">
                    Weiche-Zufahrt-von-links
                </option>

Zweite Zeile, die schließende spitze Klammer muss raus:
data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-links.png">

PeterPlus · 16. April 2024

Morgen Ulrich,

dass ich das nicht selber gesehen habe..., ist ja logisch.

Obwohl des versuchten Wieder-Einarbeitens, verstehe ich den Unterschied der großen Info<button popovertarget... und die jetzige kl. Info nicht ganz- möchte die wie den grossen Info-Text, selbes Aussehen nur halb so groß und weiter rechts unter dem Text anstatt unter dem Bild.
Erst wenn das verstanden, kann ich mich um eventuelle größere Texte kümmern ( wo ist die Grenze? Muß es in einer Zeile sein, oder wieviele Zeichen dürfen es sein?)

PeterPlus · 16. April 2024

PeterPlus hat gesagt.:
Morgen Ulrich,

dass ich das nicht selber gesehen habe..., ist ja logisch.

Obwohl des versuchten Wieder-Einarbeitens, verstehe ich den Unterschied der großen Info<button popovertarget... und die jetzige kl. Info nicht ganz- möchte die wie den grossen Info-Text, selbes Aussehen nur halb so groß und weiter rechts unter dem Text anstatt unter dem Bild.
Erst wenn das verstanden, kann ich mich um eventuelle größere Texte kümmern ( wo ist die Grenze? Muß es in einer Zeile sein, oder wieviele Zeichen dürfen es sein?)

Es wäre absolut ausreichend, wenn statt der großen leeren Fläche ein vorbereitetes Symbol dort stünde, wie beispielsweise ein kleines "I" in einem Kreis.
(habe testweise einfach das andere Infofenster eingefügt und gesehen, dass das so nicht geht...)

PeterPlus · 16. April 2024

PeterPlus hat gesagt.:
Es wäre absolut ausreichend, wenn statt der großen leeren Fläche ein vorbereitetes Symbol dort stünde, wie beispielsweise ein kleines "I" in einem Kreis.
(habe testweise einfach das andere Infofenster eingefügt und gesehen, dass das so nicht geht...)

Habe das Problem der KI von Bing erklärt, folgende Antwort (leider nicht klar genug für mich):
Ja, es ist möglich, eine kleine Zusatzinfo zu einem Dropdown-Menüpunkt hinzuzufügen, die beim Anklicken eines Symbols angezeigt wird. Hier sind einige Schritte, wie du das erreichen kannst:

HTML-Struktur erstellen: Du kannst die gewünschte Option in deinem Dropdown-Menü mit zusätzlichen Datenattributen versehen. In deinem Beispiel sieht das so aus:
HTML

<option value="https://3d.peterplus.eu/MF23/download/Streben/STL/3eck-STB-Clip-Version-0.stl"
data-img-url="https://3d.peterplus.eu/MF23/download/Streben/3eck-STB-Clip-Version-0.png"
data-popover-id="popover-1" data-popover-text="Steht nicht über STB-Ecke hinaus">
3eck-STB-Clip-Version-0
</option>

KI-generierter Code. Überprüfen und sorgfältig verwenden. Weitere Informationen zu häufig gestellten Fragen.
Hier sind die relevanten Datenattribute:
- data-img-url: Die URL des Symbols, das beim Anklicken angezeigt werden soll.
- data-popover-id: Eine eindeutige ID für das Popover-Element.
- data-popover-text: Der Text, der im Popover angezeigt werden soll.
CSS-Styling hinzufügen: Du kannst CSS verwenden, um das Symbol zu positionieren und das Popover-Styling anzupassen. Hier ein Beispiel:
CSS

/* Symbol-Styling */
.symbol {
/* Füge hier deine Symbol-Stile hinzu */
}

/* Popover-Styling */
#popover-1 {
/* Füge hier deine Popover-Stile hinzu */
}

KI-generierter Code. Überprüfen und sorgfältig verwenden. Weitere Informationen zu häufig gestellten Fragen.
JavaScript-Interaktion hinzufügen (optional): Wenn du das Symbol anklickst, kannst du JavaScript verwenden, um das Popover anzuzeigen. Hier ein Beispiel mit jQuery:
JavaScript

$(document).ready(function() {
$('.symbol').click(function() {
var popoverId = $(this).data('popover-id');
$('#' + popoverId).show();
});
});

KI-generierter Code. Überprüfen und sorgfältig verwenden. Weitere Informationen zu häufig gestellten Fragen.
Stelle sicher, dass du jQuery in deinem Projekt eingebunden hast, wenn du diese Methode verwendest.
Popovers erstellen: Erstelle das Popover-Element mit der entsprechenden ID und füge den gewünschten Text hinzu:
Steht nicht über STB-Ecke hinaus" style="position: relative; display: block; border: 1px solid var(--cib-color-stroke-neutral-primary); border-radius: var(--cib-border-radius-large); margin-block: 24px 12px;">
HTML

<div id="popover-1" class="popover">
Steht nicht über STB-Ecke hinaus
</div>

KI-generierter Code. Überprüfen und sorgfältig verwenden. Weitere Informationen zu häufig gestellten Fragen.
Passe das Styling des Popovers nach Bedarf an.

Mit diesen Schritten kannst du ein Dropdown-Menü mit einer Zusatzinfo erstellen, die beim Anklicken eines Symbols angezeigt wird. Vergiss nicht, die CSS- und JavaScript-Teile an deine spezifischen Anforderungen anzupassen 2 3

bdt600 · 16. April 2024

Siehe z.B. (oder einen der anderen tausende Treffer von google) How To Create Popups

dropdown mit download

Sempervivum

Erfahrenes Mitglied

bdt600

Erfahrenes Mitglied

PeterPlus

Mitglied

Sempervivum

Erfahrenes Mitglied

PeterPlus

Mitglied

Sempervivum

Erfahrenes Mitglied

PeterPlus

Mitglied

PeterPlus

Mitglied

PeterPlus

Mitglied

bdt600

Erfahrenes Mitglied

Neue Beiträge