Forum ZitePLUS

La communauté des utilisateurs du CMS ZitePLUS

Vous n'êtes pas identifié(e).

Pages : 1

#1 30/04/2013 12:50:20

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Toggle sur le contenu à partir du module tabs

Bonjour à vous,

Je me permets d'ouvrir ce sujet car je n'ai pas trouvé de problème similaire sur le forum.
Souhaitant légèrement dynamiser le contenu des pages, j'essaye d'appliquer un effet de type de Toggle (en jquery donc) qui permet de faire apparaître le texte. Au moment du clic sur un onglet du tab (tab_heads), le contenu s'affiche avec cet effet (tab_bodies).
Dans la classe "tab_bodies", on doit récupérer le contenu de l'élément sélectionné au clic (un élément fils de tab_bodies).

J'ai trouvé un exemple mais je ne peux pas poster de lien apparement

Votre aide et vos cerveaux seraient vraiment précieux.

Hors ligne

#2 30/04/2013 14:44:20

snypi
Moderateurs
Inscription : 11/03/2008
Messages : 1 235
Site Web

Re : Toggle sur le contenu à partir du module tabs

pour nous aidé peut tu mettre ton script sur http://jsbin.com/

un zite+ associatif http://asso.gard.a.toi.free.fr
création de site internet dans le Gard et Ardèche http://www.creation-site-internet-gard.com/

Hors ligne

#3 30/04/2013 15:07:11

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Re : Toggle sur le contenu à partir du module tabs

Le script que j'ai trouvé et qui fonctionne est le suivant :

[== CSS ==]
 ul.tabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px; /*--Set height of tabs--*/
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  width: 100%;
}
ul.tabs li {
  float: left;
  margin: 0;
  padding: 0;
  height: 31px; /*--Subtract 1px from the height of the unordered list--*/
  line-height: 31px; /*--Vertically aligns the text within the tab--*/
  border: 1px solid #999;
  border-left: none;
  margin-bottom: -1px; /*--Pull the list item down 1px--*/
  overflow: hidden;
  position: relative;
  background: #e0e0e0;
}
ul.tabs li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 1.2em;
  padding: 0 20px;
  border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
  outline: none;
}
ul.tabs li a:hover {
  background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
  background: #fff;
  border-bottom: 1px solid #fff; /*--Makes the active tab look like it s connected with its content--*/
}
/*************tab_container**************/
.tab_container {
  border: 1px solid #999;
  border-top: none;
  overflow: hidden;
  clear: both;
  float: left; width: 100%;
  background: #fff;
}
.tab_content {
  padding: 20px;
  font-size: 1.2em;
} 
[== JavaScript ==]
$(document).ready(function() {
  //When page loads...
  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show();   //Activate first tab
  $(".tab_content:first").show(); //Show first tab content

  //On Click Event
  $("ul.tabs li").click(function() {
     $("ul.tabs li").removeClass("active"); //Remove any "active" class
     $(this).addClass("active"); //Add "active" class to selected tab
     $(".tab_content").hide(); //Hide all tab content
     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
     $(activeTab).fadeIn(); //Fade in the active ID content
      return false;
  });
});


Sauf que je n'arrive pas à le réadapter avec le module tabs de ZitePLUS

A titre comparatif, sauf erreur de ma part :
  (démo <===> tabs.php)
  ul.tabs <==> .tabs_heads
  ul.tabs li <==> .tabs_head
  ul.tabs li a <==> .tabs_head_0
  ul.tabs li a:hover <==> .tabs_head_0:hover
  .tab_container <==> .tabs_bodies
  .tab_content <==> .tabs_body

Faut il rajouter du code dans tabs.php pour "former" les classes actives ?

Dernière modification par Rigou (30/04/2013 15:16:19)

Hors ligne

#4 30/04/2013 15:40:01

snypi
Moderateurs
Inscription : 11/03/2008
Messages : 1 235
Site Web

Re : Toggle sur le contenu à partir du module tabs

a tu réelement besoin du module ?
dans le sens ou l'utilisateur final vas rajouté et enlever des onglets ?
car si tu veut faire simple il suffit que tu créer direct ton code html des onglet dans lequel tu rajoute des includes
hop le tour est joué

de plus ton code javascript cherche des li !!
alors que tabs est fait avec des div
si dessous la construction des onglets via le module tabs

[== PHP ==]
$out.="<div class='tabs'><div class='tabs_heads'>$out1</div><div class='tabs_bodies'>$out2</div></div>";
			$out.="<script type='text/javascript'>  tabs_select('$pgbase' , '$pgfirst');    </script>

