begin process at 2012 02 12 00:04:37
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > ONGLET À TABULATION MULTI BLOC

ONGLET À TABULATION MULTI BLOC


 Information sur la source

Note :
9,3 / 10 - par 10 personnes
9,30 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :onglet, tabstrip, tabulation, navigation, iframe Niveau :Initié Date de création :23/02/2006 Date de mise à jour :06/01/2008 19:13:22 Vu / téléchargé :17 142 / 3 215
Auteur : MaX3315

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (63)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Pour l'une de mes applications web en cours de développement j'avais besoin d'un menu à onglet mais qui se trouverai dispersé en trois morceaux autour de ma fenetre principal....

C'est pas clair???  bon ben je vous invite à regardé la démonstration http://codessources.votre-web.com/js/onglet/demo/

;-)

Source

  • Démonstration en ligne
  • http://codessources.votre-web.com/js/onglet/demo/
  • Explication détaillées, voir les commentaires du code sources
Démonstration en ligne
http://codessources.votre-web.com/js/onglet/demo/

Explication détaillées, voir les commentaires du code sources

 Conclusion

Tout est dis dans le fichier de démo... je vous ai expliqué de manière détaillé comment utiliser mon script.

Les commentaires sont les bienvenus.

Mise à jour du 6 janvier 2007
------------------------------
Aucune modification dans le code. Par contre face aux nombreuses demandes par email concernant les images sources... j'ai redoublé d'effort pour les retrouver. Voilà chose faîtes!
Vous trouverez trois fichiers photoshop qui pourront vous aidez à construire vos propres graphismes. Par contre je vous conseil pour travaillé de rassembler ces trois fichiers en un seul onglet pour élaborer votre graphisme.
Archive à jour http://codessources.votre-web.com/js/onglet/onglet Tabulation.zip.
Je ne me suis pas permis d'intégrer les psd sur Codes-Sources afin de ne pas alourdir ce site.

Mise à jour du 1 mars 2006
---------------------------
Ajout de deux méthodes permettant l'ajout et la suppression d'onglet dynamiquement.
Cela veut dire que vous pouvez supprimer ou ajouter des nouveaux onglets quand vous le souhaité.

Voir les méthodes:
<object TabularBloc>.addButtonAt(...)
<object TabularBloc>.deleteButtonAt(...)

J'en ai profité pour mettre de nouvelles images un peu plus jolies :-)
, en attendant que je poste un petit tutorial à ce sujet sur codes sources graphisme.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

01 mars 2006 15:48:10 :
Ajout de deux méthode permettant l'ajout et la suppression dynamique d'onglets.
06 janvier 2008 19:13:22 :
Mise à jour du 6 janvier 2007 ------------------------------ Aucune modification dans le code. Par contre face aux nombreuses demandes par email concernant les images sources... j'ai redoublé d'effort pour les retrouver. Voilà chose faîtes! Vous trouverez trois fichiers photoshop qui pourront vous aidez à construire vos propres graphismes. Par contre je vous conseil pour travaillé de rassembler ces trois fichiers en un seul onglet pour élaborer votre graphisme. Archive à jour http://codessources.votre-web.com/js/onglet/ongletTabulation.zip. Je ne me suis pas permis d'intégrer les psd sur Codes-Sources afin de ne pas alourdir ce site.

 Sources du même auteur

Source avec Zip Source avec une capture DESSINER DES LIGNES SUR VOTRE PAGE WEB
Source avec Zip SHOWMODALDIALOG POUR TOUS LES NAVIGATEURS MODERNES
Source avec Zip Source avec une capture AUTO SCROLLER DE NEWS
Source avec Zip Source avec une capture GÉNÉRATEUR DE CHAÎNE POUR LA FONCTION DATE() DE PHP4
Source avec Zip Source avec une capture MASQUAGE DES EMAILS AUX ROBOTS DE RÉCUPÉRATION D'EMAILS (ANT...
Toutes les sources de MaX3315

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Toutes les sources de la catégorie Menu & Co

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec Zip Source avec une capture SCROLLBAR CLASS par heycraft
Source avec Zip Source avec une capture NAVIGATEUR INTERNET HAVRET par HAVRETos
Source avec Zip Source avec une capture NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh
Source avec Zip TBFRAME: TAB BROWSING FRAME par triumphs

