module ziteplus tab

snypi · 25/02/2011 16:00:00

bonjour a tous
un ptit module tabs
voici la source de mon inspiration et j'ai utiliser le code du module news pour faire le module tabs
module à télécharger

pour faire fonctionner le module tabs

<?php echo $this->page_module('tabs','','show');?>

le code css et javascript est inclue dans le module !! (ce qui à mon avis devrais être fait autrement)

voici donc une petite contribution mais qui à mon avis nécessite le passage d'expert

si vous avez des retours je suis preneur merki

Atod · 28/02/2011 11:37:38

Un rendu assez sympa pour ceux qui souhaitent se faire une idée.

Pour le code javascript, normalement, il est au bon endroit.
Pour le css, je serais d'avis de le mettre dans un autre fichier pour pouvoir le modifier sans toucher au fichier php. Mais, quelle solution est la meilleur, je ne sais pas trop.
Il y a la solution de faire une petite configuration pour ton module : Et mettre de quoi éditer ton css (contenu dans un fichier .opt si cela est possible, je n'ai pas trouvé d'exemple permettant de faire un gros champ de saisi (comme le module de condition général d'utilisation) donc ce n'est peut être pas encore prévu) Sinon, il faudrait faire un fichier tabs.config.php.
Pour moi, j'ai l'impression que c'est la meilleure solution, car je trouve qu'un fichier css à la racine n'aurait pas trop sa place, ni même dans le repertoire /js.
Il faudrait demander à JPG ou il souhaite que cela soit mis, car il y a plusieurs possibilités pour faire fonctionner ça.
Fonctionne à l'installation!

jpg · 01/03/2011 00:21:50

Bonsoir snypi,
Je viens de tester ton module ... (et aussi le slider même si je n'ai pas trop de temps actuellement)
J'aime bien l'idée.
Tellement que je te propose une autre façon de faire les choses: plus simples à coder, et (j'espère) plus simple à utiliser.
ZitePLUS est un CMS: pourquoi ne pas utiliser ce qui existe déjà en terme de gestion de contenu pour gérer ces modules (tabs, slider ...).
En effet, le contenu des tabs ou slide me fait penser fortement ... à des pages de zitePLUS ... mais oui
Partant de ce postulat, j'ai repris ton module et je l'ai un peu (;)) modifié pour arriver au code ci-joint.
Comment cela fonctionne ?
On crée sa structure de pages normalement, avec les tabs que l'on souhaite afficher.
par exemple:
-page1
-page2demotabs
-page2a1
-page2a2
-page2a3
-page3

on va appeler le module pour afficher les pages filles de "page2demotabs" par le code:
< ?php echo $this->page_module('tabs','page2demotabs');? >

<?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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
			<script language="Javascript" type="text/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;
	});

});</script>';
self::$cms->content['css'].='<style>
		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;
}
</style>';
		}
		$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_content">'.self::$cms->get_content(self::$cms->struct[$i][cPageIdent], (self::$cms->struct[$i][cPageType]%2)==0 , true).'</div>';
				}
			}
		}
		$out.=$out1.$out2."</div>";
		return $out;
	}
}
?>

Si, l'explication n'est pas claire ... je mets une démo

a+
Jean-Paul

ps: si ça c'est pas un retour

edit : manquait la fin d'un </a>

Dernière modification par snypi (02/05/2013 09:18:41)

Atod · 01/03/2011 01:52:05

J'apprécie grandement l'idée (de gérer ça avec des pages et ainsi donc de pouvoir appeler le module plusieurs fois)! Je vais la récupérer pour un module en développement!
Ça c'est du retour !!!!

jpg · 01/03/2011 15:39:07

Bonjour,
une petite version avec un bout de fichier pour les options et le css configuré en fonction des deux (;)) options.

Le fichier zite/module/tabs.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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
			<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).fadeIn(); //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].'</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;
	}
}
?>

Le fichier zite/module/config/tabs.opt

tabs_height="pixel;32;1:400"
tabs_color="color;#e0e0e0"

jpg · 01/03/2011 19:37:20

Bonsoir,
je vais mettre tout à l'heure un module téléchargeable qui reprend et complète ce qui a été dit précédemment.
a+
Jean-Paul

ps: Un grand merci à snypi pour nous avoir fait découvrir les "tabs"

snypi · 01/03/2011 20:05:43

héhé j'aime cette émulation et c'est un superbe retour