Dernière modification par snypi (30/04/2013 15:56:23)

un zite+ associatif http://asso.gard.a.toi.free.fr
création de site internet dans le Gard et Ardèche http://www.creation-site-internet-gard.com/

Hors ligne

#5 30/04/2013 16:07:15

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Re : Toggle sur le contenu à partir du module tabs

Ce module permet de créer des onglets de manière très simple pour un utilisateur lambda. Cela ne requiert aucune compétence en dév. Web.

J'ai trouvé une solution très simple en terme de script : 

[== JavaScript ==]
$(".tabs_head").click(function(){
	$(".tabs_bodies").hide("slide"); //Hide all content
	$(".tabs_bodies").show("slide");
});

Ca semble fonctionner bien que tout cela ne m'a pas trop l'air ergonomique. Ca cache et affiche l'ensemble de la <div>. Ca fait pas tout à fait ce que j'espérais mais c'est un début

Merci en tout cas.


EDIT : en fait non, ça cache et affiche la div sur laquelle on clique (je me suis fait avoir parce que chaque bodies avait le même texte). Donc ce n'est pas tout à fait la bonne solution

Dernière modification par Rigou (30/04/2013 16:30:16)

Hors ligne

#6 30/04/2013 20:25:24

snypi
Moderateurs
Inscription : 11/03/2008
Messages : 1 235
Site Web

Re : Toggle sur le contenu à partir du module tabs

juste pour info c'est quoi l'effet jquery souhaité ?

un zite+ associatif http://asso.gard.a.toi.free.fr
création de site internet dans le Gard et Ardèche http://www.creation-site-internet-gard.com/

Hors ligne

#7 02/05/2013 09:09:03

snypi
Moderateurs
Inscription : 11/03/2008
Messages : 1 235
Site Web

Re : Toggle sur le contenu à partir du module tabs

dans l'ébauche du module tab tu avais un script avec jquery
http://ziteplus.giausserand.fr/forum/vi … php?id=878
en remplacant tabs.php par celui ci tu à déja une bonne base pour adapté à tes besoins
il faut l'amélioré mais cela peut répondre à ta demande !!
voici le code avec ton toggle

[== PHP ==]
<?php
/*
module:	Gestion des tabs galéré par gabriel montaigu 2011
source inspiration : http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
Licence : CeCILL-B, http://www.cecill.info
Copyright Jean-Paul GIAUSSERAND 2011
Site: http://www.giausserand.fr/index.php?perma=ziteplus
	v1.1  28/02/11  récriture du code du module en gardant l'idée de base, les css et le javascript (JPG)
	v1.0	25/02/11	Création du module (snypi)

Pour avoir des tabs:   < ?php echo $this->page_module('tabs','Nom_de_la_page');? >
*/
class Ttabs extends Tmodule {
	function dojob($opt="") {
		parent::dojob();
		static $isfirst=0;
		if ($isfirst++==0) {
			self::$cms->content['js'].='
			<script language="Javascript" type="text/javascript">
			$(document).ready(function() {
	//When page loads...
	$(".tab_body").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_body:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_body").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).toggle("slow"); //Fade in the active ID content
		return false;
	});
});</script>';
		self::$cms->content['localcss'].="
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: {$this->getOption('tabs_height')}px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height:".($this->getOption('tabs_height')-1)."px; /*--Subtract 1px from the height of the unordered list--*/
	line-height:".($this->getOption('tabs_height')-1)."px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: {$this->getOption('tabs_color')};
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it s connected with its content--*/
}
	/*************tab_container**************/
	.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_body {
	padding: 20px;
	font-size: 1.2em;
}
";
		}
		$out="";
		$out1='<ul class="tabs">';
		$out2='</ul><div class="tab_container">';
		$pgbase=self::$cms->page_from_ident($opt);
		if ($pgbase) {
		  for ($i=$pgbase+1;self::$cms->struct[$i][cPageRang]>self::$cms->struct[$pgbase][cPageRang];$i++) {
		    if (self::$cms->isPageAuth($i)) {
  				$out1.= '<li><a href="#tab'.$i.'">'.self::$cms->struct[$i][cPageTitre].'</a></li>';
  				$out2.= '<div id="tab'.$i.'" class="tab_body">'.self::$cms->get_content(self::$cms->struct[$i][cPageIdent], (self::$cms->struct[$i][cPageType]%2)==0 , true).'</div>';
				}
			}
		}
		$out.=$out1.$out2."</div>";
		return $out;
	}
}
?>

