CP´s in JQuery Tabs gruppieren

[Uwe367]

Moin zusammen,

Ich habe eine Lösung gefunden wie man CP´s in JQuery Tabs gruppieren kann, und zwar OHNE ein zusätzliches Frontend Render Script. Wenn Interesse an meiner Lösung besteht werde ich sie gerne hier einstellen.
Achja.. ein Beispiel gibts auch zu sehen.... http://playground.uwe367.de/index.php?tabs
Getestet habe ich das ganze in Firefox, Explorer, Chrome, Opera und Safari für PC, jeweils die neuesten Browser.

Gerade mal getestet... Sogar der IE 6 spielt da noch mit

Gruß Uwe

[update]

Wenn Interesse an meiner Lösung besteht

Aber immer

[Uwe367]

Ich habe das ganze in etwa so gelöst wie beim Accordion http://forum.phpwcms.org/viewtopic.php? ... 15#p130008

Zunächst einen Customblock {TABS} erstellen. In diesen Block bei der Vorlage werden folgende Inhalte eingetragen:

Code: Select all

{TABS}
<!-- CSS: {TEMPLATE}inc_css/specific/jquery-tabs.css -->
<!-- JS: {TEMPLATE}lib/jquery/plugin/jquery-tabs.js -->

Die Pfade zu den Dateien können abweichen, je nachdem wo ihr sie speichert.

Weiterhin muß bei der Vorlage im Drop Down Menü JQuery ausgewählt werden. Auf meinem Server ist dies noch Jquery1.4.
Außerdem muß der RT {TABS} noch eingetragen werden. Bei mir steht dieser zur Zeit noch bei der Vorlage in Haupt unmittelbar nach {CONTENT} aber auch hier gibt es andere Möglichkeiten diesen zu plazieren.

Als nächstes benötigen wir ein angepasstes JS und CSS:

jquery-tabs.js: Diese Datei nach template/lib/jquery/plugin/jquery-tabs.js speichern

Code: Select all

$(function () {
			var tabContainers = $('.tab-content');
			tabContainers.hide().filter(':first').show();
			
			$('.tab-navigation a').click(function () {
				tabContainers.hide();
				tabContainers.filter(this.hash).show(500);
				$('.tab-content .tab-navigation a').removeClass('selected');
				$(this).addClass('selected');
				return false;
			}).filter(':first').click();
		});

jquery-tabs.css: Diese Datei nach template/inc_css/specific/jquery-tabs.css speichern

Code: Select all

.tab-container {
	min-height: 300px;
	border: 1px solid #ccc;
	width: 518px;
	padding: 0 25px 10px 25px;
}
.tab-navigation {
    list-style: none outside none;
    margin: 20px 0 12px 10px;
    padding: 0;
}
.tab-navigation li {
    display: inline;
}
.tab-navigation li a {
    background-color: #8EA0BA;
    color: #fff;
    padding: 10px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    -moz-border radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-decoration: none;
}
.tab-navigation li a.selected {
    background-color: #8EA0BA;
    color: #FFFFFF;
    padding-top: 10px;
}
.tab-navigation li a:hover {
    background-color: #606163;
    color: #FFFFFF;
    padding-top: 10px;
}
.tab-navigation li a:focus {
    outline: 0 none;
}
.tab-content {
    border: 3px solid #606163;
    background-color: #DDDDDD;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    margin-top: 3px;
    padding: 5px;
    width: 500px;
}
.tab-container-clear {
	clear: both;
}

Werden die Dateien in diesen Verzeichnissen gespeichert, braucht man die Pfade im Customblock nicht zu verändern. Andernfalls sind die Pfade entsprechend anzupassen.

Nun im BE einen neuen Artikel, oder in einem vorhandenen Artikel einige CP´s anlegen deren Ausgabe im Block TABS erfolgt.