mais j'ai quelques interrogation quand à cette méthodes
- le tabs.opt défini des options pour l'ensemble des tabs du site !! (ce qui peut me déranger car je n'ai pas forcement envie d'avoir les mêmes dimensions dans chaque pages !)
- le fait de rajouter toutes ces pages pour créer des tabs vas rendre plus difficile la lisibilité de l'administration du site
- question au niveau de la consommation ressource de l'hébergeur : pour afficher l'effet tabs il doit charger un certain nombre de page alors que le code d'une tabs (affichable dans une page) pourrais être contenue que dans un seul fichier !!

l'idée que j'avais à la base mais que mon incompétence à su limité

avoir un premier affichage ou l'on pouvait créer une "tabs"

- ici on donne un nom à la tabs et on configure ses opts avec un carré rouge et vert pour la rendre visible.
(ceci permet d'appelé le module < ?php echo $this->page_module('tabs','Nom_de_la_tabs');? >
- puis lorsque l'on clique sur le nom de la tabs on ce retrouve avec la même proposition que le module news, tabs, slide qu'a l'heure actuel)
il faudrait alors que le code de l'effet créer ce retrouve dans un fichier tabs_Nom_de_la_tabs (ce qui permettrait d'avoir qu'un fichier à appeler pour créer l'effet et pas 4 ou 5 fichier txt)

ceci nous permettrait d'avoir un lien dans la barre d'administration pour gérer toutes les tabs (slide) du site

voila c'est à quoi je pensais j'espère que vous avez compris ma vision un peu tortueuse

dans la suite des idées que j'avais était de créer donc un module slide , mais aussi un module diapo (style fading) pour proposer de créer des bannières et animer des diapos sur des pages

voila le souci avec la solution de jpg est que si je suis son exemple nous allons devoir créer un 30ene de page pour faire l'animation de notre site alors que tous ceci pourrais être contenue plus discrètement sans surcharger l'administration des pages !!

mais je le répète mon incompétence en php et java à su me limité
quand dite vous !!

edit : oups le temps d'écrire ce message jpg tu t'es lancé j'espère ne pas être arrivé trop tard

Dernière modification par snypi (01/03/2011 20:07:27)

piemchien · 01/03/2011 20:24:46

Bonjour,
Je découvre le topic.
Je trouve le code complexe, personnellement, j'utilise celui ci :Système d'onglets en Javascript Bien entendu, j'ai sortis le CSS dans une feuille.
Et en plus, j'ai toujours appelé ça des onglets !

Pierre

jpg · 01/03/2011 20:30:03

snypi a écrit :

héhé j'aime cette émulation et c'est un superbe retour
mais j'ai quelques interrogation quand à cette méthodes

snypi a écrit :

- le tabs.opt défini des options pour l'ensemble des tabs du site !! (ce qui peut me déranger car je n'ai pas forcement envie d'avoir les mêmes dimensions dans chaque pages !)

le tabs.opt défini les options par défaut (mis dans content['dftcss'] dans la dernière version) => le css du site ou de la page peut toujours chager cela (et heureusement )

snypi a écrit :

- le fait de rajouter toutes ces pages pour créer des tabs vas rendre plus difficile la lisibilité de l'administration du site

Question de point de vu, je présume
J'ai proposé cette solution, car justement cela me semble plus simple de tout gérer de la même manière.
En plus cela permettra de déléguer facilement la mise à jour d'un tabs (ou d'une page d'un tabs) à un groupe d'utilisateur.
La gestion de plusieurs tabs est aussi facilité.

snypi a écrit :

- question au niveau de la consommation ressource de l'hébergeur : pour afficher l'effet tabs il doit charger un certain nombre de page alors que le code d'une tabs (affichable dans une page) pourrais être contenue que dans un seul fichier !!

C'est vrai, il faut charger un certain nombre de page (fichiers différents), dans l'autre solution, on charge un seul gros fichier qui contient toutes les pages.
Plus gourmant ? possible, il faudrait tester les différentes situations.

snypi a écrit :

l'idée que j'avais à la base mais que mon incompétence à su limité
avoir un premier affichage ou l'on pouvait créer une "tabs"
- ici on donne un nom à la tabs et on configure ses opts avec un carré rouge et vert pour la rendre visible.
(ceci permet d'appelé le module < ?php echo $this->page_module('tabs','Nom_de_la_tabs');? >
- puis lorsque l'on clique sur le nom de la tabs on ce retrouve avec la même proposition que le module news, tabs, slide qu'a l'heure actuel)
il faudrait alors que le code de l'effet créer ce retrouve dans un fichier tabs_Nom_de_la_tabs (ce qui permettrait d'avoir qu'un fichier à appeler pour créer l'effet et pas 4 ou 5 fichier txt)
ceci nous permettrait d'avoir un lien dans la barre d'administration pour gérer toutes les tabs (slide) du site
voila c'est à quoi je pensais j'espère que vous avez compris ma vision un peu tortueuse