un zite+ associatif http://asso.gard.a.toi.free.fr
création de site internet dans le Gard et Ardèche http://www.creation-site-internet-gard.com/

Hors ligne

#8 02/05/2013 09:13:55

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Re : Toggle sur le contenu à partir du module tabs

Désolé pour le retard de réponse

snypi a écrit :

juste pour info c'est quoi l'effet jquery souhaité ?

L'effet serait un slide sur le corps du texte uniquement : http://jqueryui.com/show/

dans l'ébauche du module tab tu avais un script avec jquery
http://ziteplus.giausserand.fr/forum/vi … php?id=878
en remplacant tabs.php par celui ci tu à déja une bonne base pour adapté à tes besoins
il faut l'amélioré mais cela peut répondre à ta demande !!

Je vais voir tout ça

Hors ligne

#9 02/05/2013 10:45:32

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Re : Toggle sur le contenu à partir du module tabs

En effet, l'ébauche que tu m'as montré ressemble très fortement à ce que j'aimerais faire. Je vais essayer de réadapter ce code avec ce que propose le module tabs (tabs, tabs_heads, tabs_head_0 etc ...)

Hors ligne

#10 02/05/2013 10:51:35

snypi
Moderateurs
Inscription : 11/03/2008
Messages : 1 235
Site Web

Re : Toggle sur le contenu à partir du module tabs

pourquoi te cassé les pieds ?
adapte celui ci à ton souhait !

un zite+ associatif http://asso.gard.a.toi.free.fr
création de site internet dans le Gard et Ardèche http://www.creation-site-internet-gard.com/

Hors ligne

#11 02/05/2013 13:49:53

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Re : Toggle sur le contenu à partir du module tabs

Justement, y'a une ligne qui me pose problème :

[== JavaScript ==]
var activeTab = $(this).find("a").attr("href")

Je ne vois pas trop comment réadapter ça avec le module.


J'ai remplacé ceci

[== CSS ==]
html ul.tabs li.active, html ul.tabs li.active a:hover  {...}

par

[== CSS ==] 
html .tabs_head.active, html .tabs_head.active .tabs_head_0:hover{...}

mais je n'ai pas la moindre idée si cela fonctionne.

Dernière modification par Rigou (02/05/2013 13:55:36)

Hors ligne

#12 02/05/2013 13:56:56

snypi
Moderateurs
Inscription : 11/03/2008
Messages : 1 235
Site Web

Re : Toggle sur le contenu à partir du module tabs

je ne capte pas ton souci ?
le module fonctionne avec le code donné si dessous

ci joint avec les parram de config mis dans le css (peut etre pas tous)

