Gérome
18.03.2008, 09:26
Wie man die neuen Tabs aus den Profilseiten des vB 3.7 erweitern kann, ist mittlerweile gut dokumentiert, doch wie man diese Tabs auf eigenen Seiten - losgelöst von der Profilseite - nutzen kann, dazu konnte ich bislang nichts finden. Und dabei ist das vom vB gelieferte Framework derart mächtig, dass man diese Tabs mit geradezu erschreckender Einfachheit in eigenen Seiten verwenden kann. Und genau dies möchte ich in diesem Abriss zeigen.
Insgesamt werden wir mit drei Bausteinen hantieren: (1) Dem PHP-Script, welches die Seite serverseitig generieren wird, (2) dem Haupt-Template, welches die eigentliche Seite repräsentieren wird und (3) einem Template, welches jweils ein Tab repräsentiert.
Ich beginne mal mit den Templates. Zuerst das Haupt-Template. Im Wesentlichen handelt es sich um eines der Standard-Beispiele. Es gibt jedoch drei signifikante Erweiterungen:
Im Header wurde zusätzliches CSS für die Tabs integriert (vbulletin_tabctrl.css)
Ebenfalls im Header binden wir das Javascript für die Tabs ein (vbulletin_tabctrl.js)
Am Ende der Seite rufen wir das Javascript auf, welches dynamisch unsere Tabs zusammenbastelt (vBulletin.register_control)Das Template sieht in meinem Beispiel wie folgt aus:
HTML:
----------
Der Inhalt dieses Abschnitts ist nur für Lizenznehmer sichtbar, Sie werden derzeit jedoch nicht als Lizenzinhaber erkannt.<br />
<br />
Bitte öffnen Sie den <a href="http://members.vbulletin-germany.com/membersupport_priority.php">Kundenbereich</a>, tragen Sie Ihre E-Mail-Adresse ein, mit der Sie sich hier registriert haben und aktivieren Sie die Lizenzüberprüfung für http://www.vbulletin-germany.org.
----------
Wir sehen zudem den DIV-Block mit der ID "tabtest_tabs" - das ist unser Container für die Tabs. Da drin, nämlich in der Variablen "$tab_content" werden unsere Tabs landen. Der Aufruf von "vBulletin.register_control" referenziert ebenfalls auf genau diese ID ("tabtest_tabs"). Hier müssen wir aufpassen, in beiden Fällen den gleichen Bezeichner zu verwenden. Eine besondere Bedeutung kommt der Variablen "$active_tab" zu. Hier können wir angeben, ob und wenn ja welches Tab per Standard aktiviert sein soll. Wenn wir davon Gebrauch machen möchten, so muss diese Variable die ID des gewünschten Tabs enthalten (über die IDs der Tabs lasse ich mich gleich aus).
Und wie sieht das Template für jeweils ein Tab aus? Relativ simpel:
HTML:
----------
Der Inhalt dieses Abschnitts ist nur für Lizenznehmer sichtbar, Sie werden derzeit jedoch nicht als Lizenzinhaber erkannt.<br />
<br />
Bitte öffnen Sie den <a href="http://members.vbulletin-germany.com/membersupport_priority.php">Kundenbereich</a>, tragen Sie Ihre E-Mail-Adresse ein, mit der Sie sich hier registriert haben und aktivieren Sie die Lizenzüberprüfung für http://www.vbulletin-germany.org.
----------
Hier sehen wir drei wichtige Stellen, an denen sich Variablen finden:
$unique_blockbit_id
Jedes Tab muss eine eindeutige ID besitzen. Im PHP-Script generiern wir diese und weisen sie hier zu. Ich habe die Spezifikationen nicht vollends im Kopf, aber man ist auf der sicheren Seite, wenn man sich hier auf die Zeichen a-z und die Ziffern 0-9 beschränkt. Wer tatsächlich weitere Zeichen benötigt, sollte sicherheitshalber einen Blick auf die W3C-Spezifikationen werfen.
$caption
Simpel, das ist die Überschrift für das Tab
$content
Das ist das Zeuch, das im Tab steht.Tja ... im Wesentlichen war's das auch schon. Nun das PHP-Script, welches die Seite mit den Tabs generiert. Ich habe ein einfaches Array mit Testdaten deklariert, über welches die Tabs in einer Schleife definiert werden. In der Schleife selbst sehen wir die Bestückung der Variablen "$unique_blockbit_id", die für die eindeutige ID zuständig ist.
PHP:
----------
Der Inhalt dieses Abschnitts ist nur für Lizenznehmer sichtbar, Sie werden derzeit jedoch nicht als Lizenzinhaber erkannt.<br />
<br />
Bitte öffnen Sie den <a href="http://members.vbulletin-germany.com/membersupport_priority.php">Kundenbereich</a>, tragen Sie Ihre E-Mail-Adresse ein, mit der Sie sich hier registriert haben und aktivieren Sie die Lizenzüberprüfung für http://www.vbulletin-germany.org.
----------
Das daraus resultierende Ergebnis kann man sich im angefügten Screenshot ansehen.
Grüße,
Gérome
Insgesamt werden wir mit drei Bausteinen hantieren: (1) Dem PHP-Script, welches die Seite serverseitig generieren wird, (2) dem Haupt-Template, welches die eigentliche Seite repräsentieren wird und (3) einem Template, welches jweils ein Tab repräsentiert.
Ich beginne mal mit den Templates. Zuerst das Haupt-Template. Im Wesentlichen handelt es sich um eines der Standard-Beispiele. Es gibt jedoch drei signifikante Erweiterungen:
Im Header wurde zusätzliches CSS für die Tabs integriert (vbulletin_tabctrl.css)
Ebenfalls im Header binden wir das Javascript für die Tabs ein (vbulletin_tabctrl.js)
Am Ende der Seite rufen wir das Javascript auf, welches dynamisch unsere Tabs zusammenbastelt (vBulletin.register_control)Das Template sieht in meinem Beispiel wie folgt aus:
HTML:
----------
Der Inhalt dieses Abschnitts ist nur für Lizenznehmer sichtbar, Sie werden derzeit jedoch nicht als Lizenzinhaber erkannt.<br />
<br />
Bitte öffnen Sie den <a href="http://members.vbulletin-germany.com/membersupport_priority.php">Kundenbereich</a>, tragen Sie Ihre E-Mail-Adresse ein, mit der Sie sich hier registriert haben und aktivieren Sie die Lizenzüberprüfung für http://www.vbulletin-germany.org.
----------
Wir sehen zudem den DIV-Block mit der ID "tabtest_tabs" - das ist unser Container für die Tabs. Da drin, nämlich in der Variablen "$tab_content" werden unsere Tabs landen. Der Aufruf von "vBulletin.register_control" referenziert ebenfalls auf genau diese ID ("tabtest_tabs"). Hier müssen wir aufpassen, in beiden Fällen den gleichen Bezeichner zu verwenden. Eine besondere Bedeutung kommt der Variablen "$active_tab" zu. Hier können wir angeben, ob und wenn ja welches Tab per Standard aktiviert sein soll. Wenn wir davon Gebrauch machen möchten, so muss diese Variable die ID des gewünschten Tabs enthalten (über die IDs der Tabs lasse ich mich gleich aus).
Und wie sieht das Template für jeweils ein Tab aus? Relativ simpel:
HTML:
----------
Der Inhalt dieses Abschnitts ist nur für Lizenznehmer sichtbar, Sie werden derzeit jedoch nicht als Lizenzinhaber erkannt.<br />
<br />
Bitte öffnen Sie den <a href="http://members.vbulletin-germany.com/membersupport_priority.php">Kundenbereich</a>, tragen Sie Ihre E-Mail-Adresse ein, mit der Sie sich hier registriert haben und aktivieren Sie die Lizenzüberprüfung für http://www.vbulletin-germany.org.
----------
Hier sehen wir drei wichtige Stellen, an denen sich Variablen finden:
$unique_blockbit_id
Jedes Tab muss eine eindeutige ID besitzen. Im PHP-Script generiern wir diese und weisen sie hier zu. Ich habe die Spezifikationen nicht vollends im Kopf, aber man ist auf der sicheren Seite, wenn man sich hier auf die Zeichen a-z und die Ziffern 0-9 beschränkt. Wer tatsächlich weitere Zeichen benötigt, sollte sicherheitshalber einen Blick auf die W3C-Spezifikationen werfen.
$caption
Simpel, das ist die Überschrift für das Tab
$content
Das ist das Zeuch, das im Tab steht.Tja ... im Wesentlichen war's das auch schon. Nun das PHP-Script, welches die Seite mit den Tabs generiert. Ich habe ein einfaches Array mit Testdaten deklariert, über welches die Tabs in einer Schleife definiert werden. In der Schleife selbst sehen wir die Bestückung der Variablen "$unique_blockbit_id", die für die eindeutige ID zuständig ist.
PHP:
----------
Der Inhalt dieses Abschnitts ist nur für Lizenznehmer sichtbar, Sie werden derzeit jedoch nicht als Lizenzinhaber erkannt.<br />
<br />
Bitte öffnen Sie den <a href="http://members.vbulletin-germany.com/membersupport_priority.php">Kundenbereich</a>, tragen Sie Ihre E-Mail-Adresse ein, mit der Sie sich hier registriert haben und aktivieren Sie die Lizenzüberprüfung für http://www.vbulletin-germany.org.
----------
Das daraus resultierende Ergebnis kann man sich im angefügten Screenshot ansehen.
Grüße,
Gérome