Moi, c'est plutôt cette dernière approche que je trouve plus compliqué

snypi a écrit :

dans la suite des idées que j'avais était de créer donc un module slide , mais aussi un module diapo (style fading) pour proposer de créer des bannières et animer des diapos sur des pages

S U P E R !!!!!

snypi a écrit :

edit : oups le temps d'écrire ce message jpg tu t'es lancé j'espère ne pas être arrivé trop tard

Il n'est jamais trop tard pour discuter et échanger des idées et des arguments ... important à mon avis

jpg · 01/03/2011 20:33:38

piemchien a écrit :

Je trouve le code complexe, personnellement, j'utilise celui ci :Système d'onglets en Javascript Bien entendu, j'ai sortis le CSS dans une feuille.

Le code php du module proposé (fin de topic) est simple (ou sinon que vas tu dire du code de ziteplus )

piemchien a écrit :

Et en plus, j'ai toujours appelé ça des onglets !

Mois aussi, et c'est comme ça que je l'ai traduit dans la version française

a+
Jean-Paul

snypi · 01/03/2011 21:46:59

jpg attention à <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
il risque d'entré en conflit avec d'autre script à mon avis il faut une option pour l'activer ou le désactiver !!
@piemchien
l'idée de faire un module est de proposer à des utilisateurs de zite non webmaster ou à des future utilisateur d'un zite fini de pouvoir faire / mettre à jours leur site sans rien connaitre en html, java, php et xml
donc le code proposer est celui d'un module et non de la façont de créer des onglets
donc d'un outil de mise à jours pour utilisateur l'embda

@jpg
oki pour cette méthode pour les tabs (onglets) mais pour les slides ????

Dernière modification par snypi (01/03/2011 21:57:49)

jpg · 02/03/2011 00:43:46

snypi a écrit :

jpg attention à <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

la question naïve du jour: pourquoi cette version en particulier de jquery ?
ps: la réponse "pourquoi pas ?" n'est pas admise

snypi a écrit :

@piemchien
l'idée de faire un module est de proposer à des utilisateurs de zite non webmaster ou à des future utilisateur d'un zite fini de pouvoir faire / mettre à jours leur site sans rien connaitre en html, java, php et xml
donc le code proposer est celui d'un module et non de la façont de créer des onglets
donc d'un outil de mise à jours pour utilisateur l'embda

+1

snypi a écrit :

@jpg
oki pour cette méthode pour les tabs (onglets) mais pour les slides ????

Pareil ?
Tu as vu dans l'exemple que j'ai mis dans l'autre message (sur les slides) que cela simplifie énormément le module et son fonctionnement.
Que vois tu comme différences dans les slides qui induiraient une solution différente ?

a+
Jean-Paul

ps: rien à voir, mais est-ce que tu as testé la dernière beta pour voir si cela résolvait ton problème de \" dans l'éditeur de sources ?

jpg · 02/03/2011 00:58:44

Bonsoir,
afin de tester plus facilement la dernière version du module tabs, je l'ai mis sur le site => on peut l'installer par le menu "module|Ajouter depuis le site"
Il est possible de personnaliser certaines options (couleur ou hauteur)
Pour l'utiliser, il faut mettre dans une page PHP le code
<?php echo $this->page_module("tabs","nom de la page père qui contien les onglets");?>

Par exemple, avec le ziteplus de base, on peut mettre dans une page PHP
<?php echo $this->page_module("tabs","1151949118");?>
et on aura les deux sous pages de la page d'accueil en onglets

a+
Jean-Paul

snypi · 02/03/2011 09:05:49

super efficace et félicitation
toujours dans l'esprit ziteplus comme tu dit
pour faire fonctionné ce module tabs (onglet)
- j'ai donc créer une page mère et 3 page fille (les 4) non visible dans le menu
- créer une page avec texte au dessus <?php echo $this->page_module("tabs","n°de_page");?>du texte en dessous

les onglets ce sont bien créer au bonne endroit

tester directement sur la première page et effectivement cela fonctionne avec les deux autres sous page