[== PHP ==]
<?php
/*
module:	Gestion des onglets
source inspiration :
	- Pour la fonction tabs_select: http://www.supportduweb.com/scripts_tutoriaux-code-source-48-systeme-d-onglets-en-javascript-x-html-et-css-dans-la-meme-page.html
		(merci à piemchien du forum)
	- Pour le css: le même site que précédemment, le site http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery
		ainsi que la première version jquery du module tabs de Gabriel MONTAIGU du 25/02/2011
Licence : CeCILL-B, http://www.cecill.info
Copyright Jean-Paul GIAUSSERAND 2011
Site: http://www.giausserand.fr/index.php?perma=ziteplus
	v1.4  05/03/11  Modification fonction tabs_select pour gérer plusieurs systèmes d'onglets sur une même page HTML
	                Rationalisation du HTML et du CSS généré
	v1.3  04/03/11  Re-création complète du module sans jquery (cf forum piemchien ) (JPG)
	v1.2  01/03/11  Fichier d'options pour paramétrer le css + normalisation des noms (JPG)
	v1.1  28/02/11  Récriture du code php du module en gardant l'idée de base, les css et le javascript (JPG)
	v1.0	25/02/11	Création du module (Gabriel Montaigu)

Pour avoir des tabs:   < ?php echo $this->page_module('tabs','Nom_de_la_page');? >

Les classes css personnalisables:
tabs, tabs_heads, tabs_head, tabs_head_0, tabs_head_1, tabs_bodies, tabs_body

La structure html:
<div class='tabs'>
	<div class='tabs_heads'>
	  <div class='tabs_head (tabs_head_0 | tabs_head_1)' id="tabs_head_NOM_DE_LA_PAGE">
			<!-- le contenu d'un onglet ->
	  </div>
	</div>
 	<div class='tabs_bodies'>
	  <div class='tabs_body' id="tabs_body_NOM_DE_LA_PAGE">
			<!-- la page correspondant à l'onglet ->
	  </div>
	</div>
</div>";

*/
class Ttabs extends Tmodule {
	function dojob($opt="") {
		parent::dojob();
		static $isfirst=0;
		if ($isfirst++==0) {
			self::$cms->content['js'].="
			 <script src='http://code.jquery.com/jquery-1.9.1.js'></script>
			<script language='Javascript' type='text/javascript'>
				var tabs_headold = new Array;
        function tabs_select(idtabs,name) {
        	if (tabs_headold[idtabs]) {
						document.getElementById('tabs_head_'+tabs_headold[idtabs]).className = 'tabs_head_0 tabs_head';
            document.getElementById('tabs_body_'+tabs_headold[idtabs]).style.display = 'none';
          }
          document.getElementById('tabs_head_'+name).className = 'tabs_head_1 tabs_head';
          document.getElementById('tabs_body_'+name).style.display = 'block';
          tabs_headold[idtabs] = name;
        }</script>";
			self::$cms->content['dftcss'].="
.tabs {}
.tabs_heads {
	margin: 0;
	padding: 0;
	height: {$this->getOption('tabs_height')}px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
}
.tabs_head {
	margin: 0;
	padding: 0 {$this->getOption('tabs_paddingleft')}px;
	height:".($this->getOption('tabs_height')-1)."px; /*--Subtract 1px from the height of the unordered list--*/
	line-height:".($this->getOption('tabs_height')-1)."px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	font-weight:bold;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	background: {$this->getOption('tabs_color')};
	display:inline-block;
 }

.tabs_head_0 {
	padding: 0 {$this->getOption('tabs_paddingleft')}px;
	cursor:pointer;
}
.tabs_head_0:hover {	background: {$this->getOption('tabs_colorhover')};}

.tabs_head_1 {
	padding: 0 {$this->getOption('tabs_paddingleft')}px;
	background:{$this->getOption('tabs_colorbody')};
	border-bottom: 1px solid {$this->getOption('tabs_colorbody')}; /*--Makes the active tab look like it s connected with its content--*/
}
/*Le corps des onglets*/
.tabs_bodies {
	border-top:none;
	background:{$this->getOption('tabs_colorbody')};
}
.tabs_body {
	padding:{$this->getOption('tabs_paddingleft')}px;
  display:none;
}
";
		}
		$out=$out1=$out2='';
		$pgbase=self::$cms->page_from_ident($opt);
		if ($pgbase) {
		  $pgfirst='';
		  for ($i=$pgbase+1;self::$cms->struct[$i][cPageRang]>self::$cms->struct[$pgbase][cPageRang];$i++) {
		    if (self::$cms->isPageAuth($i)) {
		      $idpage=self::$cms->struct[$i][cPageIdent];
		      if (empty($pgfirst)) $pgfirst=$idpage;
  				$out1.= "<span class='tabs_head_0 tabs_head' id='tabs_head_$idpage' onclick='javascript:tabs_select(\"$pgbase\",\"$idpage\");'>".self::$cms->struct[$i][cPageTitre].'</span>';
  				$out2.= "<div class='tabs_body' id='tabs_body_$idpage'>".self::$cms->get_content(self::$cms->struct[$i][cPageIdent], (self::$cms->struct[$i][cPageType]%2)==0 , true).'</div>';
				}
			}
			$out.="<div class='tabs'><div class='tabs_heads'>$out1</div><div class='tabs_bodies'>$out2</div></div>";
			$out.="<script type='text/javascript'>  tabs_select('$pgbase' , '$pgfirst');    </script>";
		}
		return $out;
	}
}
?>

avec ce code tu peut créer des tabs dans plusieurs page

le seul petit hic est que les titres doivent rentrée dans la largeur de ton conteneur donc pas de titre trop long !!

dans tous les cas si tu modifie le fichier original tu auras des soucis avec les mises à jours futur donc pourquoi ne pas prendre ce code et le garder tel quel !!

c'est un module tabs comme l'autre mais au lieu de créer des <div> il créer une liste <ul> <li>
et il utilise jquery au lieu de javascript pur

un zite+ associatif http://asso.gard.a.toi.free.fr
création de site internet dans le Gard et Ardèche http://www.creation-site-internet-gard.com/

Hors ligne

#13 02/05/2013 14:25:04

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Re : Toggle sur le contenu à partir du module tabs