Commentaires et avis

Commentaire de MaX3315 le 23/02/2006 12:17:01

Le script a été testé avec succès sous Firefox 1.x, IE 7 (béta 2), Opera 8 et Safari 2.02

Pas de problème à prévoir pour IE6 (mais si quelqu'un peut confirmé merci).

Sinon côté amélioration ou suite à donné à ce projet :
- implémenté les onglets pour un usage vertical.
- rendre les onglets utilisables au clavier

Je m'y penche dès que possible.

Commentaire de babid le 24/02/2006 12:09:01

Salut,

Ca à l'air super !!! Je le testerai plus tard.

8/10

Commentaire de toutphp le 27/02/2006 01:29:50

Vraiment génial, et en plus il est portable sous tout les OS et browser ! 10/10

Commentaire de MaX3315 le 27/02/2006 01:33:07

Merci, on m'a juste signalé par mail des soucis avec des vielles versions de Safari (1.x) et IE5 pour mac. Mais dès qu'on me fournira plus de détails à ce sujet je patcherai cela.... il ne doit pas s'agir de grand chose.

Merci.

Commentaire de toutphp le 27/02/2006 01:44:13

Juste un petit truc : Est-ce normal que tes <pre....> ont tous le même id=line1 (dans ton exemple)? De plus tu pourrais rendre ton code "normalisé" en appelant ton code JS comme ça : <script type="text/javascript">

Mais sinon rien a redire dans le JS ! Comme c une source JS pas de problème ! c'est que du chipotage dans l'air...

Dorénavant, la seule limite avec le JS sera le créateur.... :-p

Commentaire de MaX3315 le 27/02/2006 02:02:33

Erf, ca doit être les copier coller de <pre... d'ailleurs je me demande pourquoi ils ont un id ceux la...  de toute façon trop tard la note est mise lol ;-)

Commentaire de toutphp le 27/02/2006 03:21:45

Coucou c encore moi :
J'ai un problème que tu n'as pas dans le code exemple :

voici mon code
/******************************************************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tabular.global.js"></script>
<script type="text/javascript" src="js/tabular.class.js"></script>
<script type="text/javascript">
var currentPage=0;
function f_init()
{
var myTopTab=new TabularBloc('topTabular');
myTopTab.addButton('Accueil','function','changePage','0');
myTopTab.addButton('Téléchargement','function','changePage','1');
myTopTab.addButton('A propos de ...','function','changePage','2');
myTopTab.init();
myTopTab.selectTab(0);
}
function changePage(num)
{
document.getElementById('page'+currentPage).style.display='none';
currentPage=num;
document.getElementById('page'+currentPage).style.display='block';
}
</script>
</head>

<body onload="javascript:f_init()">
<table width="100%" style="height: 100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image:url(images/background_tabular_bar.gif); background-position:bottom; background-repeat:repeat-x;"><div id="topTabular">&nbsp;</div></td>
</tr>
<tr>
     <td style="background-color:#477bb5; color:#FFFFFF; height:30px;">&nbsp;</td>
</tr>
<tr>
<td style="background-image:url(images/bottom_background_tabular_bar.gif); background-position:top; background-repeat:repeat-x; height:40px;">&nbsp;</td>
</tr>
<tr>
<td>
<table border="0" width="100%" id="page0" style="display:block"><tr><td>essai0</td></tr></table>
<table border="0" width="100%" id="page1" style="display:none"><tr><td>essai1</td></tr></table>
<table border="0" width="100%" id="page2" style="display:none"><tr><td>essai2</td></tr></table>
</td>
</tr>
</table>
</body>
</html>
/**********************************************************************/

voici l'erreur :

/**********************************************************************/
Erreur : this.buttons[this.selectedIndex][2] is not a function
Fichier source : file:///C:/Program%20Files/EasyPHP1-8/www/PourGFI2/js/tabular.class.js
Ligne : 66
/**********************************************************************/

peux-tu m'aider ?

Commentaire de MaX3315 le 27/02/2006 08:08:12

Oui,

En fait tu a mis : myTopTab.addButton('A propos de ...','function','changePage','2');

Et il faudrait myTopTab.addButton('A propos de ...','function',changePage,'2');

J'explique: il s'agit d epasser la référence à une fonction ici chnagePage... ec qui est très différent de lui passer 'changePage'... qui n'est ni  plus ni moins qu'une chaîne de caractère.

Je dois avouer que j'ai psa testé mais je pense que le reste c'est ok.

Commentaire de toutphp le 27/02/2006 08:40:13

ah !!!!!   ok, c vrai que ça va tout de suite mieux ! merci

Commentaire de Superjun le 27/02/2006 13:45:37

Génial ce script, exactement ce que je cherchais :D

Seul petit point à déplorer du coté du graphisme, c'est que lorsqu'on clique sur le bouton le plus à droite, le bord droit du bouton ne s'accorde pas totalement avec le fond.

Un chose qui aurait été bienvenue car fonctionnelle, ça aurait été de faire en sorte que les onglets se mettent au-dessus/dessous sans que ça change les bords : --> On créé juste l'onglet-type (ou les deux: selectionné et non sel) et plus les bords pour chaque cas (gain de temps à l'adaptation pour n'importe quel site)
Lorsqu'on sélectionne un onglet, celui-ci se positionne au-dessus des autres.

Sinon il est parfait pour moi ;)

