ONGLETS

Alcoridan Messages postés 1 Date d'inscription jeudi 4 novembre 2010 Statut Membre Dernière intervention 5 novembre 2010
5 nov. 2010 à 23:43

Bravo au concepteur de ce script simple, souple, ajustable. En 2010 il fonctionne très bien avec les navigateurs FF, IE, Safari, et donne un coup de jeune à mon site pépère. Merci.

styledrive1 Messages postés 10 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 16 décembre 2008
29 déc. 2009 à 16:14

c'est un très bon script vive le javascript lol
juste un truc : il vaut mieu mettre le ONCLICK en miniscule

cs_MeSod Messages postés 89 Date d'inscription dimanche 21 septembre 2008 Statut Membre Dernière intervention 26 avril 2016
23 janv. 2009 à 14:34

Magnifique code =D je l'utilise sur ce site =D c'est pile se que je chercher merci =D !

belkhayaty Messages postés 95 Date d'inscription jeudi 19 août 2004 Statut Membre Dernière intervention 11 août 2012
8 nov. 2008 à 11:39

tres beau

masternico Messages postés 487 Date d'inscription dimanche 5 octobre 2003 Statut Membre Dernière intervention 1 septembre 2011
21 sept. 2007 à 21:55

salut, en relisant mon example, j'y ai trouvé une erreur:
il faut mettre:
$row_sup_html .= ' <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(' . $index . ');"><NOBR>Onglet ' . $onglet['titre'] . '</NOBR></TD>';

Et cela suppose d'avoir une table comme celle qui suit:
CREATE TABLE `onglet` (
`id` int(11) NOT NULL auto_increment,
`contenu` text NOT NULL default '',
`titre` varchar(255) NOT NULL default '',
`visibility` varchar(1) NOT NULL default '1',
KEY `id` (`id`)
) TYPE=MyISAM

après, ça doit rouler tout seul. Je verrais demain à publier un source avec cette modification.

cs_advisory Messages postés 8 Date d'inscription lundi 14 mai 2007 Statut Membre Dernière intervention 5 mars 2010
21 sept. 2007 à 16:22

je n'y connais absolument rien en php ,par contre nous avons Msql donc si tu pouvais me guider sur une approche de la chose ca serait sympa :)

Merci d'avance

masternico Messages postés 487 Date d'inscription dimanche 5 octobre 2003 Statut Membre Dernière intervention 1 septembre 2011
21 sept. 2007 à 15:17

Salut,
je dirais qu'il faut faire ça avec l'aide de php.
En fait, il faut faire un script qui récupère le contenu des onglet depuis la base de données puis qui crée les onglet un par un avant d'envoyer le tout au navigateur.
Et si le contenu est vide, alors l'onglet n'est pas généré

Du style:

<?php
$result mysql_query("select * from `onglet` where visibility '1';");
if ($result) {
$nb_row = @mysql_num_rows($result);
while ( $row= @mysql_fetch_array($result,MYSQL_ASSOC)) {
$onglet_table[] = row;
}
}
$row_sup_html = ''
$row_inf_html = '';
foreach($onglet_table as $index=>$onglet){
if($onglet['contenu'] == '') continue; // on saute l'onglet qui ne sera donc pas affiché
$row_sup_html .= ' <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(0);"><NOBR>Onglet ' . ($index+1) . '</NOBR></TD>';
$row_inf_html .= '
' . $onglet['contenu'] . '
';

}
?>
<HTML>
<HEAD>
<style>
.TabCommon {FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 100px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3; BORDER-LEFT: 1px solid #BBBBBB;}
.TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: #000000;}
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;}
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;}
</style>
<script>
function TabClick( nTab ){
Col = document.getElementsByName("Content");
for (i = 0; i < document.getElementsByName("Content").length; i++)
{
document.getElementsByName("tabs")[i].className = "TabBorderBottom TabCommon TabOff";
document.getElementsByName("Content")[i].style.display = "none";
}
document.getElementsByName("Content")[nTab].style.display = "block";
document.getElementsByName("tabs")[nTab].className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight";
}
</script>
</HEAD>

<?php
echo $row_sup_html;
?>
,

----

Texte commun,

----