J'ai certainement du mal m'exprimer, au temps pour moi. Reprenons donc :

J'ai créé des onglets grâce au module Tabs.
Lorsque je clique sur un onglet, j'aimerai avoir une animation (fadeIn() ou show('effect')) sur le conteneur du texte uniquement et pas les bordures.

Je pars du script du post précédant et je dois le réadapter en utilisant l'ébauche que tu avais fait utilisant du jQuery.

Hors ligne

#14 02/05/2013 14:46:18

snypi
Moderateurs
Inscription : 11/03/2008
Messages : 1 235
Site Web

Re : Toggle sur le contenu à partir du module tabs

moi aussi je t'ai filé si dessus le code de tabs original et non modifier smile

donc si tu connais un peu le css tu peut remarqué que dans le code si dessous il y à du css

[== PHP ==]
<?php
/*
module:	Gestion des tabs galéré par gabriel montaigu 2011
source inspiration : http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
Licence : CeCILL-B, http://www.cecill.info
Copyright Jean-Paul GIAUSSERAND 2011
Site: http://www.giausserand.fr/index.php?perma=ziteplus
	v1.1  28/02/11  récriture du code du module en gardant l'idée de base, les css et le javascript (JPG)
	v1.0	25/02/11	Création du module (snypi)

Pour avoir des tabs:   < ?php echo $this->page_module('tabs','Nom_de_la_page');? >
*/
class Ttabs extends Tmodule {
	function dojob($opt="") {
		parent::dojob();
		static $isfirst=0;
		if ($isfirst++==0) {
			self::$cms->content['js'].='
			<script language="Javascript" type="text/javascript">
			$(document).ready(function() {
	//When page loads...
	$(".tab_body").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_body:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_body").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).toggle("slow"); //Fade in the active ID content
		return false;
	});
});</script>';
		self::$cms->content['localcss'].="
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: {$this->getOption('tabs_height')}px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height:".($this->getOption('tabs_height')-1)."px; /*--Subtract 1px from the height of the unordered list--*/
	line-height:".($this->getOption('tabs_height')-1)."px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: {$this->getOption('tabs_color')};
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it s connected with its content--*/
}
	/*************tab_container**************/
	.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_body {
	padding: 20px;
	font-size: 1.2em;
}
";
		}
		$out="";
		$out1='<ul class="tabs">';
		$out2='</ul><div class="tab_container">';
		$pgbase=self::$cms->page_from_ident($opt);
		if ($pgbase) {
		  for ($i=$pgbase+1;self::$cms->struct[$i][cPageRang]>self::$cms->struct[$pgbase][cPageRang];$i++) {
		    if (self::$cms->isPageAuth($i)) {
  				$out1.= '<li><a href="#tab'.$i.'">'.self::$cms->struct[$i][cPageTitre].'</a></li>';
  				$out2.= '<div id="tab'.$i.'" class="tab_body">'.self::$cms->get_content(self::$cms->struct[$i][cPageIdent], (self::$cms->struct[$i][cPageType]%2)==0 , true).'</div>';
				}
			}
		}
		$out.=$out1.$out2."</div>";
		return $out;
	}
}
?>

exemple css tu vire la bordure du ul.tabs li a
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}

et dans ce code il à aussi le javascript implémenté dans le module donc pour ton effet de fad
ligne 33 tu remplace par ceci
$(activeTab).fadeIn(); //Fade in the active ID content

c'est à toi d'adapté celui si puisque c'est celui qui répond à tes attentes

un zite+ associatif http://asso.gard.a.toi.free.fr
création de site internet dans le Gard et Ardèche http://www.creation-site-internet-gard.com/

Hors ligne

#15 02/05/2013 15:01:15

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Re : Toggle sur le contenu à partir du module tabs

Parfait !

Merci beaucoup, je vais modifier la css pour la réadapter en fonction des paramètres de l'utilisateur.


Autre question : supposons qu'un utilisateur bourrine un onglet environ 47584546 fois. Le texte de l'onglet va réapparaitre autant de fois. Quelle condition faudrait il mettre pour éviter de réafficher un onglet déjà ouvert ?

Hors ligne

#16 02/05/2013 15:44:58

Rigou
Membre
Inscription : 30/04/2013
Messages : 9

Re : Toggle sur le contenu à partir du module tabs

Toute fonctionne parfaitement après modification de la css. Merci beaucoup  snypi de ton aide !  big_smile

Hors ligne

Pages : 1

Pied de page des forums

Propulsé par FluxBB