Einen Haken bei Register (Tabs) setzen. Bei Register eine Überschrift angeben, diese wird später die Überschrift des Tabbuttons. Bei Abschnitt ist hier eine 1 einzutragen. Warum werde ich später erklären.

In meinem Beispiel habe ich 3 Tabs, die mit unterschiedlichen Inhalten (verschiedene CP´s) gefüllt sind, angelegt.


Somit ergibt sich im Frontend folgendes Bild:


Nun zu den Nummerierungen der Abschnitte.
Trage ich bei Abschnitt z.B. eine 2 ein, so wird eine neue Reihe mit Tabs begonnen.




Anwendungsbeispiel:
Es soll ein neuer Tab mit der Überschrift Register 1 erstellt werden.
In dem jeweiligen Contentpart muß die Funktion Register (Tabs) angehakt werden.
Im Feld Register wird nun Register 1 eingetragen, bei Abschnitt wird eine 1 eingetragen.
Somit wird ein neuer Tab Register 1 erzeugt.
Bei allen CP´s, die in diesem Tab erscheinen sollen, muß nun ebenfalls im Feld Register Register 1, und bei Abschnitt 1 eingetragen werden.

Soll ein neuer Tab in der selben Reihe erzeugt werden, z.B. Register 2, so ist im Feld Register Register 2, Abschnitt 1 einzutragen.
Somit wird dann ein neuer Tab, nämlich Register 2, neben dem Tab Register 1 erstellt.


Viel Spaß damit

[update]

Ja, prima!
Den CUSTOM_BLOCK braucht es allerdings wohl nicht zwingend, sollte auch ohne gehen, solange immer gleiche Abschnitte im selben Zielcontainer landen. Hast Du das mal probiert?
Dann nämlich ist die Freiheit beim Platzieren größer
Siehe im Übrigen auch noch mal http://forum.phpwcms.org/viewtopic.php?p=132163#p132163 wegen der selbigen...

[Uwe367]

Ich denke du meinst den Beitrag von pepe oder?
Der schreibt allerdings nichts davon dass dieser Block nicht gebraucht wird sondern dass der RT für diesen Block auch an anderer Stelle, beispielsweise direkt in einem Template oder in einem vorgeschalteten HTML CP untergebracht werden könnte. Diesen dann in CONTENT ausgeben und somit würden auch die TABS letzendlich auch in CONTENT, oder eben wo man will, ausgegeben. Das macht die ganze Sache natürlich wesentlich flexibler.
Man könnte das ganze auch komplett (RT, JS & CSS) in einen HTML CP packen, aber wenn du die Tabs auf mehreren Unterseiten verwenden möchtest wirds ein wenig mehr Arbeit da du jedesmal einen HTML CP vorschalten mußt

Und da bietet sich doch ein CB bestens an. Man baut den RT einmal dort ein wo man ihn haben möchte und den Rest im CP (Block TABS auswählen) und fertig
Oder habe ich dich nun völlig falsch verstanden?

[pepe]

Solange deine TABs immer an der selben Stelle im Layout erscheinen soll, ist deine Lösung absolut OK

Ich wollte mit der variablen Einbindung - per HTML-Template - lediglich erreichen, dass ich mich bei Bedarf an jeder beliebigen Stelle des Layouts rein quetschen kann... z.B. auch in den Seitenspalten.

Das können dann auch EDITOREN nutzen, die keinen Zugang zum ADMIN-Bereich bekommen haben!

Ausserdem kann ich die jeweiligen Temples dann auch schnell mal in andere Installationen kopieren und muss nicht immer überlegen, wie denn noch die verwendete Klassen heissen und wie die formatiert sein müssen.

Mein ganz pers. "modulares" phpwcms Konzept... perfekt für "Schnellschüsse"; eine komplette Internet-installation in 2-3 Stunden!

[update]

Und da bietet sich doch ein CB bestens an. Man baut den RT einmal dort ein wo man ihn haben möchte und den Rest im CP (Block TABS auswählen) und fertig
Oder habe ich dich nun völlig falsch verstanden?