nickel
++

snypi · 02/03/2011 19:50:00

jpg a écrit :

snypi a écrit :
jpg attention à <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
la question naïve du jour: pourquoi cette version en particulier de jquery ?

la version n'est pas en question mais le fait qu'il risque d'y avoir des doublon avec la création

perso je met ce script dans le template car il m'est utile pour plusieurs animation sur mes sites web
le fait de l'implémenter dans un modules voir plusieurs fait qu'il vas ce charger plusieurs fois et planter les scripts

je n'ai pas d'idée pour résoudre ce souchi à part avoir dans la config ou dans le module la possibilité de l'activer ou le désactiver !!

exemple de vient de charger le module sur un site en production et bingue ca à flinguer mon design,
j'ai donc éditer le module tabs pour virer cette ligne

Dernière modification par snypi (02/03/2011 19:52:14)

jpg · 02/03/2011 20:12:54

snypi a écrit :

jpg a écrit :
snypi a écrit :
jpg attention à <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
la question naïve du jour: pourquoi cette version en particulier de jquery ?
la version n'est pas en question mais le fait qu'il risque d'y avoir des doublon avec la création

La question, c'est bien la version.
car gérer la présence unique d'une version de jquery ne pose pas de problème (cf mon autre message) et sera probablement implémenter dans la 0.9.2.
Donc, y a t il une raison particulière de fonctionner avec cette version de jquery ?
Enfin, autre que le fait qu'elle soit plus récente
a+
Jean-Paul

piemchien · 02/03/2011 20:31:12

snypi a écrit :

@piemchien
l'idée de faire un module est de proposer à des utilisateurs de zite non webmaster ou à des future utilisateur d'un zite fini de pouvoir faire / mettre à jours leur site sans rien connaitre en html, java, php et xml
donc le code proposer est celui d'un module et non de la façon de créer des onglets
donc d'un outil de mise à jours pour utilisateur lambda

Je parle bien du code java script, non pas celui du module, dont je trouve l'idée excellente.
Il me semble que le script que j'utilise est plus light que celui proposé, certainement du à l'utilisation de Jquery. J'avoue n'utiliser le javascript que très rarement, et jamais par jquery ou motools. Certes, on a de beaux effets, mais ça alourdis bien le site quand même.
Cette réflexion est indépendante de la bonne idée du module, je le précise bien.

Dernière modification par piemchien (02/03/2011 20:31:51)

jpg · 03/03/2011 00:46:31

piemchien a écrit :

Il me semble que le script que j'utilise est plus light que celui proposé, certainement du à l'utilisation de Jquery. J'avoue n'utiliser le javascript que très rarement, et jamais par jquery ou motools. Certes, on a de beaux effets, mais ça alourdis bien le site quand même.

Bonsoir,
j'ai été voir le lien cité et le code source associé car si on peut trouver plus simple pour la même chose, je suis toujours preneur
- d'un coté: une fonction change_onglet(name) de 6 lignes avec un code d'initialisation de 2 lignes
une utilisation des <div> et <span> pour gérer les onglets, mais un code d'initialisation peu élégant (répétition du nom de l'onglet) et un code html généré plus lourd (fonctions onclick répétés)
- de l'autre: une fonction jquery de 9 lignes + 2 pour gérer le fadein()
un peu complexe à comprendre de prime abord si on n'a pas déjà utilisé jquery, plus lourd dans le sens ou il faut "charger" la librairie jquery,
mais propose plus de fonctionnalité (le fadin ou fondu) et surtout pas besoin de code d'initialisation complémentaire à placer en bas de page et devant répéter le nom de l'onglet.
le code html nécessaire est minimaliste.

je ne suis pas vraiment certain qu'un script soit plus light que l'autre ... les deux sont vraiment petits si on fait abstraction de jquery
après c'est une question de choix: jquery ou pas jquery sur le site

a+
Jean-Paul

Suite:
- la solution avec jquery semble avoir un petit problème avec un "grand" nombres d'onglets (testé avec 8). Idem si on souhaite afficher deux blocs d'onglets sur la page
j'ai donc fait un petit module de test avec l'autre solution sans jquery: aucun soucis dans ces deux situations
à méditer

Suite(bis): un petit soucis si deux blocs d'onglets sur la même page

Dernière modification par jpg (03/03/2011 11:14:44)

jpg · 06/03/2011 20:20:25

