Dez 10
26
Die neue Version des Twinpicture jQuery Collapse-O-Matic Plugin für WordPress beinhaltet neue Nutzer-gewünschte Features. Alle Eigenschaften sind unten aufgelistet, inklusive der Shortcode-Liste für v1.3.:
Bis das Plugin offiziell veröffentlicht wird, kannst Du jQuery Collapse-O-Matic v1.3 von der Twinpictures Webseite herunterladen.
Basic Shortcode
[expand title="Trigger Text"]Target Content[/expand]
ID Attribute
[expand title="Pocket Calculator" id="kraftwerk"]Target Content[/expand]
Wenn keine ID definiert ist, wird automatisch eine zufällige ID erstellt. Wenn die optionale ID definiert wurde, kann der ID Wert als URL Anker genutzt werden, um den Inhalt wie folgt zu erweitern:
http://www.twinpictures.de/jquery-collapse-o-matic-1-3/#kraftwerk
Tag Attribut
[expand title="A Long Time Ago" tag="h4"]Target Content[/expand]
A Long Time Ago
Das Tag Attribut überschreibt den vorgegebenen (default) Bereichs-Tag, welcher den Trigger Text beinhaltet.
Alt Attribut
[expand title="Imperial Starfleet" alt="Empire Strikes Back"]Target Content[/expand]
Das alt Attribut definiert den Hover Text, welcher angezeigt wird, wenn man mit der Maus über den Titel geht. Wenn kein alt Attribut definiert wurde, zeigt der Hover Text den Titel.
Trigclass Attribut
[expand title="A New Hope" trigclass="highlight"]Target Content[/expand]
Das Trigclass Attribut erlaubt dem Nutzer eine Custom Class für den Tag, welcher den Text beinhaltet, zu definieren. Diese Class wird nach der benötigten collapseomatic Class, welche als “default” definiert ist, hinzugefügt.
Targclass Attribut
[expand title="The Empire Strikes Back" targclass="highlight"]Target Content[/expand]
Das Targclass Attribut erlaubt dem Nutzer eine eigene Class für das div Element, welches den Text umschließt, zu definieren. Diese Class wird nach der benötigten collapseomatic_content Class, welche als “default” definiert ist, hinzugefügt.
Rel Attribute
[expand title="Star Wars" rel="fiction"]Target Content[/expand]
[expand title="Star Trek" rel="fiction"]Target Content[/expand]
[expand title="Battlestar Galactica" rel="fiction"]Target Content[/expand]
[expand title="Space Race" rel="history"]Target Content[/expand]
[expand title="Ansari X Prize" rel="history"]Target Content[/expand]
Science Fiction
Star Wars
Star Trek
Battlestar Galactica
Pure Science
Space Race
Ansari X Prize
Das Rel Attribut erlaubt es dem Nutzer erweiternde Elemente zu gruppieren. Das Ausklappen eines Gruppenmitglieds lässt die Teile einer anderen Gruppe automatisch zusammenklappen.
Rate & Vote
We are very happy to offer this plugin to this great community of open-source lovin’ WordPress users. Now go be a nice social netwookiee and visit the WordPress.org plugin page to rate the plugin. Don’t forget to let others know if everything worked for your configuration by voting in the compatibility section.
Blab To Others
Join the Twinpictures Facebook Page or hit us up on the Twitter. Post a nice video review, and we will be happy to include it on the Twinpictures YouTube Channel.
Flying Houseboat Fund
If this plugin really just floats-n-flys your boat, why not throw in a bean or two in the Twinpictures Flying Houseboat Fund!
The Flying Houseboat Project envisions an extremely efficient future flying abode, powered by sea and air. Click to embiggen.
Seaplane Sailing Yacht Concept by Yelken Octuri
Makani-M1 Airborne Wind Turbine Concept by Makanipower
This post is also available in: Englisch
How Can I expand or collapse all triggers?
@Panayiotis: Check ou the expand/collapse all demos on the english page: http://www.twinpictures.de/jquery-collapse-o-matic-v1-3/
Really nice tool. I am already using on my website
@Ashu: Thank you! Very nice comment… we will use it on our website as well.
Hello,
This seems like a nice plugin, is there a simple code to add to hide a selected amount of code with a jquery spoiler?
Oh, danke!
Es gibt Leute, die sind vorbildlich taktvoll und kriegen es wirklich hin, ganz dezent auf Fehler hinzuweisen. Wenn ich brav jeweils einen Slash vor den-die-das hash mache, klappt es auch in Safari und IE. Das war in dem Fall Version 8, hab dann gleich noch den ie-Tester genommen und 6 und 7 auch probiert. Funzt!
(Ähm – und von IE-nutzen kann man wirklich nicht sprechen. Ich sollte ihn wenigstens starten, um zu testen … Bekanntes Phänomen, oder?)
Also, tausend Dank für Hilfe!
Und tausendundeinen Dank für das schöne universell einsetzbare PlugIn.
Herzliche Grüße
Katharina
Ergänzung: beim Korrigieren der Links habe ich gesehen, dass da noch mehr falsch war, sorry.
Stand der Dinge jetzt: Firefox funktioniert auf Mac und auf PC, allerdings springt er bei mir auf PC (auf der virtuellen Box) zuweilen ein Stück zu weit, d.h. der Text ist dann oben schon abgeschnitten und man muss zurückscrollen.
Opera auf Mac funktioniert ebenfalls.
Safari auf Mac funktioniert nicht. (Das könnte heißen, dass es auf Chrome auch nicht funktioniert.)
Und im IE springt er zwar zur richtigen Überschrift, klappt die aber nicht aus.
Herzliche Grüße
Katharina
@Katharina Mann:
Richtig:
http://www.zahnarzt-praxis-stuhr.de/zahnarzt-moordeich/#zahnfuellungenFalsch:
http://www.zahnarzt-praxis-stuhr.de/zahnarzt-moordeich#zahnfuellungenEs funktioniert auf Chrome, Safari und Opera. Welche Version von IE nutzt Du?
Hej, bist du schnell!
Ja, klar, dachte nur, es ist bescheuert, einen Beispiel-Link zu geben, der dann in wenigen Stunden nur noch mit banalen statischen Ankerlinks funktioniert, weil ich’s nicht hingekriegt habe …
Also: http://www.zahnarzt-praxis-stuhr.de/zahnarzt-moordeich/ ist die Seite „Behandlungen“, hier sind die einzelnen Behandlungsmethoden schön ausklappbar gelistet.
Erste Ankerpunktverlinkungen gibt es von der Seite http://www.zahnarzt-praxis-stuhr.de/karies-wurzelbehandlung/ aus dem Text (im Moment die drei ersten Links, ich passe gleich mal noch die folgenden an, da stimmen die Links nicht).
Danke fürs Gucken
und herzliche Grüße
Katharina
Hallo,
sehr schönes Werkzeug …
… bis auf: die id auch als Sprungmarke zu verwenden, klappt nicht wirklich. Es klappt, wenn ich nur eine einzige id auch als Ankerpunkt anspringen will. Und da auch irgendwie nur im Feuerfuchs und Opera. IE springt an die richtige Stelle, öffnet den Textbereich aber nicht, Safari geht gar nicht. Wenn ich mehrere ids versuche, als Sprungmarken zu verwenden (Anwendungsbeispiel: FAQ), klappt es allenfalls mit einem der Links …
Eigentlich … ist eine id natürlich auch kein Ankerpunkt. Das kriege ich noch hin, das in der php-Datei zu ergänzen. Hilft mir aber nicht wirklich, vermutlich, weil die Seite noch nicht genügend geladen ist, wenn sie schon versucht, an den angegebenen Anker zu springen.
Überlegung: ich brauche einen Schnipsel Javascript im Header, der dafür sorgt, dass ich zum jeweiligen Anker gelange, nachdem die Seite geladen ist. Oder, vielleicht lässt sich auch ein Javascript-Link entsprechend formulieren?
Wie kriege ich das hin?
Ich kann kein Javascript – deswegen hole ich mir doch so schöne PlugIns … Danke!
Herzliche Grüße Katharina
@Katharina Mann: Gib uns bitte ein Beispiel-Link.
Wird es davon auch eine “PHP-Version” geben? Für die Einbettung direkt im Template.
Danke!
@Max: Kein sorgen, versuch:
<?php echo do_shortcode('[expand title="Affen"]Affen sind super schnell.[/expand]'); ?>Viel glück!