<?php
echo $row_inf_html;
?>

</HTML>

Je n'ai pas testé mais cela devrait fonctionner

cs_advisory Messages postés 8 Date d'inscription lundi 14 mai 2007 Statut Membre Dernière intervention 5 mars 2010
21 sept. 2007 à 11:35

Bonjour, je constate que le sujet a plusieurs année mais je me lance quand même .
Voila je vous explose la situation les onglets fonctionnent tres bien aucun bug rien mais j'aimerais ajouter une amélioration et je ne sais pas comment m'y prendre je souhaiterais enfin si possible pouvoir afficher la tab que seulement si il y a un contenu dans celle ci et qu'elle soit masquer lorsqu'elle est vide
es-ce possible?

calidigy Messages postés 19 Date d'inscription samedi 2 août 2003 Statut Membre Dernière intervention 17 mars 2007
29 janv. 2007 à 01:08

Pour ne pas voir tout les contenu des
lors du chargement de la page, il suffit de mettre

au lieu de
:)

gabs77 Messages postés 379 Date d'inscription mardi 6 décembre 2005 Statut Membre Dernière intervention 8 octobre 2008
25 oct. 2006 à 10:01

bonjour, j'ai trouver le script super et je veux le modifier de tel sorte a ce que je puisse l'utiliser avec une base de donnée mais j'ai des problemes avec je'y parviens pas correctement
j'ai déposé un message sur le forum a la page suivante : http://www.phpcs.com/infomsg_PHP-BOUCLE-JAVASCRIPT-CSS-POUR-ONGLETS_832226.aspx#2
si quelqu'un pourait m'aider !!

younes371 Messages postés 502 Date d'inscription mercredi 29 décembre 2004 Statut Membre Dernière intervention 20 mars 2012
18 sept. 2006 à 18:33

j ai oublié,
Merci d'avance

younes371 Messages postés 502 Date d'inscription mercredi 29 décembre 2004 Statut Membre Dernière intervention 20 mars 2012
18 sept. 2006 à 18:24

Alors, pouvez-vous m'aider ? si possible ?

kyrriel Messages postés 5 Date d'inscription lundi 21 juillet 2003 Statut Membre Dernière intervention 18 septembre 2006
18 sept. 2006 à 18:22

En fait c'est un script qui utilise Ajax donc ce n'est pas tres facile!
il faut deja avoir le script des widget qui se deplacent et apres il faut integrer du code derriere.

younes371 Messages postés 502 Date d'inscription mercredi 29 décembre 2004 Statut Membre Dernière intervention 20 mars 2012
18 sept. 2006 à 17:34

Bonjour,
Je travail sur un projet,oû je dois mettre des onglets automatique, => vous m avez pa compris!! ??.
Alors j explique :
L'utilisateur lui meme peut créer ces onglet personnel.
Pour bien me comprendre, je vous demande d aller voir ce site : www.netvibes.com.
Si vous pouvez m'aider a trouver le script ou on le developpe ensemble ça serait gentil de votre part . Merci

jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
22 mars 2006 à 13:51

Trsè clair, j'ai fais ça aussi, mais ce qui me bloque, c'est quand je refresh ma page, alors le contenu de tous les onglets se mettent dans le premier et dès que je passe la souris sur un des onglets, alors là l'affichage est correct. J'ai modifié le ONCLICK par un onmouseover.
dans mon FOR, j'y ai mis un input type="hidden" name="onglet_0" value="0"
et avant le body, j'y ai placé le isset :
<? if(isset($_POST['onglet_0'])){$onglet_courant=0;}?>

Merci pour ton aide.

kyrriel Messages postés 5 Date d'inscription lundi 21 juillet 2003 Statut Membre Dernière intervention 18 septembre 2006
22 mars 2006 à 11:20

ton isset doit etre au debut du script quand tu testes s'il y a eu un submit
Dans chaque onglet tu dois bien mettre un <form type=post> et un </form>
et dans chacun des form tu mets par exemple: et au debut de ton script tu fais
if(isset($_POST['onglet_1'])){$onglet_courrant=1;}
if(isset($_POST['onglet_2'])){$onglet_courrant=2;}}
etc... si c'est le cas cela veut dire qu'il a validé le formulaire de l'onglet 1 auquel cas soit tu écrit la balise body apres le traitement php, soit tu appelles du javascript à la volée: print "<script ...>tablick(".$onglet_courrant.")</script>". Suis je clair?

jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
22 mars 2006 à 11:02

En fait, entre les balises DIV, j'ai mis du HTML, du PHP/MYSQL. Dans le formulaire, j'y ai placé un input type hidden avec un name quelconque. Lorsque je clique sur l'envoi du formulaire, je récupère le name envoyé par un isset et j'affiche de nouveau ma page avec le résultat de l'envoi du formulaire. Là où je bloque est l'endroit où je dois placé ce isset, et en fonction du name envoyé, remplacer le par quelque chose du genre où $var correspond à un numéro d'onglet.
Je ne sais pas trop si j'ai bien expliqué ce que je veux faire.

kyrriel Messages postés 5 Date d'inscription lundi 21 juillet 2003 Statut Membre Dernière intervention 18 septembre 2006
22 mars 2006 à 10:34

Avec quoi traites tu les formulaires, quel language? sur quoi bloques tu exactement?
Je pense que le principe suivant doit marcher :
1ere solution:Tu creer des formulaires qui appellent, quand on les valide, la page qui crée les onglets, donc tu testes tes submit dans la page des onglets. Le fait d'avoir créé des variables cachées avec un identifiant te permet de savoir quel formulaire tu as validé. Mais il faut traiter le resultat de ton formulaire au niveau du script qui crée les onglets.
2eme solution: tu peux mettre tes formulaires dans des iframes, et lorsque tu feras un submit la page se rechargera dans l'onglet et ainsi plus de rafraichissement pour le script des onglets.

jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
22 mars 2006 à 00:25

Bonsoir,

je viens de récupérer ton script, et c'est exactement ce que je cherchais. Mais j'ai juste un soucis avec les formulaires. Je vais faire cinq onglets et chacun aura son formulaire. Lors du rechargement de la page, il faut que je retombe sur la page courante pour vérifier si le submit a fonctionné. Comme tu l'as expliqué dans le dernier post, il faut faire un input type=hidden et récupérer la valeur dans une variable. Mais je bloque, je séche. Pourrais-tu m'aider, STP.

kyrriel Messages postés 5 Date d'inscription lundi 21 juillet 2003 Statut Membre Dernière intervention 18 septembre 2006
20 mars 2006 à 13:09

pour qu'il garde ton onglet en memoire, il faudrait que tu declare un dans ton formulaire qui aurait la valeur de ton onglet. Ensuite tu le recupere au debut du script avant de construire tes onglets, et au lieu de faire un tabclick(0) tu fait un tabclick(post_hidden)

jobo13 Messages postés 1 Date d'inscription lundi 28 février 2005 Statut Membre Dernière intervention 19 mars 2006
19 mars 2006 à 20:12

Merci beaucoup pour ce script, je le trouve génial.

J'aimerais inclure des pages dans les differents onglets avec des formulaires.
Comment faire pour garder la page courante lors du rechargement de la page par un submit?
Parceque onLoad="tabClick(0)" renvoies toujours sur le premier onglet.

Merci d'avance

ayeb_2 Messages postés 1 Date d'inscription dimanche 15 août 2004 Statut Membre Dernière intervention 13 mars 2006
13 mars 2006 à 10:56

très simple,

mais le seul problème quej'ai mnt,c qu'il n'est pas comptabile avec IE sous mac :( si quelqu'un peut m'aider :D

kyrriel Messages postés 5 Date d'inscription lundi 21 juillet 2003 Statut Membre Dernière intervention 18 septembre 2006
22 févr. 2006 à 12:32

