websitebaker testseite
Private Testseite WB 2.10.0 (Rev.66)

Wysiwyg-Tab

jQueryAdmin / LibraryAdmin / WB-eigenes jQuery

 

 

Wichtig: ab WB2.8.3 SP7 Rev.1646 muss dazu ein none eingetragen werden unter:
Optionen > Erweiterte Optionen > Servereinstellungen > bei Abschnitts-Anker Text
Ansonsten wird um jeden Anschnitt ein eigenes Div gelegt, was verhindert, dass das Tabs-Modul über mehrere Abschnitte arbeiten kann.

 

Wie geht das?

Man braucht das Modul jQueryAdmin oder LibraryAdmin und das Modul Wysiwyg-Tab

Nach Installation des Moduls Wysiwyg-Tab legt man eine Seite an und fügt pro gewolltem Tab nacheinander einen Abschnitt vom Typ Wysiwyg-Tab zu (auch nachträglich noch möglich).

Abschnitte - Sections

Der erste Eintrag in jedem Abschnitt muss ein Title-Tag (h-Tag, Überschrift2) sein wie z.B.

<h2>Dein Titel</h2>


Dieses wird vom Modul als Tab-Bezeichnung ausgelesen.

Editor Überschrift

 



Jetzt kommt das Modul jQueryAdmin / LibraryAdmin ins Spiel und stellt jQuery zur Verfügung.

jqueryadmin-libraryadmin

  Wichtig!   Wenn du jQueryAdmin nutzt, dann solltest du nirgends nochmal jQuery aufrufen.
Nicht aus dem Include-Ordner und nicht von code.google.com oder jquery.com oder ähnliches.
Überprüfe die index.php deines Templates, jQuery hat da nichts zu suchen.
jQueryAdmin stellt jQuery komplett bereit!

 



Admin-Tools > jQueryAdmin V2.x  > Preset erstellen

Nun vergibt man einen Namen wie z.B.: yourtab  für das Preset, hakt bei UI Komponenten Tabs und bei UI Themes Base an und speichert das Preset.



  Nun wählt man das eben erstellte Preset nochmal aus um den angezeigten Droplet-Aufruf zu kopieren.



Den kopierten Droplet-Aufruf fügt man sich irgendwo auf seiner Seite ein, egal ob im ersten Abschnitt oder einem extra Wysiwyg-Abschnitt oder code2(HTML oder Javascript).
Das Modul sollte nun funktionstüchtig sein.

Tipp:
Falls es nicht funktioniert einfach ein anderes Theme wählen (statt base).
In vielen Fällen enthält Theme base eine zu kleine css (sie sollte >30kb sein).

Hoe gaat dat?

Je hebt de module jQueryAdmin nodig en de module Wysiwyg-Tab

Na de installatie van de module Wysiwyg-Tab maak je een nieuwe pagina aan en daarin voeg je, al naargelang de gewenste Tabs, na elkaar een sectie van het type Wysiwyg-Tab toe (is ook naderhand nog mogelijk).



In elke sectie plaats je als eerste een titel-tag zoals bijvoorbeeld

<h2>Jouw titel</h2>

.
Deze wordt door de module als titel van de tab uitgelezen.




 

 

Nu komt de module jQueryAdmin / LibraryAdmin aan bod.
 
 

  Belangrijk!   Daarom mag jQuery dus NIET nogmaals ergens opgeroepen worden, bijvoorbeeld door:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br />
<script src="http://code.jquery.com/jquery-core.js"></script><br />
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-core.min.js"></script>
register_frontend_modfiles("jquery");  in de index.php van de template 



Admin-Tools > jQueryAdmin V2.x > Preset maken

Nu geef je een naam aan de preset (bijvoorbeeld yourtab) en vink je bij UI Componenten: Tabs en bij UI Themes: Base aan. Sla de preset dan op.



Kies nu de zojuist gemaakte Preset nogmaals uit om de weergegeven Droplet-code te kopiëren.



De gekopieerde Dropletcode voeg je ergens op je pagina in, maakt niet uit of je dat in de eerste sectie doet, of in een extra Wysigyg-sectie of in een code2 sectie (als HTML of Javascript)
Nu moet de module kunnen functioneren.
 

Howto

You will need the module jQueryAdmin and the module Wysiwyg-Tab.

After the installation of the Wysiwyg-Tab module make a page and add a section (Wysiwyg-Tab) for each tab you'd like to have. This can also be done afterwards.



The first text in each section should be a title-tag. I.e.

<h2>Your Title</h2>


This tag is used by the module to display the tab title.

 




Next comes the jQueryAdmin / LibraryAdmin. This module provides jQuery

 

  Important!   that is why jQuery is NOT to be called elsewhere i.e. by ways of:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br />
<script src="http://code.jquery.com/jquery-core.js"></script><br />
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-core.min.js"></script>
register_frontend_modfiles("jquery");  in head of the index.php in your template


Admin-Tools > jQueryAdmin V2.x > Make the Preset

Give the preset a name, for instance: yourtab and tick Tabs (under UI components) and Base (under UI Themes) and save the Preset.


Now choose the Preset you made this way again and copy the Droplet call.


Then paste the Droplet call somewhere on your page. It doesn't matter if you place it in the first section, in an extra Wysiwyg section or in a code2(HTML or Javascript) section.
The module should work now.

Hint:
If you have problems try another theme (instead "base").
In many cases theme "base" contains a to small css (should be >30kb).
 


Thanks to Hans van Meteren ( from the Forum ) for Translation

 

Wir verwenden Cookies zur Verbesserung der Usability. (Snippet Cookie Permission for WebsiteBaker)