Commentaire de toutphp le 27/02/2006 13:52:44

-->superjun

Sinon côté JavaScript tu vois quelque chose à y redire lol ?
Si tu te sens capable de refaire les graphisme et de les recommuniquer à l'auteur, je pense qu'il en serait ravis !
(PS : c'est tout simplement une gentille boutade ! -> sans le son, des fois c'est très durd à deviner que l'on veut plaisanter)

Commentaire de MaX3315 le 27/02/2006 14:33:02

NB: j'ai déjà refait les graphismes pour mon appli, la c'était vraiment du brouillon. Je l'ai mettrai sur mon site ainsi que le fichier Photoshop afin que tout le monde puisse mettre c'est couleur.

D'ici quelque jours ca sera en ligne... je vous préviendrez.

Sinon pour répondre à ta solution SuperJun c'est tout à fait envisageable.. mais ca nécessite d'utiliser de la transparence... le jour ou IE gérera les PNG transparent.. il y aura effectivement cette solution. Mais a leur actuel avec des gifs ca donne des effets d'aliasing que je ne supporterai pas. Mais avec le fichier photoshop que je mettrai en ligne vous verra il sera très simple de faire vos propre skin.. je vais même faire une source sur codes sources graphique.

Commentaire de toutphp le 27/02/2006 14:49:11

Que dire de plus, tout le travail va être maché ! Excellent, dommage que l'on puisse voté qu'une seule fois

Commentaire de Superjun le 27/02/2006 16:13:28

Super boulot, Max3315 ;)

--> ToutPHP
Justement je me sentais pas tellement capable de refaire les graphismes.
Et c'est pour ça que je proposais cette solution ;P

Mais comme l'a fait remarquer Max3315, je n'avais pas pensé à la gestion des PNG par IE qui est vraiment dégeu...

Commentaire de toutphp le 27/02/2006 16:17:25

Ouai en effet, la gestion ait vraiment dégux avec IE

Commentaire de mickaelpfr le 01/03/2006 09:49:40

yop :) script vraiment bien foutus , mais serait-il possible de pouvoir supprimer un onglet dynamiquement ??
je bosse avec les méthodes ajax ( php+javascript ... )
et il me serait fort utile de pouvoir ajouter ET supprimer des onglet a la volé...

coordialement

Mickael

Commentaire de MaX3315 le 01/03/2006 09:53:42

