Ankündigung
Einklappen
Keine Ankündigung bisher.
jQuery toggle
Einklappen
Neue Werbung 2019
Einklappen
X
-
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>
.
Einen Kommentar schreiben:
-
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.
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:
-
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:
-
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>
- 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:
-
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');
});
Einen Kommentar schreiben:
-
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:
-
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:
Einen Kommentar schreiben: