jQuery Tabs

Hier können Tipps und Tricks rund um die Verwendung von BlackCat CMS gepostet werden.
DG70
Beiträge: 174
Registriert: Fr 5. Dez 2014, 12:59

jQuery Tabs

Beitrag von DG70 »

Hallo zusammen,

auch wenn das vielleicht ganz einfach ist ... habe ich folgende Frage:
Wie kann ich jQuery Tabs im BC nutzen?
Ich möchte gerne die Tabs bei verschiedenen Inhalten im "Content" Bereich nutzen.

Abermals vielen Dank für eure Hilfe.

Gruss Dirk
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: jQuery Tabs

Beitrag von shadowcat »

Überall, oder nur auf bestimmten Seiten?
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
Morpheus
Beiträge: 1050
Registriert: Do 8. Aug 2013, 10:49
Kontaktdaten:

Re: jQuery Tabs

Beitrag von Morpheus »

Wenn ich mal Antworte

Ich würde ja sagen sowohl als auch oder mal so, mal so :lol:
Keiner ist unnütz, er kann immer noch als schlechtes Beispiel dienen!
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: jQuery Tabs

Beitrag von shadowcat »

Prinzipiell muß man natürlich zunächst mal jQuery und jQuery UI einbinden. Das kann man z.B. über das Template in der headers.inc.php machen. (Ich stelle gerade fest, daß es bei den globalen Kopfdateien in BC 1.1 eine Lücke gibt. Man kann nur Plugins auswählen, aber nicht nur Core und UI. Machen wir dann in 1.1.1.)

Das Grundprinzip bei Tabs ist ja folgendes (von der UI Homepage):

Code: Alles auswählen

<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
Man braucht also nur innerhalb einer WYSIWYG-Sektion seine Tabs so aufzubauen.

Davon abgesehen... ich glaube, creativecat wollte für sein MultiColumn-Plugin eine entsprechende Erweiterung bzw. eine Variante machen. Ich weiß aber nicht, ob das schon fertig ist.

Okay, ich gebe zu, das ist alles noch etwas hakelig. Ich weiß nur nicht so richtig, wie man es in den Core einbauen könnte, damit es leicht administrierbar ist. Eventuell über die Anker, das hieße dann, pro Modul auf der Seite einen Tab. Vorschläge sind wie immer willkommen. ;)
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
creativecat
Beiträge: 1430
Registriert: Mi 6. Feb 2013, 12:41
Kontaktdaten:

Re: jQuery Tabs

Beitrag von creativecat »

Ich mach die Variante gleich mal fertig... ist ja nicht allzu komplex ;-)
Sollte bis heute Abend stehen...
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: jQuery Tabs

Beitrag von shadowcat »

Super. Das ist dann vermutlich die einfachste Alternative. 8-)
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: jQuery Tabs

Beitrag von shadowcat »

So, wegen "nur UI auswählen im Backend" (v1.1.1):
Administration - SETTINGS.png
Administration - SETTINGS.png (42.57 KiB) 6361 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
creativecat
Beiträge: 1430
Registriert: Mi 6. Feb 2013, 12:41
Kontaktdaten:

Re: jQuery Tabs

Beitrag von creativecat »

Damit nicht alles durcheinander kommt und überall unterschiedliche Versionen herumgeistern, verlinke ich mal in den Thread für MultiColumn ;-)
Das ist noch eine Pre-Version für Version 2.0.
Aber ich habe hier mal eine Variante für jQuery Tabs mit reingepackt.
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: jQuery Tabs

Beitrag von shadowcat »

Für reine WYSIWYG-Inhalte funktioniert das mit dem MultiColumn-Modul schon mal super! Jetzt noch eine Accordion-Variante, dann hat man schon das meiste abgedeckt.

Für verschiedene Module auf einer Seite ist nach wie vor Handarbeit angesagt. Bei Bedarf bitte nochmal melden.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
creativecat
Beiträge: 1430
Registriert: Mi 6. Feb 2013, 12:41
Kontaktdaten:

Re: jQuery Tabs

Beitrag von creativecat »

Accordion ist in der neuen Version hinzugefügt...
Antworten