Oui, je vais ajouter cela... une petite fonction bloc.removeButton(num). qu'il faudra faire suivre par bloc.init().

J'ajoute ce petit bout de code et je mets à jour.

Commentaire de mickaelpfr le 01/03/2006 12:02:27

salut maxou :)
bon en fait heu je ne vais pas jouer les troubles fête, mais je viens de réussir a créer une fonction en 15 ligne de code pour le début ( ajout et suppresion d'onglet dynamique :) ) via les méthode de l'objet "Node" voila brut de pomme ce que ça donne :
function ajout()
{

liste=document.getElementById("liste_onglet");
texte="<a href=\"#\" >"+document.getElementById("nom_onglet").value+"</a><a href=\"#\" onClick=\"supprime()\">X</a> ";

nouveauli=document.createElement("li");

nouveauli.innerHTML=texte;

liste.appendChild(nouveauli);

}
   function supprime()
{

liste=document.getElementById("liste_onglet");
/*liste.removeChild( liste.childNodes[5] );*/
premier=liste.firstChild;
liste.removeChild(premier)

}

ensuite coté html :

    <ul id="liste_onglet">
      <li><a href="#">Home</a></li>
      <li id="current"><a href="#">News</a></li>
      <li><a href="#">Produits</a></li>
      <li><a href="#">A propos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

et pour finir les boutons

<input type="text" id="nom_onglet"><input type="button" value="ajout" onClick="ajout()"><input type="button" value="supprime" onClick="supprime()">

très très simple a adapté pour créer des onglets avec leur contenu dynamiquement ;)

je continus et te mp ou je posterais une source dans la journée

coordialement et encore bravo pour ta source

Commentaire de MaX3315 le 01/03/2006 12:13:36

Oui, enfin de mon coté je vais juste ajouter une fonction de suppression, puisque celel d'ajout est déjà en place.

Il suffit pour ajouté dynamique de simplement faire dans le cas d'un usage avec un boutton de:
<input type="button" onClick="monTab.addButton(....); monTab.init);" value="add">

Ca ca devriat dejà fonctionné....  et donc je vais juste ajouté delButton()
La seule difficulté c'est que je ne sais pas encore comment identifier le button à supprimmer (son label... pas sure car deux buttons pourrais avoir le même label, son id... il est généré alétoirement à la création, son rang... cela néccessite de décalé les autres... ou de faire des tests supplémentaire dans d'autre fonction...

Mais promis j'aporte une solution dans la journée. :-)

Commentaire de MaX3315 le 01/03/2006 15:49:44

Voilà deux méthodes supplémentaires pour ajout/suppression d'onglets dynamiquement.

Bon usage.

Commentaire de meh le 17/04/2006 12:13:41

Mis à part le code html de base c'est du super onglet, merci !

Commentaire de gelcoat le 19/05/2006 15:01:44

salut a tous

j'aurais aimer savoir si y'avait moyen d'agrandir les les cellules?merci

Commentaire de MaX3315 le 19/05/2006 16:25:20

Bonjour Gelcoat

Alors j'ai prévus deux variables dans le fichier tabular.class.js à savoir
#     //taille des celulles separatrice
#     this.interWidth=30;
#     this.interHeight=44;

Qui détermine la taille des cellules séparant deux onglets. Il suffit de mettre les dimensions en rapport avec les images que tu souhaites y mettre. En théorie cela devrait suffire. Bonne continuation.

Commentaire de gelcoat le 22/05/2006 18:53:00

Merci c'est nikel!!
Superbe systeme d'onglet sinon!!

http://www.gelcoat.ifrance.com/onglet/index.html

Commentaire de MaX3315 le 22/05/2006 23:30:06

Merci et de rien.

NB: ton lien pointe vers une erreur 404.

Commentaire de guitrouweb le 30/05/2006 14:42:25

Salut à tous,

bravo Max3315 pour ce système d'onglets très pratique et très ergonomique.