Nein

Die (variable) Ausgabe über einen per HTML-CP reingestreuten CUSTOM_BLOCK hat mM den unschätzbaren Vorteil, dass ich dann nur diesen einen HTML-CP umzuhängen brauche, damit die ganze TAB-Arie an einer anderen Stelle erscheint (den anderen siehe pepe: "....an jeder beliebigen Stelle des Layouts rein quetschen....")

Solange deine TABs immer an der selben Stelle im Layout erscheinen soll...

Dann wäre Deine Lösung (wegen der Editoren) allemal vorzuziehen!

[Uwe367]

Kleiner Nachtrag.. vergaß ich gestern dazu zu schreiben

Die Breite der Tabbuttons passt sich automatisch der Länge der Überschrift an.

[pepe]

Habe deinen Vorschlag mal 1:1 nachgebaut...
allerdings habe ich das Problem, dass keine Folge-Contentparts in den Inhaltsbereich des Tabs angehängt werden. Nur der Inhalt des WYSIWYG-Feldes des jeweiligen TABS wird angezeigt.

Alle Folge PCs werden hinter die Tabs geschrieben

[Uwe367]

Komisch pepe...

Ich habe gerade noch auf meienr Playground Seite ne Anleitung in Tabs geschrieben. Das einzige was ich nun anders machte.. Ich habe den RT in einen HTML CP gesetzt als bei der Vorlage in Haupt zu schreiben und bei mir klappt das. Ich schau mir die Anleitung nochmal an..

[update]

Alle Folge PCs werden hinter die Tabs geschrieben

Das Geheimnis lautet: Register (= Reiter oder Tab, mehrere CPs mit dem gleichen Registernamen kommen in einen Tab) und Abschnitt (= mehrere CPs mit der gleichen Abschnittsnummerierung kommen in die selbe Tab-Gruppe)
oder irre ich mich da?

[pepe]

Na, das ist aber wirklich ein Geheimnis... da kommt doch keine Sau drauf, mal ehrlich

OK, bleiben wir bei der Geheimniskrämerei... ich werds auf keinen Fall weiter sagen, versprochen


OK, jetzt klappst!
Aber das sollte in der Beschreibung unbedingt angesprochen werden!


Was mich aber noch stört... bei jedem Klick auf einen TAB wird die Seite komplett neu geladen... fährt also der Browserinhalt nach oben!
Das ist suboptimal, wenn die Tabs etwas weiter unten im Artikel erscheinen!!!

[Uwe367]

Mal angenommen du hast bei einem CP Register (Tabs) angehakt.
Bei Register gibst du z.B. "Register 1" ein, bei Abschnitt trägst du eine "1" ein, die Ausgabe setzt du auf den Block TABS. Damit wird ein neuer Tab Register 1 erzeugt. Alle CP´s die in diesen Tab sollen müßen ebenfalls mit "Register 1" und Abschnitt "1" beschriftet werden.

Erstellt du nun ein neues Register, z.B. "Register 2", Abschnitt "1", so wird in der selben Reihe ein weiterer Tab erzeugt. Alles was da rein soll muß im CP mit "Register 2", Abschnitt "1" beschriftet werden.... usw...

Das hätte ich vielleicht etwas ausführlicher beschreiben sollen..

Hoffe ich habe dich richtig verstanden...

[pepe]

Alle CP´s die in diesen Tab sollen müßen ebenfalls mit "Register 1" und Abschnitt "1" beschriftet werden.

Genau das ist der KNACKPUNKT... wenn man das weiss.. klappst ja auch sofort

[Uwe367]

Asche über mein Haupt... Ich hoffe ihr verzeiht mir. Ich werds sofort in die Anleitung eintragen.
Was ich aber nicht verstehe ist dass bei dir die Seite jedesmal komplett neu geladen wird sobald du einen Tab anklickst.