phpwcms Support Forum

Hallo zusammen,

Ich habe dieses einfache jquery Accordion im Netz gefunden und es als Template für den CP Register Tabs umgebaut bzw. entsprechend angepasst.

1. In der Vorlage jquery1.4 wählen, Haken bei immer laden setzen.

2. Template für den CP Register Tabs:
Die Datei my_jquery_accordion.tmpl mit folgendem Code erstellen und nach template/inc_cntpart/tabs kopieren.

Code: Select all

<!--TABS_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TABS_ENTRIES]
<div id="accordion">{TABS_ENTRIES}</div>
<!-- CSS: {TEMPLATE}inc_css/specific/my_jquery_accordion.css -->
<!-- JS: $(document).ready(function() {
	 
	//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
	$('.accordionButton').click(function() {

		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$('.accordionButton').removeClass('on');
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$('.accordionContent').slideUp('normal');
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			  
			//OPEN THE SLIDE
			$(this).next().slideDown('slow');
		 } 
		  
	 });
	 
	 /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
	$('.accordionButton').mouseover(function() {
		$(this).addClass('over');
		
	//ON MOUSEOUT REMOVE THE OVER CLASS
	}).mouseout(function() {
		$(this).removeClass('over');										
	});
	
	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	  
	

	
	
	/********************************************************************************************************************
	CLOSES ALL S ON PAGE LOAD
	********************************************************************************************************************/	
	$('.accordionContent').hide();

}); -->


[/TABS_ENTRIES]
<!--TABS_END//-->