Je suis débutant et j'aurais aimer savoir s'il est possible, dans l'onglet "en haut" (composé dans l'exemple de "Acceuil", "Démonstration" et "Explications") d'ajouter en desous de chaque onglet un menu.

Merci d'avance

Commentaire de MaX3315 le 30/05/2006 14:49:25

"...tout est possible, tout est réalisable..."  [ca vous dit rien.. ;-)]

Plus sérieusement, je vois deux solutions:
- soit triturer directement mon code et donc y ajouter ce système de menu... mais bon ca va faire beaucoup de boulot.
- plus simple, utiliser un script de menu existant et mettre ce qu'il faut comme label du menu.

Exemple:
label avant 'Téléchragement'
label après '<div id="monmenu1" onMouseOver="menuopen(this);" etc....>'  (dépends du menu utilisé bien sur).

Je pense que cette seconde solution peut fonctionner.

Commentaire de xriou le 14/06/2006 20:14:48

Comment garder intact le contenu d'un onglet sans qu'il soit réinitialisé ?

Je m'explique :

J'ouvre l'onglet A qui fait appel à une page a.html, c'est un formulaire banal. je remplis deux ou 3 champs.

Je change d'onglet en cliquant sur l'onglet B. Et quand e reviens sur mon onglet A, j'aimerais retrouver ma page telle que je l'ai laissée.

J'espere être clair ;-)

MERCI a tous pour vos reponses.

Commentaire de Superjun le 14/06/2006 21:25:36

Il faut envoyer le formulaire lorsque tu change d'onglet. Ensuite avec PHP, tu peux le stocker qqpart (par exemple dans $_SESSION) et rappeller les données quand tu reviens dans l'onglet A ;)

Commentaire de xriou le 14/06/2006 22:10:49

j'aurais du prendre un autre exeple qu'un formulaire. Dans mon cas pour etre precis j'ai un fals (SWF) dans un onglet. J'aimerais par que le flash soit rechargé de 0 mais plutôt que ça fonctionne comme les onglets de mozilla.

Commentaire de MaX3315 le 15/06/2006 07:44:01

C'est possible en liant l'action des onglets a un fonction qui cachera/masquera des div ou table.

Dans l'exemple donné plus haut:
<script type="text/javascript">
var currentPage=0;
function f_init()
{
var myTopTab=new TabularBloc('topTabular');
myTopTab.addButton('Accueil','function','changePage','0');
myTopTab.addButton('Téléchargement','function','changePage','1');
myTopTab.addButton('A propos de ...','function','changePage','2');
myTopTab.init();
myTopTab.selectTab(0);
}
function changePage(num)
{
document.getElementById('page'+currentPage).style.display='none';
currentPage=num;
document.getElementById('page'+currentPage).style.display='block';
}
</script>
</head>

<body onload="javascript:f_init()">
<table border="0" width="100%" id="page0" style="display:block"><tr><td>essai0</td></tr></table>
<table border="0" width="100%" id="page1" style="display:none"><tr><td>essai1</td></tr></table>
<table border="0" width="100%" id="page2" style="display:none"><tr><td>essai2</td></tr></table>

Cet extrait de ma page de démo en ligne montre l'implentation de la chose.

Commentaire de xriou le 15/06/2006 14:02:35

Merci beaucoup. Je me suis tellement focalisé sur myTab (sous-menus), que j'en ai oublié myTopTab ! Tout marche nickel !!! Merci. Ton script est génial

Commentaire de MaX3315 le 15/06/2006 15:13:18

De rien :)

Commentaire de xriou le 30/06/2006 19:14:58

je ne comprends pas comment recuperer dynamiquement l'id du tab selectionné
de façon a passer l'id sans prompt quand j'invoque deleteButtonAt(?????).

Commentaire de MaX3315 le 30/06/2006 23:31:36

En fait c'est assez simple.
Le td ou l'on clic possède un id qui contient toute les informations nécessaire :

Exemple : id="topTabular_my_button_1"