j'ai voulu faire des onglets à plusieurs niveaux, selon le meme principe, donc j'ai un peu remanié le code, et aussi intégré le fait d'avoir une image derriere l'onglet si celui ci est selectionné ou que l'on passe la souris dessus.
les images derriere les onglets s'appellent
onglet.png
onglet_active.png(pour l'onglet selectionné)
onglet_hover.png(lorsque l'on passe la souris dessus)

<HTML>
<HEAD>
<style>
.TabCommon {FONT: 10px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 20px; WIDTH: 100px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3;background-image:url(images/onglet.png);BORDER-RIGHT: 1px outset #D1D1D1;}
.TabOffhover {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3;background-image:url(images/onglet_hover.png);BORDER-RIGHT: 1px outset #D1D1D1;}
.TabOn {CURSOR: default; COLOR: #000000;background-image:url(images/onglet_active.png);}
.TabBorderBottom{}
.TabActiveBorderLeftRight{BORDER-RIGHT: 1px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;BORDER-BOTTOM: 1px outset #D1D1D1;BORDER-TOP: 1px outset #D1D1D1;}
</style>
<script>
function TabClick( nTab,level ){

Col = document.getElementsByName("Content");

temp=0;

for(i = 0; i <=200 ; i++) {
if(document.getElementById("tabs"+level+i))
temp++;
}

for (i = 0; i <=(temp-1) ; i++)
{
document.getElementById("tabs"+level+i).className = "TabBorderBottom TabCommon TabOff";
document.getElementById("Content"+level+i).style.display = "none";
}
document.getElementById("Content"+level+nTab).style.display = "block";
document.getElementById("tabs"+level+nTab).className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight";
}

function get_hover(id){
if(document.getElementById(id).className!="TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight")
document.getElementById(id).className = "TabBorderBottom TabCommon TabOffhover";
}
function get_nohover(id){
if(document.getElementById(id).className!="TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight")
document.getElementById(id).className = "TabBorderBottom TabCommon TabOff";
}
</script>
</HEAD>

<NOBR>Onglet 1</NOBR>,
<NOBR>Onglet 2</NOBR>,
<NOBR>Onglet 3</NOBR>,
<NOBR>Onglet 4 ...</NOBR>,
,

----

contenu Onglet 1

<TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" >
----, <NOBR>ssOnglet 1</NOBR></TD>
<NOBR>ssOnglet 2</NOBR>,

----

----

ftyiyitiudsfds

contenu Onglet 3

contenu Onglet 4

</TD>
</TR>
</TABLE>

</HTML>

cs_coins Messages postés 12 Date d'inscription lundi 1 mars 2004 Statut Membre Dernière intervention 20 avril 2004
2 déc. 2005 à 10:07

Bonjour, je suis un super débutant en javascript, j'aimerais bien savoir comment faire marcher ce code , car j'ai remplacer document.getElementsByName("Content")[nTab].style.display = "block";
par document.getElementsByName("Content")[nTab].style.display = ""; mais, ca marche toujours pas ,
svp!!!!!

fly06 Messages postés 10 Date d'inscription samedi 6 décembre 2003 Statut Membre Dernière intervention 30 août 2006
13 août 2005 à 15:32

Super le script!
Un détail: Comment faire pour que la page ne s'affiche avant que l'évènement 'onload' ne soit activé (les browsers déclenchent le 'onload' quand le chargement de la page est terminé!).
Merci

equino Messages postés 1 Date d'inscription samedi 22 janvier 2005 Statut Membre Dernière intervention 6 mars 2005
6 mars 2005 à 01:25

Bravo ! tres bon script pour débuter (je suis un débutant)
Merci

flulu Messages postés 1 Date d'inscription lundi 27 mai 2013 Statut Membre Dernière intervention 4 novembre 2004
4 nov. 2004 à 15:04

j'ai une question concernant ce script, je suis debutant en java et n'arrive pas a ajouter un scrolling au niveau des tabs. je voudrai le rajouter dans la fonction ou variable (je ne connais pas le terme au juste) :

contenu Onglet 1

Je souhaiterai que le contenu de l'onglet 1, si il fait + que la taille de la page (verticalement) puisse etre "scrollé" de sorte que je puisse toujours voir le menu et scroller juste la partie contenu.
Ou peut etre est ce possible d'afficher directement une autre page dans le contenu de l'onglet ?
Merci par avance de vos reponse, si je ne suis pas assez clair je m'en excuse.

chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005
21 mai 2004 à 13:49

http://www.javascriptfr.com/code.aspx?ID=21568

davidex Messages postés 1 Date d'inscription jeudi 6 mai 2004 Statut Membre Dernière intervention 6 mai 2004
6 mai 2004 à 11:48

Comment faire fonctionner ce code pour MOZILLA SVP ???!!!

blodeuedd12 Messages postés 4 Date d'inscription vendredi 30 janvier 2004 Statut Membre Dernière intervention 6 février 2004
30 janv. 2004 à 11:15

je suis + ou - débutante, et j'ai un petit problème avec ce menu (j'espère que qqn passera par là, parce que je vois que les posts précédents datent de plusieurs mois), au moment de charger une nouvelle page sur IE avec ce menu, au lieu de tomber sur le 1er onglet, j'ai une page avec tous les onglets fermés (même le 1er) et le contenu de tous les div s'affiche à la suite. c'est normal O_o;;? est-ce que qqn aurait une solution pour moi svp?

masternico Messages postés 487 Date d'inscription dimanche 5 octobre 2003 Statut Membre Dernière intervention 1 septembre 2011
3 nov. 2003 à 23:41

tres bon example... je compte m'en reservir pour le carnet d'adresse de mon agence commerciale... cela me permet de pouvoir enregistrer de multiple champs sans avoir une page de 3km sous les yeux...

cs_meh Messages postés 66 Date d'inscription dimanche 18 août 2002 Statut Membre Dernière intervention 9 juillet 2007
11 oct. 2003 à 05:49

merci!! (et bonne nuit!)

francktfr Messages postés 101 Date d'inscription vendredi 30 août 2002 Statut Membre Dernière intervention 5 novembre 2004
11 oct. 2003 à 05:27

ben tu remplace le 'onclick' par 'onmouseover'.

cs_meh Messages postés 66 Date d'inscription dimanche 18 août 2002 Statut Membre Dernière intervention 9 juillet 2007
11 oct. 2003 à 05:25

une question: et si le même truc marchait en rollover? ça m'intéresserait vachement:))

ralecul Messages postés 111 Date d'inscription dimanche 23 mars 2003 Statut Membre Dernière intervention 1 août 2008
19 juil. 2003 à 15:52

Merci pour l'info, je vais donc me contenter de la compatibilité avec IE
pour l'instant !

francktfr Messages postés 101 Date d'inscription vendredi 30 août 2002 Statut Membre Dernière intervention 5 novembre 2004
19 juil. 2003 à 15:03

Normal, je n'ai pas essayé.
Oubliez netscape, AOL en a stoppé le devellopement, ils ont
viré 50 ingenieurs de netscape ...
Je modifierais mes scripts pour que ca fonctionne aussi sur
Opéra et Mozilla .. ;)

ralecul Messages postés 111 Date d'inscription dimanche 23 mars 2003 Statut Membre Dernière intervention 1 août 2008
19 juil. 2003 à 14:04

C'est vraiment très sympa comme code : c pas lourd à télécharger.
Mais je n'arrive pas à le faire marcher avec netscape et opera ...

Si quelqu'un à une solution à me proposer ?

Merci !

mathieumg Messages postés 558 Date d'inscription mardi 4 février 2003 Statut Membre Dernière intervention 18 février 2006
11 juil. 2003 à 16:15

Très vrai !

De plus en PHP un petit include et tu peux éditer la page sans avoir à toucher à celle avec les onglets !

Mathieu

francktfr Messages postés 101 Date d'inscription vendredi 30 août 2002 Statut Membre Dernière intervention 5 novembre 2004
11 juil. 2003 à 16:13

Mettez les DIV "Content" au dimensions de la page, les onglets en hauts et vous avez un joli menu de navigation ... ;)
Amusez vous bien :o)

linkinpar236737 Messages postés 161 Date d'inscription jeudi 20 mars 2003 Statut Membre Dernière intervention 7 mai 2007
11 juil. 2003 à 15:48

C'est pas mal du tout ! En plus, très configurable, ca irait très bien pour un menu... pourquoi pas ?

mathieumg Messages postés 558 Date d'inscription mardi 4 février 2003 Statut Membre Dernière intervention 18 février 2006
10 juil. 2003 à 15:25

Très bien comme code et de plus tu peux mettre n'importe quoi dans les DIV telle une page complète !

ONGLETS

Votre réponse

Discussions similaires