Ajax Tabs

[lomion]

Hallo Contenido-Gemeinde,
ich bin gerade dabei eine Webseite zu realisieren, welche im Content 2 Tabs hat mit unterschiedlichem Inhalt. Diese Tabs sollen per Ajax anwählbar sein.
Ich dachte daran das man dann pro Menüpunkt zwei Artikel anlegt welche dann in die jeweiligen Tabs geladen werden. Nur wie realisiere ich das laden des zweiten Tabs, wenn der erste Tab den Startartikel anzeigt?
Hat da jemand eine Idee? Ich bin ziemlich ratlos und würde mich über jede Anregung freuen.
Liebe Grüße Lomion

[idea-tec]

Nachfrage für Dumme (wie mich):

1.) Man klickt links in der Navgation auf einen Kategorie
2.) Nun erscheint der Artikel 1 (Startartikel) dieser Kategorie

Wann und wieso oder aus welchem Grund, auf Basis welcher User-Aktion soll nun der 2te Artikel hier irgenwie und irgendwo angezeigt werden?

[lomion]

1.) richtig
2.) richtig

Wann und wieso oder aus welchem Grund, auf Basis welcher User-Aktion soll nun der 2te Artikel hier irgenwie und irgendwo angezeigt werden?

Im Contentbereich des Artikels hat man oben zwei Tabs: 1. Tab = Startartikel; 2.Tab = anderer Artikel
Das Ganze hat den Sinn das ich den Inhalt gerne übersichtlicher gestalten möchte. Im ersten Tab, alias Startartikel, sollen die Informationen allgemeiner dargestellt werden und im 2. Tab hat man dann die spezifizierten Informationen.
Und der User soll die Tabs per Mausklicks wechseln können.

[idea-tec]

und dafür willst du ajax benutzen? <<vollkommenungläubigmitdemkoppschüttel>>

also, du nimmst dir ein Modul und bastelst den bereich der tabs ins layout
dann noch ein modul-template erstellt im template eingefügt und in der kategorienkonfig der kategorie erzählt wo die "navigation" (deine 2 tabs) beginnen soll

war ich zu schnell? fragen, dann einfach antworten

[lomion]

hmm,
ich dachte an ajax, weil es keine neuen ladezeiten geben soll.
und wie meinst du das mit der navigation?
einfach ein modul mit ner fixen navi basteln und das ins template einbinden?

[kummer]

man kann tabs durchaus mit ajax realisieren. genau wie auch ohne.

hier mal ein beispiel ohne ajax: http://www.barelyfitz.com/projects/tabber/
und hier eines mit: http://wiki.github.com/madrobby/scriptaculous/tabs

ob man nun ajax verwendet oder nicht, wird primär von den eigenen präferenzen abhängig sein. und davon, wie gross die einzelnen inhalte der tabs sind. es kann durchaus sinnvoll sein, zunächst nicht alle informationen zu laden und das nachladen erst vorzunehmen, wenn die inhalte auch tatsächlich gefragt sind. das ist in der regel sowohl für den anwender besser als auch für den server (stichwort last).

wenn du ohne ajax arbeiten möchtest (variante 1) wirst du für jedes tab einen artikel erstellen (der dann jeweils NICHT startartikel ist) und für die darstellung eine artikelliste verwenden, die alle nicht-startartikel dann als tabs darstellt. daneben gibt es natürlich auch die möglichkeit, die inhalte für die tabs gleich in einem einzelnen cms_html mit hifle des tiny einzugeben. aber ich liebe den tiny nicht und er wird dir dabei vermutlich übel kopfschmerzen bereiten. und für einen 0815-redakteur ist das kein gangbarer weg.

bei der variante mit ajax muss du ohnehin für jedes tab bezeichnen, woher der inhalt kommt. dabei musst du einfach sicherstellen, dass wirklich nur die inhalte übertragen werden und nicht das ganze html (also kein html-, header- und body-tag). das vorgehen dazu ist: in der front_content.php die ausgabenpufferung einschalten und vor der ausgabe des inhalts des artikels die pufferung ausschalten, den puffer verwefen, den inhalt ausgeben und anschliessend die weitere ausführung des scriptes unterbinden.

die variante 1 (ohne ajax) ist sicher einfacher in der realisierung. die variante 2 dafür möglicherweise leistungsfähiger.

ich hoffe, das hilft dir ein wenig weiter.

gruss,
andreas

[kummer]

ach ja, nachtrag noch: wenn du ajax öfter einsetzen möchtest, lohnt es sich über folgende variante nachzudenken:

im layout einen marker für den eigentlichen inhalt setzen. z.b. so...

Code: Alles auswählen

<!-- content start -->

und am ende...

Code: Alles auswählen

<!-- content end -->

mit einem get-paramter könntest du dann code auslösen, der den inhalt (also alles zwischen diesen markern) isoliert und zurück gibt. z.b. front_content.php?idart=1&contentonly=true

dann ist die einbindung von inhalten mit hilfe von ajax ein klacks.

[idea-tec]

also du brauchst in jedem fall, vor allem, wenn du einen erneuten seitenaufruf oder ladezeiten verhindern willst für die 2te seite ein modul.
hier haben wir nun viele möglichkeiten:

- iFrame, hidden anzeigen und bei klick auf tab mittels js auf visible setzen
nein, was ich schreib ich hier eigentlich?
hast du denn der 2ten seite ein eigenes layout verpasst, so dass die ganze navigation, header, etc. nicht mit der seite mitgeladen wird?

Zur "navigationsvariante" von mir:
- du definierst ein neues modul und nennst es z.b. 2-Seiten-Tab
- Im Inputbereich gibst du die möglichkeit, dass für den 2ten Tab der Artikel angeben wird
(man könnte das auch dynamisch im outputbereich proggen, ist aber fehleranfällig, wenn du noch mehr seiten in der kategorie hast udn die 2te seite des tabs nicht die 2te seite der kategorie ist)

nun haben wir das modul, natürlich gehört hier ein html-template dazu, in dem du die optik und das verhalten der buttons definierst.
im layout noch einen neuen container definiert, und dann den bekannten weg für die integration eines neuen moduls gehens: also template aufrufen, neues modul einfügen, etc., etc.

[kummer]

mit einer artikelliste und dem tabber.js geht alles in einem aufwisch. ohne viele module. und mit nur einem ladevorgang.

mit der ajax-variante gibt es auch nur einen ladevorgang. allerdings pro tab. aber nur dann, wenn sich jemand den inhalt des tabs anschauen möchte. also nicht weiter schlimm.

[idea-tec]

ich benutze selbst das xajax-Framework und bin ein Verfechter der Ajax-Technologie!!!
ABER -> Im Projekt IMMER erst prüfen und SINNVOLL und SPARSAM einsetzen!!!

das was du da vorhast, macht man mit einem einem neuen Textmodul, in dem man die Tabs ins layout haut, und einen standardnamen für 2 divs verwendet
dann kloppt man den content in 1 artikel und schaltet sich die divs gegenseitig visible und hidden.
für sowas nutzt man kein ajax, das ist perlen vor die säue

[kummer]

kommt immer drauf an. wenn die darstellung des zweiten tabs z.b. umfangreiche und langsame queries absetzt, dann lohnt sich der einsatz von ajax allemal.

aber wie auch immer: die erste variante kommt ohne ajax aus und benötigt keine module, die nicht bereits verfügbar wären. nur das tabber.js einbinden und mit einer artikelliste die artikel so darstellen, wie das von tabber.js gefragt ist. der rest geht dann von selber.

1. für jedes tab einen artikel anlegen
2. einen startartikel anlegen, der ein artikllistenmodul verwendet
3. template so anpassen, dass die ausgabe so ist, wie von tabber.js gefragt
4. um ein tab hinzuzufügen, braucht lediglich ein artikel erstellt zu werden.
5. um ein tab zu entfernen, braucht lediglich der entsprechend artikel auf offline gestellt zu werden
5. es sind so viele tabs möglich, wie man gerne haben möchte

das ganze ist eher eine frage von minuten als von stunden.

[idea-tec]

so würde ich es machen....

@kummer:
es ändert sich dann doch aber nichts, wenn er mit ajax "nachlädt", denn das genau will er ja gar nicht ->

ich dachte an ajax, weil es keine neuen ladezeiten geben soll

das kann er nur, wenn er die 2te seit mit der ersten mitlädt, oder verstehe ich das falsch?
und da nutzt auch ajax nix, wenn die queries lahmarschig sind

[kummer]

ich auch. aber gegen ajax habe ich nichts. mir gefällts. und den kunden im allgemeinen auch. und dann will man ja auch zeigen, das man kann, was jeder kann...

[lomion]

uff,
danke für eure antworten.
ich werde mir beide varianten mal in ruhe anschauen und gucken welche für meinen zweck am sinnvollsten zu sein scheint.

@kummer: vielen dank für die ausführliche beschreibung. ich dachte evt an die nutzung des spaw-editors wo man beliebig viele tabs einbauen kann für diverse informationen, aber ich glaube das beißt sich dann mit den artikeln.

@idea-tec: auch danke für die konstruktive kritik an dem vorgehen mit ajax. das mit dem visible/hidden schalten von div-containern ist auch eine idee, allerdings müssten dann ja auch beide artikel gleichzeitig geladen werden, das heißt ich müsste das content-modul entsprechend umschreiben, oder?

ich bin nämlich kein freund von javascript ^_^ und da ajax javascriptbasierend ist setze ich diese beiden scriptvarianten nur sparsam ein. in diesem falle dachte ich das währe sinnvoll. ich werde das mal weiter durchkauen.
für weiteren input bin ich jedoch immer gerne zu haben.
gruß lomion

PS: @kummer: wow, danke für diese auflistung. ich denke das hilft mir weiter.

[kummer]

es ändert sich dann doch aber nichts, wenn er mit ajax "nachlädt", denn das genau will er ja gar nicht ->

ich dachte an ajax, weil es keine neuen ladezeiten geben soll

das kann er nur, wenn er die 2te seit mit der ersten mitlädt, oder verstehe ich das falsch? und da nutzt auch ajax nix, wenn die queries lahmarschig sind

zwei computer, eine meinung! vermutlich hat er gedacht, dass er zwei artikel laden müsse, um diese gleichzeitig als tabs darzustellen. genaues weiss ich halt auch nicht.