Ankündigung

Einklappen
Keine Ankündigung bisher.

jQuery toggle

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Chriz
    hat ein Thema erstellt jQuery toggle.

    jQuery toggle

    Hallo,

    bin halbwegs neu bei jQuery() (bisher fast nur YUI) und möchte einen Aufklappen/Zuklappen Link für einen Container schreiben.

    $("#containerName").toggle("slow")

    ist schonmal fast was ich suche. Meine Quelle ist diese Seite:
    .toggle() – jQuery API

    Jetzt möchte ich aber zusätzlich noch, dass sich das Linklabel von "<img icon1> aufklappen" in "<img icon2> zuklappen" ändert. Habe es schon so probiert:

    PHP-Code:
    <?php
            $containerId 
    $this->view->translate()->toJs("#" $this->_containerId);
            
    $open  $this->view->iconHelper()->toggleHide() . " "
                   
    $this->view->translate("COMMON_TOGGLE_HIDE")->toHtml();
            
    $close $this->view->iconHelper()->toggleShow() . " "
                   
    $this->view->translate("COMMON_TOGGLE_SHOW")->toHtml();
            

            
    $xhtml = <<<XHTML
    <a href="javascript:void(0)" onclick="$($containerId).hide('slow');\$('span').toggle()">
        <span>
    $open</span>
        <span style="display: none">
    $close</span>
    </a>

    XHTML;
            return 
    $xhtml;
    So richtig sinnvoll ist das ja aber nicht, ich bräuchte etwas, dass die <span>-Tags innerhalb von "this" togglet. $(this).$('span') in etwa. Das klappt leider nicht, beim $ von $('span') wird mir ein Fehler angezeigt.

    Kann mir da jemand von euch einen Tipp geben?

  • rudygotya
    antwortet
    @ Manko: deine Lösung aus #4 ist elegant
    Alternativ kannst du auch die jquery callbacks verwenden
    Code:
    $(".link").click(function () {
        if ($(".container2").is(":hidden")) {
            $(".container1").fadeOut(200, $(".container2").fadeIn(300));
        } else {
            $(".container2").fadeOut(200, $(".container1").fadeIn(300));
        }
    });
    Anstelle von is() könntest du hasClass verwenden oder auch mit jquery animate arbeiten (die ansprechendste Lösung). Würde auch nur einen einzigen Link verwenden wie von Manko vorgeschlagen.

    Einen Kommentar schreiben:


  • Chriz
    antwortet
    Fuck, ewig Text geschrieben, der jetzt weg ist. Lange Rede kurzer Sinn: Danke fuer die aufgebrachte Muehe + morgen mehr dazu von mir.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Einverstanden.

    Einen Kommentar schreiben:


  • Manko10
    antwortet
    Jain. So wie du habe ich ihn auch verstanden. Die Idee der verschiedenen Inhalte habe ich dann erst im Laufe der Diskussion geschildert und meine Meinung dazu kundgetan.
    Wenn es sich aber lediglich um einen Open-Trigger und einen Close-Trigger handelt, sehe ich den Grund, zwei verschiedene Strukturknoten zu setzen erst recht nicht. Logisch gesehen ist das ein und dasselbe Steuerelement, das seinen Status verändert hat.
    Vielleicht sollten wir aber mal auf Chriz warten, damit er sagen kann, was er wirklich will.

    Beitrag editiert:
    […] Sonst wird wieder so etwas draus: http://andinspired.wordpress.com/200...really-needed/

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Um das mal aufzuklären - ich habe Chriz' Aufgabe so verstanden:

    2 Handler schalten einen gemeinsamen Inhalt
    1 Handler (Opener) schaltet ihn sichtbar und ist danach nicht mehr sichtbar
    1 Handler (Closer) schaltet ihn unsichtbar und ist danach nicht mehr sichtbar
    Die Handler schalten jeweils den anderen sichtbat.

    Ich glaube Du, Manko, hast verstanden, dass ein Link mehrere Inhalte schalten soll.
    Da ist das Argument „Deshalb aktualisiere ich solche Daten immer per Page-Reload“ natürlich berechtigt, außer, die stetes Anzeige aller Elemente für nicht-visuelle Nutzer ist gewünscht. Ein Beispiel dafür wäre ein Navigationsbaum, den man immer komplett als Code bereitstellt, auch wenn der Großteil optisch „eingeklappt ist“.

    Einen Kommentar schreiben:


  • Manko10
    antwortet
    Der Meinung bin ich aber nicht in einem solchen Fall. Solange es sich nicht bloß um Boxen handelt, die man aus Platzgründen einklappen kann, sondern um rotierende Inhalte bin ich der Meinung, dass die gleichzeitig im Markup nichts verloren haben. Immerhin würden sie auf diese Weise von den Benutzeragenten erfasst. Screenreader und Textbrowser-Nutzer aber auch Suchmaschinen bekommen beide Inhalte gleichzeitig, was aber bei rotierenden Inhalten selten erwünscht ist. Deshalb aktualisiere ich solche Daten immer per Page-Reload, welcher in Form der progressiven Erweiterung dann per JavaScript/Ajax erledigt werden kann.
    CSS ist für die Anordnung und Formatierung der vorhandenen Inhalte da, nicht für die inhaltliche oder strukturelle Organisation.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Hmm, das sehe ich etwas anders. Je nach Wichtigkeit kann man die JS-Funktionalität ja durchaus auch über nen Request mit PHP als Fallback abbilden. Was man in CSS machen kann, soll man auch ruhig dort machen. Den Rest finde ich, kann man dann schon im Template verdrahten.

    Einen Kommentar schreiben:


  • Manko10
    antwortet
    jQuery-Animationen basieren nicht direkt auf display: none, aber auf Inline-Stylings. display: none ist aber der Endzustand der meisten hide()/toggle() usw. -Funktionen.

    Naja, statt Beschriftung kann es ja auch beliebig komplexer werden. Noch mit nem Image oder so..
    Wwenn es drauf ankommt, lässt sich der DOM-Knoten vor dem Austausch noch duplizieren. Ich bin da bei solchen Sachen immer sehr vorsichtig, bevor ich sie im Markup hardcode. Das ist nämlich reiner JS-Kram, der andere Inhalt hat vorher eigentlich noch nichts im Markup verloren, Eintragung erst per Site-Refresh oder Ajax.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Ohne Inline-Styling kommst du bei JavaScript-Animationen nicht aus.
    Was meinst Du? Dass jQuery-Animationen auf display:none basieren oder was?

    wozu zwei verschiedene Links für zwei verschiedene Link-Beschriftungen benötigt werden
    Naja, statt Beschriftung kann es ja auch beliebig komplexer werden. Noch mit nem Image oder so..

    Einen Kommentar schreiben:


  • Manko10
    antwortet
    Ohne Inline-Styling kommst du bei JavaScript-Animationen nicht aus. Alles, was über element.style.bla geht, wird ins Inline-Styling geschrieben. Wenn du den Krams serverseitig aber lieber über eine Klasse setzt, dann hindert sich ja nichts daran, am Anfang einmal
    PHP-Code:
    $('.hidden').trigger('click');

    // oder

    $('.hidden').hide();

    // oder direkt

    $('.hidden').css('display''none'); 
    auszuführen.
    Ich verstehe aber immer noch nicht, wozu zwei verschiedene Links für zwei verschiedene Link-Beschriftungen benötigt werden. Das klingt irgendwie nach unnötiger Markup-Vermüllung.
    Außerdem erschließt sich mir noch nicht ganz, wozu die Spans getoggelt werden müssen. Sind die die Inhalte drinnen? Ein Inhalt für den geschlossenen Zustand, einer für den geöffneten? Ich verstehe nicht ganz, worauf Chriz hinaus will. Sollen hier zwei Inhaltsbereiche per Klick ausgetauscht werden? Wenn ja, ist toggle() wohl die falsche Variante, die Funktion ist dafür gedacht, einen Bereich ein- und auszuklappen, weniger um zwei Bereiche auszutauschen.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Ja. er möchte aber zwei verschiedene Link-Beschriftungen. Also muss man
    a) zwei Links benutzen
    b) die obige Span-Variante
    c) den Text des Toggelers ändern. Und damit auch irgendwo hinterlegen (JS-seitig)

    Ich persönlich finde toggle() über inline-Style doof. Weil man damit nicht mehr so unabhängig ist, im CSS das Verhalten für „nicht sichtbar“ einstellen zu können.

    Einen Kommentar schreiben:


  • Manko10
    antwortet
    Den Prästatus kannst du auch mit nur einem Toggle-Link serverseitig bereits festlegen. jQuery nutzt hier siw Inline-Styling-Angabe display: none für den Endstatus beim Schließen. Was meinst du mit dem Fokus? Wenn du nur einen Link nutzt, geht der Fokus nicht verloren, bei zweien hingegen schon, es sei denn, du setzt ihn manuell.
    Ich würde einfach einen Link toggeln, wie ich oben schon angegeben habe.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Wozu zwei Trigger-Links?
    Ich glaube text() habe ich gesucht
    Ich kann mir gut Anwendungszwecke für die spans vorstellen. Schön ist auch, dass man das vollständig über Templates angeben kann. Und, dass der Togglelink den Fokus nicht verliert.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Meinst Du mich?

    Einen Kommentar schreiben:

Lädt...
X