Ankündigung

Einklappen
Keine Ankündigung bisher.

jQuery toggle

Einklappen

Neue Werbung 2019

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

  • Manko10
    antwortet
    Ich dachte, Chriz nutzt jQuery. Wozu alles nachprogrammieren?

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Wie immer sorry für meinen Coding-Stil. Fragen? Nur her damit.
    Wie man sieht (Auskommnetiert) funktioniert das Ganze nicht für mehrere Schalter (dafür müsste man das toggle-Objekt via data() an das div-Element binden o.ä.), wohl aber für mehrere Zielobjekte eines Schalters:

    PHP-Code:
    <style>
      .
    hidden                {color:#f00;}
      
    .js .hidden.js_visible {color:#0f0;}
      
    .js .non_js_visible    {color:#f00;}
      
    .non_js_visible        {color:#0f0;}
    </style>

    <
    script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">


    toggeling = function (element , settings) {


      this.settings = {
        openerItem : '.openState'    ,
        closerItem : '.closedState'  ,
        getState   : function (element)
                       {
                       return (element.hasClass ('hidden'));
                       }              ,
        element    : element
        };


      this.setToggleDisplay = function ()
        {
        this.settings.target.toggleClass ('hidden' , this.settings.state);
        this.settings.target.removeClass ('non_js_visible');

        this.settings.opener.toggleClass ('hidden' , this.settings.state);
        this.settings.closer.toggleClass ('hidden' , ! this.settings.state);
        }


      this.addHandlers = function ()
        {
        var selfInstance = this;

        $(element).click (function () 
          {
          selfInstance.settings.state = ! selfInstance.settings.state;
          selfInstance.setToggleDisplay ();
          });
        }


      this.init = function ()
        {
        
        jQuery.extend (this.settings , settings || {});
        jQuery.extend (this.settings , {
                                       target  : $($(element).attr('href')) ,
                                       opener  : $(this.settings.openerItem , element) ,
                                       closer  : $(this.settings.closerItem , element) ,
                                       }
                      );

        this.settings.state = this.settings.getState (this.settings.target);
        
        $(element).attr('href' , 'javascript:void(0)');


        this.setToggleDisplay ();
        }
      
      this.init ();
      this.addHandlers ();
      }

    $(document).ready(function() {

      $('.toggle').each (function () {new toggeling (this)});
      $('.toggle2').each (function () {new toggeling (this , 
                                      {
                                      openerItem : '.opener'  ,
                                      closerItem : '.closer'
                                      }
                                      )});


      $('body').addClass ('js');
    });
    </script>

    <body>

      <div id="toggleContainer" class="hidden non_js_visible">
        Toggle mich
      </div>
      <a href="#toggleContainer" rel="chapter" class="toggle hidden js_visible">
          <span class="openState">opener</span>
          <span class="closedState">closer</span>
      </a>
      <!--
      <br />
      <a href="#toggleContainer" rel="chapter" class="toggle hidden js_visible">
          <span class="openState">opener</span>
          <span class="closedState">closer</span>
      </a>
      -->

      <div class="toggleContainer2">
        Toggle mich
      </div>
      <div class="toggleContainer2">
        Toggle mich
      </div>

      <a href=".toggleContainer2" rel="chapter" class="toggle2 hidden js_visible">
          <span class="opener">opener</span>
          <span class="closer">closer</span>
      </a>

    </body> 
    Die Auf/Zu-Statusse sind hier mit grün/rot dargestellt. Das Beispiel ist etws komplexer, weil auch ein Status für nicht verfügbares JS abgebildet werden soll.
    .

    Einen Kommentar schreiben:


  • Manko10
    antwortet
    onclick ist ja in Ordnung, ich will nicht für jede Auf-/Zuklapp-Aktion den onDOMReady Eventhandler beauftragen müssen. Im Moment klappt es soweit.
    Verstehe ich nicht. Was hat das mit DocumentReady zu tun?

    Beim Klick toggle() ich den Zielcontainer (hide) und verstecke den aktuellen Anchor ("zuklappen"), zeige dafür den "aufklappen" Anchor an. Bei dem läufts umgekehrt:
    Zielcontainer togglen (show), sich selbst verstecken und den Zuklappen-Anchor anzeigen.
    Wozu zwei Trigger-Links? Einer reicht doch völlig aus. Oder missverstehe ich dich?

    Ich glaube text() habe ich gesucht, kann ich da auch HTML übergeben? Sind wie gesagt nicht nur Texte, sondern ist auch jeweils ein Icon dabei.
    Für HTML gibt es die adäquate Funktion html(). Wenn es nur um Icons geht, würde ich aber zu CSS greifen statt zu Extra-Markup.

    Einen Kommentar schreiben:


  • Chriz
    antwortet
    onclick ist ja in Ordnung, ich will nicht für jede Auf-/Zuklapp-Aktion den onDOMReady Eventhandler beauftragen müssen. Im Moment klappt es soweit.

    Beim Klick toggle() ich den Zielcontainer (hide) und verstecke den aktuellen Anchor ("zuklappen"), zeige dafür den "aufklappen" Anchor an. Bei dem läufts umgekehrt:
    Zielcontainer togglen (show), sich selbst verstecken und den Zuklappen-Anchor anzeigen.

    @Manko10: Ich glaube text() habe ich gesucht, kann ich da auch HTML übergeben? Sind wie gesagt nicht nur Texte, sondern ist auch jeweils ein Icon dabei.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Code:
    <div id="toggleContainer" class="(hidden) js_visible">
      Toggle mich
    </div>
    <a href="toggleContainer" rel="chapter" class="toggle hidden js_visible">
        <span class="openState">$open</span>
        <span class="closedState">$close</span>
    </a>
    So in etwa würde ich das Problem angehen. Bin nicht hundertpro sicher, ob das mit dem href so valide ist.

    - href gibt die ID/den Namen des Toggle-Inhalts an (das muß dann die JS Funktion auswerten), vielleicht auch #toggleContainer für eine entspr. ID benutzen
    - rel soll der nicht-URL-Ressource Rechnung tragen
    - hidden soll via CSS den Toggle Link verstecken
    - js_visible soll ihn wieder anzeigen, wenn JS verfügbar ist. Dementsprechend müßte der Toggleinhalt gestaltet sein, dort je nach Anfangsstatus
    - openState „adressiert“ den Inhalt für Anzeige-Link und vice versa. Den Bezeichner müßte JS auswerten

    Ich arbeite das mal aus.

    Einen Kommentar schreiben:


  • Manko10
    antwortet
    Hi!
    Wenn du schon jQuery nutzt, dann lass doch bitte diese blöden onclick-Attribute weg.
    Also ich für meinen Teil würde einfach prüfen, ob das Element bereits eingeklappt wurde und das geht einfacher, als du vielleicht denkst:
    PHP-Code:
    $('.mylink').click(function() {
        $(
    '.elementToToggle').toggle();
        if (
    'none' == $('.elementToToggle').css('display')) {
            $(
    this).text('Aufklappen');
            return;
        }
        $(
    this).text('Einklappen');
    }); 
    Ist jetzt allerdings ungeprüft.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Könntest Du viell. mal ein HTML-Beispiel für die beiden Zustände (ohne Events) machen? Der Code ist echt schwer zu lesen. Bin sicher, da gibts noch ne schönere Variante.

    Einen Kommentar schreiben:


  • Chriz
    antwortet
    Habs, auch wenn ich mir nicht vorstellen kann, dass es die eleganteste Lösung ist.

    PHP-Code:
    <?php
            $containerId 
    $this->_containerId;
            
    $hideText    $this->view->iconHelper()->toggleHide() . " "
                         
    $this->view->translate("COMMON_TOGGLE_HIDE")->toHtml();
            
    $showText    $this->view->iconHelper()->toggleShow() . " "
                         
    $this->view->translate("COMMON_TOGGLE_SHOW")->toHtml();
            
    $hideAnchor  "toggleContainer-" $this->_uniqueId "-hide";
            
    $showAnchor  "toggleContainer-" $this->_uniqueId "-show";
            
    $style       ' style="display:none"';
            
    $hideStyle   = ($this->_status == 0) ? $style "";
            
    $showStyle   = ($this->_status == 1) ? $style "";

            
    $xhtml = <<<XHTML
    <a href="javascript:void(0)" class="toggle" $hideStyle id="$hideAnchor" onclick="$('#$containerId').hide('slow');$(this).hide();$('#$showAnchor').show()">$hideText</a>
    <a href="javascript:void(0)" class="toggle" 
    $showStyle id="$showAnchor" onclick="$('#$containerId').show('slow');$(this).hide();$('#$hideAnchor').show()">$showText</a>

    XHTML;
            return 
    $xhtml;
    ?>

    Einen Kommentar schreiben:

Lädt...
X