<!--TABS_ENTRY_START//-->
[TABCONTENT]
	<div class="accordionButton">{TABTITLE}</div>
	<div class="accordionContent">
		[TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
		[TABTEXT]{TABTEXT}[/TABTEXT]
	</div>
[/TABCONTENT]
<div style="clear: left;"></div>
<!--TABS_ENTRY_END//-->

3. Die CSS Datei:
Die Datei my_jquery_accordion.css mit folgendem Code erstellen und nach template/inc_css/specific kopieren.

Code: Select all

#accordion {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

.accordionButton {	
	width: 800px;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	background: #003366;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	}
	
.accordionContent {	
	width: 800px;
	float: left;
	_float: none; /* Float works in all browsers but IE6 */
	background: #95B1CE;
	}
	
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on {
	background: #990000;
	}
	
.over {
	background: #CCCCCC;
	}

4. Einen CP Register Tabs anlegen und als Vorlage my_jquery_accordion.tmpl auswählen.

Das wars dann auch schon

Viele Grüße
Uwe

Kann man irgendwo ein Beispiel sehen... um zu entscheiden, ob ichs "brauchen" kann

Jaaaa, ich auch, ich auch, ich auch, ich auch, ich auch, ich auch, ich auch, ich auch, ich auch, ich auch

Habe eben mal damit begonnen meine Playground-Seite ins Leben zu rufen.
Momentan läuft noch das phpwcms Standart Template, aber das wird sich bald ändern

Hier ein einfaches Beispiel für das Accordion:
http://playground.uwe367.de

Viele Grüße
Uwe

Erst heute komme ich dazu, hier eine kleine Verbesserung einzubauen, die in allen Browsern funktionieren müßte.
Da ich auch häufig mit Spalten arbeite, die an die Website nur einmalig anzupassen sind, hat mich es gestört, auch die RegTabs anpassen zu müssen, vor allem, wenn man diese sowohl im Content als auch nur in einer Spalte verwendet.

Mit folgender (allgemeiner!) CSS funktinoert dies- auch im IE6. Eine Anpassung an die Contenbreite ist damit nicht mehr notwendig.

Code: Select all

    #accordion { width: 100%; }

    .accordionButton {   
    background: none repeat scroll 0 0 #AAF500;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
    float: left;
    _float: none;  /* Float works in all browsers but IE6 */
    width: 100%;
       }
    
    .accordionContent {   
    background: none repeat scroll 0 0 #95B1CE;
    float: left;
   _float: none; /* Float works in all browsers but IE6 */
    width: 100%;   }
       
    /***  EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS  ***/

    .on {  background: #990000;  }
       
    .over { background: #CCCCCC;  }

SPALTE_L ..............................mainCONTENT..........................SPALTE_R

In der Zwischenzeit habe ich das jQuerry-Accordion auf meiner demnächst freizuschaltenden neuen Website etwas verbessert, hat mich ehrlich gesagt Nerven gekostet, da ich nur sehr wenig Ahnung von JavaScript habe.
Mich hat gestört, dass die Überschrift in der Buttonzeile soweit links steht, mit CSS-padding war der Sache nicht beizukommen. Ergo habe ich den letzten Teil des *.tmpl
Wie folgt ergänzt mit dem RT {SPACER ..}:

Code: Select all

    <!--TABS_ENTRY_START//-->
    [TABCONTENT]
       <div class="accordionButton">{SPACER:40x15}{TABTITLE}</div>
       <div class="accordionContent"> .....

Bei Testen mit Firebug und dem temporären Einsetzen sah alles gut aus, aber bestimmte CSS-Kurz-Notationen wie

background: farbe url (/.../...) 0 0 repeat-no scroll

etc. in der /template/inc_css/specific/meineJqerryx-Acordion.css wurden kurzerhand einfach durch das Script entfernt

Dann die Idee, diese Notiationen aufzutrennen (wie ich es gerne auch noch für den IE6 speziell mache) - und schwupps, waren die gewollten Effekte mit einem entsprechend dynamisch eingesetzten Grafik vor der Überschrift enthalten.

Ein Blick mit dem FireBug zeigte mir den Wechsel von accordionButton on auf accordionButton on over an und ein weiterer Blick in mein CSS-Handbuch/ Klassenselektoren verriet mir die Lösung um drei Zustände mit drei Grafiken darzustellen. Hier die *.css dazu:

Code: Select all

    #accordion {
    /*margin-left: auto;
    margin-right: auto;*/
    width: 100%;
       }

.accordionButton {
    background-color: #FFA500;
    background-image: url("/picture/point.gif");
    background-position: 5px 3px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
    float: left;
    font-weight: bold;
    height: 22px;
    letter-spacing: 2px;
    padding: 4px 0;
    width: 100%;
    _float: none;  /* Float works in all browsers but IE6 */
       }
.accordionButton h4 {padding-left: 40px;}
.accordionContent {
    background: none repeat scroll 0 0 #F2F2F2;
    float: left;
    width: 100%;
   _float: none; /* Float works in all browsers but IE6 */
   }
/* ---------------- Ergänzungen zur Textformatierung ---------------------*/
.accordionContent p
   {
   padding-left: 20px;
   }
.accordionContent h4
   {
   padding-left: 20px;
   }

/***  EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS  ***/
.on {
    background-color: #EEE8AA;
      background-image: url("/picture/open_activ.gif");
      background-position: 5px 3px;
      background-repeat: no-repeat;
    }
.over {
      background: #EEE8AA;
      background-image: url("/picture/open.gif");
    background-position: 5px 3px;
      background-repeat: no-repeat;
      }
/* ----------------- Ergänzung mit Klassen-Punktnotation -----------------------*/
.accordionButton.over.on {
      background-image: url("/picture/close.gif");
      background-position: 5px 3px;
      background-repeat: no-repeat;
      background-color: #FFF8DC;
      }

Einziger Wermutstropfen, der IE 6 mag das nicht so richtig, ist aber sowieso ein Auslaufmodell!

Es gibt zwar keine Fehlermeldungen, aber die CSS-Darstellung funktioniert nicht so wie gewollt, trotzdem aber bedienbar!

Frage 1: wie kann man das Aufblitzen der Grafiken weicher gestalten
Frage 2: Wie kann man jetzt auch noch andere CPs (Text mit Bild) integrieren? Die jetzige Lösung läßt nur unschön ein Bild integrieren, das es nur optisch nicht physisch verkleinert werden kann. Bildgalerien lassen sich mittels SHOW_CONTENT in den aktuellen Content einbinden.

Warum legst Du den Button nicht in die Überschrift?

Code: Select all

#accordion .accordionButton h4 {...

(Natürlich müsste dann das h4 auch im Template auftauchen)

Hallo Kukki,

Ich hoffe daß ich deine zweite Frage richtig verstanden habe.

Zum einfügen anderer CP´s in das Accordion lege ich eine versteckte Kategorie an (z.B. Inhalte Accordion).
In diese Kategorie kommt alles das rein was in den Accordion Tabs dargestellt werden soll.

Wenn ich diese Inhalte erstellt habe lege ich einen neuen CP Register Tabs (im öffentlichen Bereich) an und trage im Textfeld des Editors {SHOW_CONTENT:CP,ID des CP} ein. Damit werden dann die CP´s aus der verstecketen Kategorie eingebunden. Auf diese Weise kannst du jeden beliebigen CP im Accordion verwenden sowie auch mehrere CP´s in einem Accordion Tab unterbringen.
Mit {SHOW_CONTENT:CPA,ID des Artikels} kannst du ganze Artikel inkl. der darunter liegenden CP´s wiedergeben.

Was ich allerdings nicht ganz verstehe ist daß du die Überschriften in den Buttonzeilen nicht mittels CSS eingerückt bekommst.
Bei mir sieht das so aus und es klappt prima:

Code: Select all

.accordionButton {	
	width: 580px;
	margin: 2px 0 0 0;
	padding: 3px 0 3px 30px;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
   border: 1px solid #ECF7FC;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #ECF7FC;
	background: #2369AD;
	background-image:url(../../../images/closed.png);
	background-repeat:no-repeat;
	background-position: 10px;
	cursor: pointer;
	}

Hoffe dass ich helfen konnte...

Gruß Uwe

EDIT:
Ich habe in dem Accordion auf meiner Playgroundseite mal ein paar Beispiele für die Integration verschiedener CP´s eingebaut.
http://playground.uwe367.de/

Ja klar Uwe, mit {SHOW_CONTENT ...} bekommt man als Websitebastler fast alles rein, aber mir schwebte eher eine Lösung vor, die von einem unwissenden Betreiber selber in die entsprechenden Tabs eingebaut werden kann, wenigtens die eierlegende Wollmilchsau "Text mit Bild" bzw. "floating-Text mit Bild"

Dann drösel den generierten Quelltext von der neuen Funktion "CPs gruppieren" auf und schreibe ein Script was den ganzen Kram dann accordion-gerecht aufbereitet.
CPs gruppieren: Tabs

So brauchst du nur zwei HTML CPs einmal oben und unten, dazwischen kannst du alle möglichen CPs packen wenn man es schlau anfängt.

Knut

flip-flop wrote:Dann drösel den generierten Quelltext von der neuen Funktion "CPs gruppieren" auf und schreibe ein Script was den ganzen Kram dann accordion-gerecht aufbereitet.
CPs gruppieren: Tabs

So brauchst du nur zwei HTML CPs einmal oben und unten, dazwischen kannst du alle möglichen CPs packen wenn man es schlau anfängt.

Knut

Ich habe gestern Abend deinen Beitrag als Anreiz genommen und noch einige Stunden am PC verbracht und dabei dein Script
http://www.phpwcms-howto.de/wiki/doku.p ... te/cp-tabs

als Vorlage verwendet, das ganze für das jquery Accordion tauglich zu machen und es funktioniert schonmal auf meinem Localhost.
Setze ich einen Haken im CP bei Register Tabs, so wird, wenn ich bei Register eine Überschrift und einen Abschnitt eintrage, automatisch ein neuer Accordion Tab erstellt. Alle CP´s in diesem Artikel, die mit der gleichen Überschrift und dem selben Abschnitt erstellt werden, werden in diesem Tab dargestellt.

Ich werde heute Abend noch ein paar Anpassungen vornehmen und das ganze dann hier einstellen. Nun ruft aber erstmal das reale Leben und die Arbeit.

Gruß Uwe

Lass Dich überraschen ....

Bei Zeiten were ich mir diese animierte Bottonänderung auch noch mal durch den Kopf gehen ....

kukki wrote:Lass Dich überraschen ....

Nunja... als Überraschung würde ich das ganze nun nicht bezeichnen, vielmehr als einen Grundansatz

Wie ich heute morgen bereits schrieb habe ich mir das Script von Knut als Vorlage genommen (Ich hoffe das war legitim).
Weiterhin möchte dazu sagen daß ich mit der Materie PHP erst seit wenigen Tagen auseinandersetze und daher eventuell Fehler in den Scripten vorhanden sein können. Daher bitte ich die Profis unter euch, das ganze nochmals auf Herz und Nieren zu prüfen, wobei ich nachher, am Ende dieses Beitrages auch noch die eine oder andere Frage habe.
Auf die folgend beschriebene Weise lassen sich CP Tabs im jquery Accordion gruppieren.
(Getestet nur auf meinem Localhost)

So.. nun aber zum eingemachten:

Als erstes sollte in der conf.inc.php dieser Schalter gesetzt werden.

Code: Select all

$phpwcms['allow_ext_render'] = 1;

Die Datei jquery-accordion php:
Diese ablegen in template/inc_script/frontend_render

Code: Select all

<?php
/**
 ********************************************************************
 * KH 13.12.2010: For CP Reg Tabs since r409

 ********************************************************************/
 
// ------------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// ------------------------------------------------------------------
 
 
 
// Is the switch "tabs: " in a CP active?
if(strpos($content["all"],'id="TABBOX') !== false) {
 
    // Load the CSS file
    $block['css']['jquery-accordion'] = 'specific/jquery-accordion.css';
	
	    // Load the required "plugins"
    initJSPlugin('jquery-accordion');
 
    // Load the runtime JS into the head area
    $js['js']['jquery-accordion'] = 'lib/jquery/plugin/jquery-accordion.js';
 
 
    // Customize the html source (add the class "tab-it")
    $content["all"] = str_replace('tab-item-','tab-it tab-item-',$content["all"]);
    // Insert the class tab-regcard between last </ul> and first <li>
    $content["all"] = preg_replace('/\<ul class="tab-navigation"\>(.*?)\<\/ul\>/s','<ul class="tab-navigation">$1</ul>'.LF.'<div class="tab-regcard">', $content["all"]);
    // close the the inserted class tab-regcard behind the last </li>
    $content["all"] = str_replace('<div class="tab-container-clear"></div>','</div>'.LF.'<div class="tab-container-clear"></div>',$content["all"]);
 
}
?>

Die Datei jquery.jquery-accordion.js.
Diese ablegen in template/lib/jquery/plugin

Code: Select all

$(document).ready(function() {
	 
	//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
	$('.tab-navigation').click(function() {

		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$('.tab-navigation').removeClass('on');
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$('.tab-regcard').slideUp('normal');
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			  
			//OPEN THE SLIDE
			$(this).next().slideDown('slow');
		 } 
		  
	 });
	  
	
	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
	$('.tab-navigation').mouseover(function() {
		$(this).addClass('over');
		
	//ON MOUSEOUT REMOVE THE OVER CLASS
	}).mouseout(function() {
		$(this).removeClass('over');										
	});
	
	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	
	/********************************************************************************************************************
	CLOSES ALL S ON PAGE LOAD
	********************************************************************************************************************/	
	$('.tab-regcard').hide();

});

Die Datei jquery-accordion.css
Diese ablegen in template/inc_css/specific

Code: Select all

.tab-regcard {
    background-color:#ccccee;
    position:relative;
    height:215px;
    width:450px;
    padding:5px 5px 5px 10px;
    margin-bottom:10px;
    border: 1px solid #9596ef;
    margin-top: -1px;
    z-index: 10;
}
.tab-content {
/*    background-color:#ddd; */
    height:215px;
    position:absolute;
    width:450px;
    overflow:hidden;
 
}
.tab-content img {
    border:none;
}
 
.tab-navigation {
    margin-left:0;
    margin-bottom:0;
    padding: 0 0 5px 0;
    z-index: 20;
    position:relative;
}
.tab-navigation li {
    background-color:transparent;
    display:inline;
    float:none;
    list-style:none;
}
.tab-navigation li a {
    background-color:#9596ef;
    color:#fff;
    font-weight: bold;
    display:inline;
    height:auto;
    padding:5px 20px 5px 20px;
    text-decoration:none;
    width:auto;
    border: 1px solid transparent;
    border-bottom: none;
    z-index: 20;
}
.tab-navigation li.active a {
    background-color:#ccccee;
    color:#000;
    border: 1px solid #9596ef;
    border-bottom: none;
}

Die jquery-accordion.css ist identisch mit dieser http://www.phpwcms-howto.de/wiki/doku.p ... /cp-tabs?s also sollte diese nach den eigenen Bedürfnissen angepaßt werden.
Weiterhin habe ich Knut´s Copyright in der php Datei erhalten, da diese als Vorlage für mein Vorhaben diente und ich diese eigentlich nur entsprechend verändert habe.

Die Funktion sieht zur Zeit so aus:
In einem CP setzt man den Haken bei Register Tabs.
Bei Register trage ich den Buttontext (z.B. Tab 1) ein.
Bei Abschnitt trage ich 1 ein.
Somit wird im FE automatisch ein neuer Accordion Tab Tab 1 erzeugt.
Alle weiteren CP´s, die mit diesem Buttontext und demselben Abschnitt versehen werden, werden nun in diesem Tab angezeigt.

Für einen weiteren Tab gibt man in einem CP bei Register eine andere Bezeichnung (z.B. Tab 2) ein.
Ein weiterer Tab Tab 2 wird erzeugt usw...

Tja.. das wars auch eigentlich schon. Der Rest ist eigentlich nur ausprobieren wie das ganze läuft und entsprechend anzupassen.
Vielleicht konnte ich dem einen oder anderen einen Lösungsansatz für diese Vorgehensweise bieten und schlagt mich bitte nicht zu sehr da es keine perfekte Lösung ist

So.. und nun hätte ich noch eine Frage:
Ich benannte die Datei jquery.jquery-accordion.js zuerst jquery-accordion.js und wie man im phpscript sieht, ist diese auch als solche eingebunden.
Allerdings wurde jquery-accordion.js nicht gefunden und im Quelltext der gerenderten Seite war folgendes zu sehen:

Code: Select all

<script type="text/javascript" src="template/lib/jquery/plugin/jquery.jquery-accordion.js"></script>

Da ich nicht wußte woher dies rührt habe ich die Datei einfach nach dem gerenderten Quelltext umbenannt und prompt wirde sie auch gefunden, obwohl sie im Script anders deklariert ist.
Mich würde nun interessieren woher dieses, für meine Begriffe merkwürdiges Verhalten, rührt.

Und wie gesagt.. dies ist KEINE perfekte Lösung, vielleicht aber ein Lösungsansatz.

Viele Grüße
Uwe

So... nachdem ich heute einen längeren Dialog mit Knut (flip-flop) hatte und er mich dabei sehr unterstützte das Script alltagstauglich und einsatzfähig zu machen, kommt hier nun die Final Version.
Zur besseren Übersicht habe ich die Dateien umbenannt.

Als erstes diesen Schalter in der conf.inc.php setzen

Code: Select all

$phpwcms['allow_ext_render'] = 1;

Die Datei jquery-cptab-accordion.php:
Diese speichern in template/inc_script/frontend_render

Code: Select all

<?php
/**
********************************************************************
* KH 13.12.2010: For CP Reg Tabs since r409
* Uwe367: JQuery CP Tab Accordion
* http://forum.phpwcms.org/viewtopic.php?f=28&t=21049&p=129856#p129856
********************************************************************/

// ------------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// ------------------------------------------------------------------



// Is the switch "tabs: " in a CP active?
if(strpos($content["all"],'id="TABBOX') !== false AND strpos($content["all"],'[%JQ-ACCORDION%]') !== false) {

 // Kill the identifyer TAG [%JQ-ACCORDION%]
 $content["all"] = str_replace('[%JQ-ACCORDION%]','',$content["all"]);
 
    // Load the CSS file
    $block['css']['jquery-accordion'] = 'specific/jquery-cptab-accordion.css';
   
       // Load the required "plugins"
    initJSPlugin('cptab.accordion');

/*
    // Insert the class tab-regcard between last </ul> and first <li>
    $content["all"] = preg_replace('/\<ul class="tab-navigation"\>(.*?)\<\/ul\>/s','<ul class="tab-navigation">$1</ul>'.LF.'<div class="tab-regcard">', $content["all"]);

    // close the the inserted class tab-regcard behind the last </li>
    $content["all"] = str_replace('<div class="tab-container-clear"></div>','</div>'.LF.'<div class="tab-container-clear"></div>',$content["all"]);
*/
    // Kill the anchor text in link)
    $content["all"] = preg_replace('/href="#tab-(.*?)"\>/s','href="#">', $content["all"]);


}

?>

Die Datei jquery.cptab.accordion.js:
Diese speichern in template/lib/jquery/plugin

Code: Select all

$(document).ready(function() {
   
   //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
   $('.tab-navigation').click(function() {

      //REMOVE THE ON CLASS FROM ALL BUTTONS
      $('.tab-navigation').removeClass('on');
       
      //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
       $('.tab-content').slideUp('normal');
   
      //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
      if($(this).next().is(':hidden') == true) {
         
         //ADD THE ON CLASS TO THE BUTTON
         $(this).addClass('on');
          
         //OPEN THE SLIDE
         $(this).next().slideDown('slow');
       }
       
    });
    
   
   /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
   
   //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
   $('.tab-navigation').mouseover(function() {
      $(this).addClass('over');
      
   //ON MOUSEOUT REMOVE THE OVER CLASS
   }).mouseout(function() {
      $(this).removeClass('over');                              
   });
   
   /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
   
   
   /********************************************************************************************************************
   CLOSES ALL S ON PAGE LOAD
   ********************************************************************************************************************/   
   $('.tab-content').hide();

});

Die Datei jquery-cptab-accordion.css:
Diese speichern in template/inc_css/specific

Code: Select all

.tab-content {
 background-color:#ccccee; 
 position:relative; 
 height:220px; 
 width:450px; 
 padding:5px 5px 5px 10px;
 margin-bottom:10px; 
 border: 1px solid #9596ef;
 margin-top: -1px;
 z-index: 10;
}
.tab-content {
 overflow-y:scroll; 
/* overfolw-y:auto; */
 
}
.tab-content img { 
 border:none; 
}

.tab-navigation { 
 margin-left:0;
 margin-bottom:0;
 padding: 0 0 5px 0;
 z-index: 20;
 position:relative;
}
.tab-navigation li {
 background-color:transparent;
 display:inline;
 float:none;
 list-style:none; 
}
.tab-navigation li a {
 background-color:#9596ef; 
 color:#fff; 
 font-weight: bold;
 display:inline; 
 height:auto;
 padding:5px 20px 5px 20px;
 text-decoration:none;
 width:auto; 
 border: 1px solid transparent;
 border-bottom: none;
 z-index: 20;
}
.tab-navigation li.active a { 
 background-color:#ccccee; 
 color:#000; 
 border: 1px solid #9596ef;
 border-bottom: none;
}

Zur Funktion:

Erstelle einen neuen CP, bei Register (Tabs) einen Haken setzen.
Im Eingabefeld Register eine eindeutige Überschrift z.B. Tab 1 eingeben. Diese wird im FE zu der Buttonüberschrift.
Im Eingabefeld Abschnitt eine 1 eingeben.

Alle CP´s innerhalb dieses Artikels, die als Register Tab 1 und Abschnitt 1 deklariert werden, werden nun in diesem Tab (Tab 1) angezeigt.

Es muß aber noch ein Identfizerer eingebaut werden um festzustellen, ob es sich um ein jquery accordion handelt. Dieser kann in irgendeinem CP, der im Accordion läuft, untergebracht werden (Beispielsweise im Feld Untertitel oder im Text selbst). Wenn es sich um das richtige Script handelt wird der Identifizierer aus dem Quellcode gelöscht.
Der Identifizierer: [%JQ-ACCORDION%]

Für einen weiteren Tab muß dann wie im nächsten Bild gezeigt vorgegangen werden.

Probierts einfach aus

An dieser Stelle möchte ich mich nochmals ganz herzlich bei Knut für seine Hilfe bedanken

Viele Grüße
Uwe

Gibt's das auch noch für die Kuh (Mootools)?

phpwcms Support Forum

JQuery Accordion

JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

Re: JQuery Accordion

CP Tabs im jquery Accordion gruppieren

Re: JQuery Accordion