-en fait _my_button_ est la partie qui indique que c'est un boutton
-ce qui se trouve avant, à savoir topTabullar c'est l'identifiant de la barre de tabulation (Il y a une fonction qui permet de retrouver l'objet tabulation a parttir de son identifiant. find... ou get.. quelquechose).
-et enfin le 1 indique le numéro du tab.

Et voilà :)

Commentaire de xriou le 01/07/2006 00:23:27

merci c pas tout à fait ça. tout ça j'avais bien compris...

en fait j'ajoute des onglets. et de temps en temps l'utilisateur doit etre capable de fermer l'onglet courant.

quelle variable dois je passer  sur le OnClick dans deleteButtonAt()

Commentaire de MaX3315 le 01/07/2006 08:40:17

TabularBlocObj.deleteButtonAt(indexDuTab)

Sachant que index du tab commence à 0.

tab1 |tab2 | tab3 | tab4

Pour surrpimmer le tab3
Il faut donc passer l'entier 2 en argument.

Et voilou.

PS: TabularBlocObj.deleteButtonAt et définit plus bas par la fonction TABULAR_deleteButtonAt(positionIndex) ligne 253 du fichier tabular.class.js

Commentaire de xriou le 01/07/2006 11:49:34

Tu vas te dire "Mais il comprend rien celui-là !" lol

En fait le fonctionnement de ton script y'a no soucy. C juste quel varaible puis-je passer dynamiquement (sans ecrire en dur 0, 1, 2, 3...)

Commentaire de MaX3315 le 01/07/2006 12:04:20

Ok, j'y suis... ce qu'il te faut c'est l'index de L'ONGLET COURANT ;)

En fait chaque bloc de tabulation possède un attribut this.selectedIndex
Cette index est à -1 si aucun tab n'est ouvert.

Si tu utilise plusieurs blocs de tabulation liés, il faut que tu ballaye chaque blocs. Théoriquement seul un d'eux aura LeBlocObj.selectedIndex>=0

Suffira donc de faire
LeBonBloc.deleteButtonAt(LeBonBloc.selectedIndex);

En espérant avoir compris cette fois :p

Commentaire de xriou le 01/07/2006 14:35:13

Merci. En fait il suffisait d'ecrire MyTab.selectedIndex

MERCI BEAUCOUP !

Commentaire de martialus80 le 12/08/2006 18:58:03

bonjour
Je suis débutant et j'aurais aimer savoir s'il est possible de mettre les onglets en position verticale comme les cahiers de textes.
merci

Commentaire de MaX3315 le 12/08/2006 20:22:21

Bonjour Martialus80,

Pour un débutant je pense qu'il vaut mieux essai de trouver un autre script permettant de faire cela...

Maintenant mon script est tout à fait adaptable pour une utilisation verticale, mais malheureuseument je n'ai pas assez de temps libre pour pouvoir l'implémenter moi même... mais je suis prêt à éguillier qui bon est assez courageu pour ce lancer...

Bonne recherche.

Commentaire de dmoinard le 05/09/2006 18:47:47

