NAVIGATION
This is an old revision of the document!
Table of Contents
jQuery SimpleTabs
Einfache Tabs basierend auf JQuery, mit denen CP´s gruppiert werden können.
Mittlerweile ist es mit der Aktivierung der Einstellung Register (Tabs) x im CP möglich, beliebige CP´s in Registern zu organisieren.
Dazu müssen lediglich die Namen in Register: der zusammenzufassenden CP´s identisch sein und alle CP´s im selben Abschnitt: Nr liegen.
Ein Abschnitt beinhaltet Register und ein Register beinhaltet CP´s.
jquery.jQsimpleTabs.js V1.0 07.03.12
Docu: –
Forum: CP´s in JQuery Tabs gruppieren
Autor: uwe367
wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de)
CMS Version: >= 1.4.4 (r381)
Version: V1.0
Dateiname: template/lib/jquery/plugin/jquery.jQsimpleTabs.js
Dateiname: template/inc_css/specific/jQsimpleTabs.css
Bedingung: → /config/phpwcms/conf.inc.php
- JS im Browser eingeschaltet
Backend:
Artikelübersicht:
Content-Parts:
CP "Text mit Bild" im Register 01
CP "Bilder <div>" im Register 02
HTML CP:
Initialisierung von JS und CSS.
Innerhalb des Artikels einen HTML-CP anlegen mit diesem Inhalt:
<!-- CSS: {TEMPLATE}inc_css/specific/jQsimpleTabs.css --> <!-- JS: jQsimpleTabs -->
Code:
In der Datei template/lib/jquery/plugin/jquery.jQsimpleTabs.js ablegen.
/************************************************************* * 07.03.12 * * JQuery Skript fuer das Gruppieren mehrerer CP´s innerhalb * eines Registers im selben Abschnitt. * **************************************************************/ $(function () { var tabContainers = $('.tab-content'); tabContainers.hide().filter(':first').show(); // Wenn ein bestimmtes Register beim Seitenaufruf geoeffnet werden soll //tabContainers.hide().filter('#tab-register-032').show(); $('.tab-navigation a').click(function () { tabContainers.hide(); // Geschwindigkeit zum oeffnen der Tabs in ms (hier 500) tabContainers.filter(this.hash).show(500); $('.tab-container ul.tab-navigation a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); // Wenn ein bestimmtes Register beim Seitenaufruf geoeffnet werden soll // }).filter('#tab-register-032').click(); //Die folgende Zeile schlieszt alle Tabs beim Seitenaufruf. //Soll der erste Tab geoeffnet sein, diese Zeile bitte loeschen oder auskomentieren. // $('.tab-content').hide(); });
CSS:
In der Datei template/inc_css/specific/jQsimpleTabs.css ablegen.
/************************************************************* * 07.03.12 CSS zu * JQuery Skript fuer das Gruppieren mehrerer CP´s innerhalb * eines Registers im selben Abschnitt. * **************************************************************/ .tab-container { min-height: 300px; border: 1px solid #ccc; width: 605px; 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: mediumorchid; /* #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: blueviolet; color: #FFFFFF; padding-top: 10px; } .tab-navigation li a:hover { background-color: indigo; /* #606163; */ color: #FFFFFF; padding-top: 10px; } .tab-navigation li a:focus { outline: 0 none; } .tab-content { overflow: hidden; border: 3px solid #606163; background-color: #D6D2DD; /* #DDDDDD; */ -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; margin-top: 3px; padding: 5px; width: 585px; } .tab-container-clearX { clear: both; }