Bonsoir,
Je viens de mettre une version différente du module tabs sans jquery.
Le javascript est inspiré du script dont nous parlait précédemment piemchien.
Le fonctionnement est identique.
Pour le tester il suffit de charger par l'option "module|ajouter depuis le site..." le module expérimental: TABS

On perd le fadein (pas de jquery)
... mais on gagne une meilleure gestion des onglets et un fonctionnement correct si on utilise deux blocs d'onglets sur une même page

bon tests

a+
Jean-Paul

ps: la structure HTML générée ainsi que les classes CSS sont décrites sommairement dans le source

dfraiture · 06/06/2011 10:04:52

J'ai encore une question stupide, mais est-il possible de mettre les onglets de travers ?

en fait, je dois faire un menu "penché" de maximum 8°. Je n'arrive pas à le faire en php, tout ce que j'ai trouvé, c'est avec une image, mais je n'arrive pas à l'intégrer à la place du menu dans Zite+ ...

J'espère avoir été assez clair ...

snypi · 07/06/2011 08:40:20

salutation
ceci est difficile et pas compatible tous navigateur
en css il y a des solutions mais pas pour IE

-moz-transform:rotate(45deg); //firefox
   -webkit-transform:rotate(45deg); //Chrome, Safari
   -o-transform:rotate(45deg); //Opera

si cela ne te dérange pas de perdre le menu dynamique fait le en image

dfraiture · 07/06/2011 15:24:07

Moui. C'est bien ce qu'il me semble ... Enfin, merci !

jpg · 07/06/2011 18:02:44

snypi a écrit :

salutation
ceci est difficile et pas compatible tous navigateur
en css il y a des solutions mais pas pour IE

Oui, c'est vraiment embêtant de faire compatible tout navigateur.
Il faudra que je vérifie le code modifié du module bloc-notes de Atod.
j'étais arrivé a une version gérant la transparence et l'inclinaison du scotch, même sous IE
Si j'ai deux minutes en fin de semaine, je regarderai ça et le sortirai dans une nouvelle alpha de la 0.9.2

a+
Jean-Paul

snypi · 09/06/2011 11:59:52

salut
je vient de découvrir un news sur laferme du web permettant d'utiliser le javascript pour simuler du css3 notament sur ie
donc pour dfraiture qui veut faire un menu incliné cela collerait bien : ci joint le lien
http://www.lafermeduweb.net/billet/csss … -1126.html

dfraiture · 04/08/2011 09:57:32

Merci snypi ... Et désolé à tous pour avoir laisser ce forum de côté ; qqs soucis de santé, plus le travail qui déborde égale moins de temps ...
Je disais donc, snypi, merci, je me penche dessus (mais non, il n'y a pas de jeu de mots ...)

Forum ZitePLUS

#1 25/02/2011 16:00:00

module ziteplus tab

#2 28/02/2011 11:37:38

Re : module ziteplus tab

#3 01/03/2011 00:21:50

Re : module ziteplus tab

#4 01/03/2011 01:52:05

Re : module ziteplus tab

#5 01/03/2011 15:39:07

Re : module ziteplus tab

#6 01/03/2011 19:37:20

Re : module ziteplus tab

#7 01/03/2011 20:05:43

Re : module ziteplus tab

#8 01/03/2011 20:24:46

Re : module ziteplus tab

#9 01/03/2011 20:30:03

Re : module ziteplus tab

#10 01/03/2011 20:33:38

Re : module ziteplus tab

#11 01/03/2011 21:46:59

Re : module ziteplus tab

#12 02/03/2011 00:43:46

Re : module ziteplus tab

#13 02/03/2011 00:58:44

Re : module ziteplus tab

#14 02/03/2011 09:05:49

Re : module ziteplus tab

#15 02/03/2011 19:50:00

Re : module ziteplus tab

#16 02/03/2011 20:12:54

Re : module ziteplus tab

#17 02/03/2011 20:31:12

Re : module ziteplus tab

#18 03/03/2011 00:46:31

Re : module ziteplus tab

#19 06/03/2011 20:20:25

Re : module ziteplus tab

#20 06/06/2011 10:04:52

Re : module ziteplus tab

#21 07/06/2011 08:40:20

Re : module ziteplus tab

#22 07/06/2011 15:24:07

Re : module ziteplus tab

#23 07/06/2011 18:02:44

Re : module ziteplus tab

#24 09/06/2011 11:59:52

Re : module ziteplus tab

#25 04/08/2011 09:57:32

Re : module ziteplus tab

Pied de page des forums