Bonjour MaX3315 et mes respects pour ce superbe travail, vraiment magnifique.
Je suis en train de l'adapter mais j'ai un soucis.
Je suis obliger d'utiliser des frames, je sais c'est pas bien mais je peux pas faire autrement avec tous les formulaire que je traite.
La partie onglet (ou chaque onglet comporte aussi un menu d'onglet) est dans la frame du haut et l'affichage se fait dans la frame du bas. Comme dans cet exemple ici :
http://www.zegrange.com/root/dosfab/index.php
Mon probleme vient du fait que quand je change de MyTopTab, j'ai toujours l'ancien MyTab d'afficher dans la frame du bas (et c'est complement normal d'ailleurs). Je cherche donc simuler un clic sur le MyTab(0) a chaque fois qu'on change de MyTopTab, l'idéale sera de pouvoir resimuler le clic du dernier MyTab consulter précédement, et a défaut le 0.
Faut dire qu'en javascript et les objets, je suis pas encore trop à l'aise.
Encore Merci.

Commentaire de MaX3315 le 05/09/2006 18:56:49

Si je résume tu voudrais que lorsque la seconde lignes de tabulation se rafraichis (suite au rechargement de la frame le contenant suite à un clic dans les onglet du haut...) tu recharges imédiatement le dernier onglet de la section concerné...

Si c'est bien cela tu devrais t'en sortir en utilisant la méthode MyTab.init(indexTab);

Sachant que indexTab a qu'a être stocké en cookie et mis à 0 si pas trouvé dans un cookies.

J'espère avoir été clair... :)

Commentaire de dmoinard le 05/09/2006 19:06:03

Oui c'est exactement ça.
J'avais pas penser au cookie, excellente idée.
Par contre, au risque de passer pour un ignare en puissance, je le met ou le MyTab.init(indexTab) ?
Parce que si je le met a la fin de la fontion  changePage(num), j'ai l'erreur suivante : 'MyTab' est indéfini.
Merci pour cette réactivité, c'est bleuffant !

Commentaire de MaX3315 le 05/09/2006 19:20:44

Cela ce situe dans ma fonction f_init() dans ton fichier top.php

Tu as déjà pour chaque nouvelle barre d'onglet ceci: myTab.init(0);
C'est ce 0 qui doit etre l'onglet que tu souhaites.

Bonne chance.

Commentaire de dmoinard le 05/09/2006 19:32:41

Oui c'est vrai.
Mais f_init() est lancer 1 seule fois au chargement de la page.
Ensuite lors de la navigation sur les onglet haut, je n'arrive pas à simuler un clic sur les onglet bas qui permettrai  de rafraichir la frame du bas et retrouver ainsi la section concerné.
je sais pas si je suis explicite !

Commentaire de MaX3315 le 05/09/2006 19:45:00

Dans ce cas myTab.selectTab(num), ceci simule le clic.

Commentaire de dmoinard le 05/09/2006 20:12:08

Parfait, encore merci.

Commentaire de V_A_L le 15/09/2006 14:00:14

tres bien, tres bon code et j'en avais justement besoin...
une question cependant , tu parles des images en PSD.... ou peut on les recuperer?

Commentaire de MaX3315 le 15/09/2006 14:12:19

Salut V_A_L déjà merci.
Concernant le PSD j'ai une mauvaise nouvelle puisque je ne retrouve plus le fichier contenant les tracès et les calques. dsl

Commentaire de younes371 le 19/09/2006 18:33:10

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

Commentaire de MaX3315 le 19/09/2006 19:57:15

Bonsoir Younes371,

Je n'aurais malhuereusement pas de temps à consacrer a ton projet. Je peutx te conseillé de regardé des framewokr javascript très bien fait qui te permettrons de très vite mettre en place du drag&and drop et autres choses du genre...

Bon courage.

NB: je ne penzse pas que mon script soit le plus adapt pour une application de type 'web 2.0' comme  les url cité... du moins ce n'a pas été dna smon cachier des charges, donc ca m'hériterai beaucoup d'adaptation.

Commentaire de V_A_L le 21/09/2006 10:34:01

dommage pour moi, mais merci pour ta prompt reponse MaX3315...
je vais donc refaire des PSD... que je te pousserai une fois finis

Commentaire de taye78 le 15/04/2007 01:43:33

Bravo, excellent.
10

Commentaire de arcollet le 06/01/2008 17:37:39

Bonsoir,
Bravo excellente source, implémentation parfaite dans un projet asp.net 2.O
Merci +++++
10/10
Denis

Commentaire de MaX3315 le 06/01/2008 18:55:13

Heureux que cela puisse servir.

Commentaire de MaX3315 le 06/01/2008 19:14:42

Mise à jour pour inclure les fichiers graphiques demandé par beaucoup d'entre vous.

Archive à jour http://codessources.votre-web.com/js/onglet/ongletTabulation.zip.

Commentaire de stefvar le 07/01/2008 08:56:45 10/10

Bonjour et félicitation pour ce script qui est très pratique et ingénieux pour une utilisation dans du PHP.

J'ai une question concernant l'ajout de sous-onglet. Aucune difficulté à cela si ce n'est que la fenêtre s'adapte automatiquement au nombre d'onglets présents. A quel niveau dois je intervenir pour imposer une largeur à 100% quant bien même il n'y ai qu'un seul onglet de présent ?
Merci par avance,

Cordialement.

Stef

Commentaire de MaX3315 le 07/01/2008 10:35:20

Bonjour, et merci pour la note.

Ha mon avis si il y a un interfaçage avec php, il vaut mieux gérer le cas particulier de "un seul onglet" avec un if(...)  et donc ne pas utiliser ma class dans ce cas.

Car je n'est pas fait de distinction entre le nombre d'onglet. Chaque boutton ce voit en effet attrtibuer la class css

.tabularButtonTd {
font-weight:bold;
font-size:11px;
text-align:center;
}

Ou bien je vous invite à regarder dans le code javascript et rechercher ou est ce qu'il y a cette assignation de class. Et réaliser alors a ce niveau le cas particulier on assignant une class spécifique.

Attention toutefois si vous faites cela aux appels aux fonction d'ajout/suppression dynamique d'onglet qui devront également adapter les class css des boutons.

J'espère avoir pû vous donner une piste.

Commentaire de stefvar le 08/01/2008 18:39:32

Bonjour et merci pour la réponse, je vais certainement m'orienter vers une autre "piste".
Bonne continuation.

Commentaire de marsau le 30/05/2008 17:44:43 10/10

cool, very cool ....

Commentaire de Muhafiz le 21/09/2008 11:38:06

Merci pour le code. J'ai une question, comment je peux introduire de données php
venant de mysql dasn une page de menu.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

iframe + navigation [ par rhum07 ] Bonjour.J'ai une page html qui contient une iframe &#224; gauche (nomm&#233;e gauche) et une au centre de ma page(nomm&#233;e principal).La iframe de Ouverture d'un lien d'iframe dans l'onglet en cours [ par spacedelta ] Bonjour, Depuis pas mal de temps, je recherche la solution pour pouvoir ouvrir un lien se trouvant dans une iframe dans l'onglet où se trouve la page navigation par une text box ? [ par novaconcept ] Salut, :) Voilà j'aurais besoin d'un truc tout con mais j'arrive pas à trouver comment le faire. Je voudrais pouvoir mettre un code dans une text bo Rafraichir une page puis simuler un clic [ par HadesRising ] Bonjour à tous ! Voici mon problème : J'ai une page avec plusieurs onglets qui, grâce à un évenement onclick(), affichent un formulaire selon l'ongle angles arrondis et navigation ajax [ par clavz40 ] Bonjour tout le monde, Je créai actuellement un site web et rencontre un petit souci. Je vous explique, j’ai arrondi les angles de mes div via le s Comment insérer le même code javascript plusieurs fois dans la même page? [ par davis22 ] Bonjour, Voici mon soucis, je veux mettre 3 script de rotation iframe dans le meme page. Le problème c'est que je ne sais pas comment faire pour mettr Comment rafraichir 3 iframe ? [ par davis22 ] bonjour dans ce script en bas le contenu des 3 iframe ce change chaque 10 s ! donc moi je veux que le contenu de premier iframe ce change apres 15 s l rafraichir page au clic sur un onglet [ par fog8 ] Bonjour tout le monde, J'ai un problème avec mon site. J'ai une fonction qui bloque le compte lorsque l'utilisateur a tenté de se connecter plus de t Ajax, url et iframes imbriquées. [ par Ahaezod ] Bonjour J'ai sur ma page une iframe dans laquelle se trouve une seconde iframe. Il faut que lorsque ma deuxième iframe soit chargée, un script Ajax s Défilement automatique horizontale dans une iframe [ par alundra405 ] Bonjour à tous ! Alors voilà je suis vraiment un noob en javascript et après moult recherche sur le net, je n'ai pas réussi à trouver la solution à mo


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Renewable Energy is Within Reach
Photo Happy Bright Spring Day Outside 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 4,976 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)