TYPO3 Extension Kiwi Accordion Version 1.6
Nach einigen Mails und Forenbeiträgen hatte ich schon Bauchschmerzen und fühlte mich ungut, denn meine kleine, feine Extension Kiwi Accordion setzte die "Rahmen"-Eigenschaft von Inhaltselementen außer kraft.
Aber damit ist jetzt Schluss! Die neue Version legt ihre Container unabhängig von den Rahmen um den Inhalt. Zeitnah im Repository verfügbar. Auf meiner privaten Seite gibt es eine Demonstration und im folgenden Eintrag ein paar technische Erklärungen.
Für Redakteure
Die Funktionsweise für Redakteure ist sehr einfach. Über die Seiteneigenschaften lässt sich bestimmen, ob mehrere Panels gleichzeitig offen sein dürfen.
Jedes Inhaltselement wiederum hat zwei Eigenschaften, Aufklappbar und Offen.
Die erste Option initalisiert den Effekt, die zweite öffnet das Inhaltselement beim laden der Seite. Das wars! Eine Beispiel gibt es auf meiner privaten Seite.
Für Techniker
Der kleinere Teil der Arbeit wird vom mitgelieferten Typoscript übernommen. Über die Eigenschaft tt_content.stdWrap.innerWrap.prepend und append wird ein DIV Container um den Inhalt gelegt (div.ka-panel) und je nach gewählten Eigenschaften die Klasse open oder close hinzugefügt.
In Version 4.3 hat sich dieser Teil grundlegend geändert. Inhaltselemente werden jetzt immer innerhalb eines DIV Containers ausgegeben was ich wesentlich besser finde als die nervigen Links ala <a href="#c123"></a>. Das hat leider zur Folge, dass in älteren Versionen der tt_content.stdWrap.innerWrap nur ausgeführt wird, wenn ein Rahmen ausgewählt wurde. Um das zu verhindern fügt die Extension einen Standardwert hinzu, damit die Eigenschaft aufjedenfall greift. Möglich wird das über die Abfrage der eingestellten TYPO3 Version.
[compatVersion < 4.3]
tt_content.stdWrap.innerWrap.cObject.default = TEXT
tt_content.stdWrap.innerWrap.cObject.default.value = |
[end]Der größere Teil der Arbeit erfolgt als jQuery Script. Das Kiwi Accordion arbeitet mit jQuery, bringt das Framework aber selbst nicht mit. Ich bin bei der Entwicklung davon ausgegangen, dass es in jedem Projekt integriert ist.
Im Script wird jeder Container mit der Klasse ka-panel untersucht und für die weitere Verwendung angepasst. Dabei wird mit $(':header:first', '.ka-panel') die erste Überschrift gesucht und als Handler benutzt. Alle Elemente nach der Überschrift werden mit einem Container umschlossen (div.ka-content) und bei Klick ein- oder ausgeblendet.
Bei Mauskontakt erhält das Panel zusätzlich die Klasse hover, damit lassen sich dann Pfeile anzeigen oder Farben ändern, je nach Vorgabe.
Wenn bei der Initialisierung etwas nicht funktioniert, gibt die Extension ein paar Hinweise in der Firebug Konsole aus. Ich hoffe das hilft weiter. Ansonsten sei auf die Demo auf meiner Seite verwiesen.
Getestet hab ich die Extension mit TYPO3 Version 4.3, 4.3.1 und 4.2.6. Über weitere Kompatibilitätshinweise, Fragen und Anregungen freue ich mich natürlich sehr.
Danke für die ganzen Mails und die netten Worte! Frohes rumklappen.
- Mehr zu Kiwi Accordion, TYPO3
- Trackback
-
War der Artikel nützlich für dich? Dann:
Hallo, tolle Sache. Ich hatte früher immer rgaccordion verwendet, bin jetzt aber komplett von mootools zu jquery gewechselt. Es wäre noch schön, wenn man Kiwi Accordion wie rgaccordion auch für die tt_news verwenden könnte.
Cheers aus Joburg,
Bernie
Hi Paul, super Extension, vielen Dank, genau was ich gebraucht habe für mein aktuelles Projekt. Ich habe noch ein bisschen am JavaScript gedreht, damit die Animation des slideUp und slideDown auch schön aussieht. Ohne Höhenangabe der content-divs springt der Effekt nämlich. Folgende Zeilen machen sich für eine dynamische Höhenanpassung der content-divs ganz gut:
jQuery(function($) {
// Variablen zum speichern der Höhen
var i=0;
var contentHeight = [];
…
//Inhalte umschließen für die Ansprache
$(’.ka-handler’, this).siblings().wrapAll(”);
// Höhe der divs auslesen und setzen
contentHeight[i] = $(’.ka-content’, this).css(’height’);
$(’.ka-content’, this).css(’height’, contentHeight[i])
i++;
…
den slide und fade aufrufe hab ich noch zwei parameter für speed und easing geben, dann kann man die animation sehr gut kontrollieren und je nach gusto einstellen.
Fürs easing brauchts dann noch so eine js-datei hier: http://gsgd.co.uk/sandbox/jquery/easing/
kannst du ja in deinen nächsten release einbauen, wenn du magst,
keep on programmin’ & grüße aus ffm,
Jan
Hallo,
auch ich bin ganz begeistert von dem Kiwi-Accordion.
Was ich allerdings bisher nicht geschafft habe ist, wenn ein Plugin als Inhaltselement auf einer Seite ist. Da wird dann nur der Title/Überschrift gerendert, die Plugin-Daten verschwinden im Nirwana. Beispiel: “felogin”.
Vielleicht bin ich aber auch nur zu ungeschickt…
Vielen Dank für die ganzen netten Worte! Das motiviert zum weitermachen. Die Ideen finde ich auch allesamt hervorragend und werde sie in die nächste Version einbauen.
@Didi: Die benötigten DIV Container werden per Typoscript in die Inhaltselemente geschrieben. Andere Plugins nutzen das allerdings nicht. Die einfachste Lösung ist, wenn du die Container manuell in dein Template schreibst. Dann greift das jQuery der Extension und ermöglicht das auf und zuklappen.
Grüße, Paul
Hallo,
vielen Dank für die Extension. Konnte ich super für mein Projekt übernehmen.
Ich habe da allerdings eine Frage. Wie läuft das mit dem Effekt? Du schreibst auf deiner anderen Seite: “Über den Constants-Editor lässt sich der Effekt zum Öffnen und Schließen der Elemente einstellen (none = Standard, slide, fade)”. Was muss ich da eintragen? Nur slide? oder kiwi = slide?
Vielen Dank und Gruß
Mfg Florian
Hallo,
super Extension – kann man einzelne Accordions auch über einen Link ansteuern – das wäre super!
danke schon mal
bei mir läufts mit Version 4.2.10 nicht. Da klappt nur die alte Version 1.0.
bei mir läuft die ext. super, vielen Dank, nur im IE8 springt das ganze etwas auf und ab beim öffnen bzw. schließen, habe schon versucht den code von Jan zu integrieren, nur springt das ganze immer noch, hat hier jemand eine Lösung? vielen vielen Dank
Florian
einfach
kiwi_accordion_effect = slide
oder
kiwi_accordion_effect = fade
hallo,
mit 4.2.12 läufts leider auch nicht so richtig in der aktuellen version. mit 1.0 hats ganz gut geklappt bis auf die rahmen eigenschaft natürlich.
firebug spuckt den fehler “This panel contains no header.” wobei aber ein header da ist. (das habe ich auch mit allen headerdefinitionen durchgespielt – h1-h5, leider ohne erfolg.)
grüße,
sissi
anscheinend greift die “Abfrage der eingestellten TYPO3 Version.” ab 4.2.12(vielleicht schon früherer versionen?) nicht. der object browser zeigt nämlich keinen default wert an. wenn man die 2 zeilen händisch nachtragt, dann geht das auch mit > 4.2.12 (?)
grüße,
sissi
Hallo,
ich muss jQuery leider im Kompatibilitätsmodus benutzen. Mit Herumbasteln habe ich es nicht hinbekommen: Wie bringe ich Kiwi dazu, jQuery mit $j aufzurufen statt mit $ (http://docs.jquery.com/Using_jQuery_with_Other_Libraries)?
Dankbar für einen Tipp, viele Grüße
Moritz
@Moritz: Hast Du im Script kiwi_accordion.js schon einem “$” auf z.B. “$didi” gesetzt und an den entsprechenden Aufrufen ersetzt?
z.B.:
jQuery(function($didi) {
// Falls die Konstante nicht gesetzt wurde…
…
$didi(’.ka-panel’).each(function() {
//Erste Überschrift suchen
$header = $didi(’:header:first’, this);
//Fehler Behandlung wenn keine Überschrift vorhanden ist
…und so weiter, und so fort
@sissi: Bei mir läuft es ohne Anpassungen sowohl unter 4.2.12 als auch 4.3.2…hasyt Du die LiveQuery schon eingebunden?
@Didi: nein, die hatte ich vorher noch nicht eingebunden – habe ich jetzt gemacht, leider bekomme ich dann trotzdem den hinweis “This panel contains no header” …
@sissi: Poste mal Deinen Link zur Webseite, vielleicht finde ich ja etwas aus der Ferne…
Hallo an alle,
Ich habe wie ich meine das jquery und livequery richtig eingebunden, das kiwi_accordion.js wird geladen aber es werden keine DIVs um die Überschriften erstellt???
Hat jemadn eine Idee oder ähnliches. Vielleicht hab ich auch sonst eine Fehler drin. Könnte jemand so nett sein und die Einträge/Typoscript anzeigen?
Kiwi Accordion 1.60, jquery 1.3.2 TYPO3 4.3.2
danke für Eure Hilfe
mfg chriskapeller
Ich vermute mal das Problem liegt in TemplaVoila welches anscheinend nicht das Root Template benutzt, sondern das im SysOrdner “name_des_sysordners”. Dort kannst Du das für die Generierung der Div Container zuständigen Typoscript einfügen:
#
# Öffnender Container für das Kiwi Accordion
#
tt_content.stdWrap.innerWrap.prepend = CASE
tt_content.stdWrap.innerWrap.prepend {
key.field = tx_kiwiaccordion_is_accordion
0 = TEXT
0.value =
1 = CASE
1 {
key.field = tx_kiwiaccordion_is_open
0 = TEXT
0.value =
1 = TEXT
1.value =
}
}
#
# Kiwi Accordion Container wieder schließen
#
tt_content.stdWrap.innerWrap.append = CASE
tt_content.stdWrap.innerWrap.append {
key.field = tx_kiwiaccordion_is_accordion
0 = TEXT
0.value =
1 = TEXT
1.value =
}
Hallo Stephan
ok, das Problem scheint mir verständlich zu sein – aber wo wird das TS eingetragen? im Storage Folder in der entsprechendem TemplaVoila Data Structur? oder wo genau???
mfg chriskapeller
wird das root template genutzt oder das in deinem sys “templates” ordner wenn das in deinem sys ordner benutzt wird (das nehme ich jetzt mal an) dann trag das ins TS deines Templates dort ein. (unter Konfiguration)
@Didi: würde ich gerne machen, aber die seite ist zur zeit extern nicht erreichbar… danke für deine hilfe. sobald sie online ist, werde ich mich gern nochmal melden.
im IE anpassen
– TYPO3
Forum &
Portal 6. April 2010 (20:46 Uhr)
[...] [...]
Hallo,
ich würde die Extension gerne mit Bildern nutzen.
Dafür habe ich HTML im Titel erlaubt und einfach ein reingeschrieben. Das Bild wird auch angezeigt, das klappen klappt jedoch nicht
Gibt es eine einfache Möglichkeit es doch noch zu ermöglichen?
Vielen Dank,
Emil
funktioniert das klappen ohne HTML, wieso verwendest du nicht einfach das standard Bilder Content-Element oder Text mit Bild, damit funktionierts einwandfrei
Der Header muss eine Überschrift sein damit sie von jQuery erkannt wird. Darin müsste ja das Bild liegen. Ansonsten wäre mein Ansatzpunkt den Selector für den Header so umzuschreiben, dass er die Bilder erkennt.
Hast du ein Demolink?
Super Extension!
Das beste ist, dass Kiwi Accordion auch innerhalb der Tab-Navigation-Extension sb_tab funktioniert!
Endlich lässt sich viel Inhalt übersichtlich darstellen! Perfekt!
Für alle die Probleme mit der Einbindung von jQuery haben:
Einfach folgenden Code ins Root-Template schreiben und schon wird via Google die gewünschte jQuery-Version eingebunden (ideal zum schnellen Testen):
page.headerData.150 = TEXT
page.headerData.150.value (
google.load(”jquery”, “1.3.2″);
)
edit:
Sorry, leider wird der Code hier nicht richtig angezeigt. Einfach mal nach “typo3 google.load(”jquery ” o.ä. suchen. Da steht es dann korrekt…
Hallo!
Zuerst mal: echt geniale Extension!
Hab nur ein Problem: seit der Installation werden alle Links im Menü wie folgt aufgerufen: index.php?id=xx#index.php?id=xx
somit lädt die Seite innerhalb der Seite….
Hat jemand dazu eine Lösung?
Hallo!
Habe diese Extension entdeckt, da sie mit der Bibliothek jquery arbeitet und in TV funktioniert.
Ich muss auf der Typo3-Version 4.3.3 arbeiten. Darauf lässt sich zwar die Extension einrichten, gibt aber das Accordion nicht aus,- es wickelt keinen wrap um die Inhalte.
Was kann ich machen, damit ich diese Extension nutzen kann?
Vielen Dank, Tina.
Ich vermute mal das Problem liegt in TemplaVoila welches anscheinend nicht das Root Template benutzt, sondern das im SysOrdner “name_des_sysordners”. Dort kannst Du das für die Generierung der Div Container zuständigen Typoscript einfügen:
#
# Öffnender Container für das Kiwi Accordion
#
tt_content.stdWrap.innerWrap.prepend = CASE
tt_content.stdWrap.innerWrap.prepend {
key.field = tx_kiwiaccordion_is_accordion
0 = TEXT
0.value =
1 = CASE
1 {
key.field = tx_kiwiaccordion_is_open
0 = TEXT
0.value =
1 = TEXT
1.value =
}
}
#
# Kiwi Accordion Container wieder schließen
#
tt_content.stdWrap.innerWrap.append = CASE
tt_content.stdWrap.innerWrap.append {
key.field = tx_kiwiaccordion_is_accordion
0 = TEXT
0.value =
1 = TEXT
1.value =
}
oder du hast den innerWrap gelöscht
tt_content.stdWrap.innerWrap >
Hallo,
das ist ein sehr, sehr schönes Teil, das mich sehr begeistert.
Ich würde nun gerne über einen Parameter steuern, welches Panel beim Laden der Seite offen ist.
Also z.B. hab ich im 2. Panel ein Formular und nun soll wenn das Formular nicht korrekt ausgefüllt wurde, das 2. Panel offen sein. Ansonsten beim normalen Aufruf der Seite das erste.
Geht das? Wo muß ich ansetzen?
Vielleicht hat jemand ne Idee?
Vielen Dank schonmal!
Achim
Hallo Achim, vielen Dank für die netten Worte!
Mein Ansatz wäre im Formular dem entsprechenden Element eine “error” Klasse zu geben und beim laden der Seite mit jQuery nach dieser Klasse zu suchen. Wird ein entsprechendes Element gefunden kannst du mit
$(this).closest('.ka-header').click();das Panel öffnen.
Schöne Grüße, Paul
Hallo Paul,
vielen Dank für die schnelle Antwort und den super Tipp!
Funktioniert prächtig
Allerding nicht mit (’.ka-header’).click(); sondern mit (’.ka-handler’).click()
Gruß achim
Hallo das ist eine super Extension installieren und los gehts. Schade das dies nicht immer bei TYPO3 klappt. Leider vermisse ich eine Funktion in dieser Extension und zwar, das ein Teaser-Text ausgegeben wird und z.B. nach 100 Zeichen dann eine mehr Link erscheint. Falls jemand eine Idee hat wie ich das bewältigen kann, bin um jeden Tipp dankbar. Übrigens eine sehr Informative Website.
Hallo,
nochmal eine Frage.
Aktuell wird das kiwi_accordion.js NACH meinem eigenen js (per page.headerData) eingebunden.
Gibts eine Möglichkeit dieses Verhalten zu beeinflussen?
Vielen Dank und beste Grüße
Achim
Hallo Sven,
), der umschließt die erste gefundene Überschrift. Du könntest dir das so umschreiben, dass er die ersten X Zeichen aus dem Panel ausschneidet und mit in den Handler schreibt.
auch bei deiner Anforderung liegt der Ansatzpunkt im ka-handler (danke achim
Generell will ich das aber ehr nicht in die Extension aufnehmen, weil man ja nicht weiß welche Inhalte im Panel stehen. Es könnten auch Bilder oder Videos sein.
Hi Achim,
das Kiwi Accordion Javascript wird über page.headerData.1002 und 1003 eingebunden. Entweder du nimmst eine andere Zahl für deine Scripte oder änderst es in typo3conf/ext/kiwi_accordion/ext_typoscript_setup.txt. Letzteres würde ich aber nicht empfehlen, da so die Updatefähigkeit verloren geht.
Hoffe das hilft euch und schöne Grüße,
Paul
LOL – ich habs nur bis page.headerData.1000 probiert.
Spitze! Vielen Dank!
Hallo,
ich schon wieder…
Hab das (dringende) Problem, dass der wrap nicht funktioniert (typo3 4.2.8).
Vermute stark, es liegt an der condition, die wohl irgendwie nicht greift.
#
# Sicherstellen, dass der innerWrap immer Anwendung findet (Version < 4.3)
#
[compatVersion < 4.3]
tt_content.stdWrap.innerWrap.cObject.default = TEXT
tt_content.stdWrap.innerWrap.cObject.default.value = |
[end]
Hoffe es gibt eine Lösung?
Vielen Dank
Achim
Downgraden auf Version 1.0. Bei mir gings auch nicht mit 4.2.x. (s. mein Kommentar weiter oben)
Funktioniert. Vielen Dank! (hatte Dein Post übersehen)
Gruß Achim
Hallo Paul
Kompliment für dein Accordion Extension. Ich habe die Extension schon einmal in einer seite zu testzwecken implementiert, da funktionierte alles wunderbar, aber ich habe Sie jetzt in ein grösseres Projekt implementiert und es funktioniert nicht. Ich hatte zuvor mootools in der Anwendung drin und habe gedacht dass das konflikte gibt und habe es deinstalliert, leider funktionierte es dann immer noch nicht. Hast Du erfahrungen mit eventuellen mootools und jquery konflikten?
Liebe Grüsse
Phil
hast den innerWrap im Template gelöscht? schau mal nach!
tt_content.stdWrap.innerWrap >
Mich nervt es total, die neue Version mit TV und TYPO3 4.4. nicht nutzen zu können. Abhilfe schafft es die alte TypoScript Konfiguration zu nutzen.
Allgemein fänd ich es schön, wenn das TypoScript als statisches Template eingebunden werden müsste und nicht manuell eingebunden wird.
Hallo,
ich habe ein Problem mit Typo3 4.2.3 und dem Accordion in der Version 1.6.0.
Ein Einbinden resultiert in:
Test123
Mit Version 1.0 funkioniert das Ganze, jedoch mit der Rahmen-Problematik.
Lässt sich letztere umgehen?
Vielen Dank.
Ups, er hat den Code geschluckt.
“Test123″ ist quasi nicht Teil des “ka-panel close”-divs, das wird vorher ge-”/div”t.