cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009
-
23 févr. 2006 à 12:17
bapt140898
Messages postés1Date d'inscriptionvendredi 20 juillet 2012StatutMembreDernière intervention 3 août 2012
-
3 août 2012 à 06:20
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
bapt140898
Messages postés1Date d'inscriptionvendredi 20 juillet 2012StatutMembreDernière intervention 3 août 2012 3 août 2012 à 06:20
Mercu por le code. Bravo, cela m'a été bien utile...
Muhafiz
Messages postés1Date d'inscriptionjeudi 28 août 2008StatutMembreDernière intervention21 septembre 2008 21 sept. 2008 à 11:38
Merci pour le code. J'ai une question, comment je peux introduire de données php
venant de mysql dasn une page de menu.
cs_marsau
Messages postés4Date d'inscriptionjeudi 10 novembre 2005StatutMembreDernière intervention 9 mai 2006 30 mai 2008 à 17:44
cool, very cool ....
stefvar
Messages postés2Date d'inscriptionmercredi 3 septembre 2003StatutMembreDernière intervention 8 janvier 2008 8 janv. 2008 à 18:39
Bonjour et merci pour la réponse, je vais certainement m'orienter vers une autre "piste".
Bonne continuation.
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 7 janv. 2008 à 10:35
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
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.
stefvar
Messages postés2Date d'inscriptionmercredi 3 septembre 2003StatutMembreDernière intervention 8 janvier 2008 7 janv. 2008 à 08:56
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
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 6 janv. 2008 à 19:14
Mise à jour pour inclure les fichiers graphiques demandé par beaucoup d'entre vous.
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 6 janv. 2008 à 18:55
Heureux que cela puisse servir.
cs_arcollet
Messages postés31Date d'inscriptionjeudi 12 juin 2003StatutMembreDernière intervention13 avril 2008 6 janv. 2008 à 17:37
Bonsoir,
Bravo excellente source, implémentation parfaite dans un projet asp.net 2.O
Merci +++++
10/10
Denis
taye78
Messages postés106Date d'inscriptionmardi 18 juin 2002StatutMembreDernière intervention13 janvier 2007 15 avril 2007 à 01:43
Bravo, excellent.
10
cs_V_A_L
Messages postés2Date d'inscriptionlundi 13 février 2006StatutMembreDernière intervention21 septembre 2006 21 sept. 2006 à 10:34
dommage pour moi, mais merci pour ta prompt reponse MaX3315...
je vais donc refaire des PSD... que je te pousserai une fois finis
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 19 sept. 2006 à 19:57
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.
younes371
Messages postés502Date d'inscriptionmercredi 29 décembre 2004StatutMembreDernière intervention20 mars 2012 19 sept. 2006 à 18:33
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
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 15 sept. 2006 à 14:12
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
cs_V_A_L
Messages postés2Date d'inscriptionlundi 13 février 2006StatutMembreDernière intervention21 septembre 2006 15 sept. 2006 à 14:00
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?
dmoinard
Messages postés5Date d'inscriptionvendredi 14 janvier 2005StatutMembreDernière intervention 5 septembre 2006 5 sept. 2006 à 20:12
Parfait, encore merci.
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 5 sept. 2006 à 19:45
Dans ce cas myTab.selectTab(num), ceci simule le clic.
dmoinard
Messages postés5Date d'inscriptionvendredi 14 janvier 2005StatutMembreDernière intervention 5 septembre 2006 5 sept. 2006 à 19:32
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 !
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 5 sept. 2006 à 19:20
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.
dmoinard
Messages postés5Date d'inscriptionvendredi 14 janvier 2005StatutMembreDernière intervention 5 septembre 2006 5 sept. 2006 à 19:06
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 !
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 5 sept. 2006 à 18:56
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... :)
dmoinard
Messages postés5Date d'inscriptionvendredi 14 janvier 2005StatutMembreDernière intervention 5 septembre 2006 5 sept. 2006 à 18: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.
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 12 août 2006 à 20:22
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.
martialus80
Messages postés1Date d'inscriptionvendredi 21 juillet 2006StatutMembreDernière intervention12 août 2006 12 août 2006 à 18:58
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
xriou
Messages postés8Date d'inscriptionlundi 1 mai 2006StatutMembreDernière intervention 1 juillet 2006 1 juil. 2006 à 14:35
Merci. En fait il suffisait d'ecrire MyTab.selectedIndex
MERCI BEAUCOUP !
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 1 juil. 2006 à 12:04
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
xriou
Messages postés8Date d'inscriptionlundi 1 mai 2006StatutMembreDernière intervention 1 juillet 2006 1 juil. 2006 à 11:49
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...)
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 1 juil. 2006 à 08:40
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
xriou
Messages postés8Date d'inscriptionlundi 1 mai 2006StatutMembreDernière intervention 1 juillet 2006 1 juil. 2006 à 00:23
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()
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 30 juin 2006 à 23:31
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à :)
xriou
Messages postés8Date d'inscriptionlundi 1 mai 2006StatutMembreDernière intervention 1 juillet 2006 30 juin 2006 à 19:14
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(?????).
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 15 juin 2006 à 15:13
De rien :)
xriou
Messages postés8Date d'inscriptionlundi 1 mai 2006StatutMembreDernière intervention 1 juillet 2006 15 juin 2006 à 14:02
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
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 15 juin 2006 à 07:44
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>
essai0
essai1
essai2
Cet extrait de ma page de démo en ligne montre l'implentation de la chose.
xriou
Messages postés8Date d'inscriptionlundi 1 mai 2006StatutMembreDernière intervention 1 juillet 2006 14 juin 2006 à 22:10
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.
Superjun
Messages postés10Date d'inscriptionmardi 16 décembre 2003StatutMembreDernière intervention13 août 2007 14 juin 2006 à 21:25
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 ;)
xriou
Messages postés8Date d'inscriptionlundi 1 mai 2006StatutMembreDernière intervention 1 juillet 2006 14 juin 2006 à 20:14
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.
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 30 mai 2006 à 14:49
"...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 '
' (dépends du menu utilisé bien sur).
Je pense que cette seconde solution peut fonctionner.
guitrouweb
Messages postés1Date d'inscriptionsamedi 19 mars 2005StatutMembreDernière intervention30 mai 2006 30 mai 2006 à 14:42
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
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 22 mai 2006 à 23:30
Merci et de rien.
NB: ton lien pointe vers une erreur 404.
gelcoat
Messages postés10Date d'inscriptionjeudi 23 février 2006StatutMembreDernière intervention 8 novembre 2006 22 mai 2006 à 18:53
Merci c'est nikel!!
Superbe systeme d'onglet sinon!!
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 19 mai 2006 à 16:25
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.
gelcoat
Messages postés10Date d'inscriptionjeudi 23 février 2006StatutMembreDernière intervention 8 novembre 2006 19 mai 2006 à 15:01
salut a tous
j'aurais aimer savoir si y'avait moyen d'agrandir les les cellules?merci
cs_meh
Messages postés66Date d'inscriptiondimanche 18 août 2002StatutMembreDernière intervention 9 juillet 2007 17 avril 2006 à 12:13
Mis à part le code html de base c'est du super onglet, merci !
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 1 mars 2006 à 15:49
Voilà deux méthodes supplémentaires pour ajout/suppression d'onglets dynamiquement.
Bon usage.
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 1 mars 2006 à 12:13
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:
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. :-)
mickaelpfr
Messages postés197Date d'inscriptionmardi 18 février 2003StatutMembreDernière intervention29 avril 20092 1 mars 2006 à 12:02
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()
{
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
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 1 mars 2006 à 09:53
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.
mickaelpfr
Messages postés197Date d'inscriptionmardi 18 février 2003StatutMembreDernière intervention29 avril 20092 1 mars 2006 à 09:49
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
toutphp
Messages postés107Date d'inscriptionlundi 24 mai 2004StatutMembreDernière intervention 5 mai 2010 27 févr. 2006 à 16:17
Ouai en effet, la gestion ait vraiment dégux avec IE
Superjun
Messages postés10Date d'inscriptionmardi 16 décembre 2003StatutMembreDernière intervention13 août 2007 27 févr. 2006 à 16:13
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...
toutphp
Messages postés107Date d'inscriptionlundi 24 mai 2004StatutMembreDernière intervention 5 mai 2010 27 févr. 2006 à 14:49
Que dire de plus, tout le travail va être maché ! Excellent, dommage que l'on puisse voté qu'une seule fois
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 27 févr. 2006 à 14:33
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.
toutphp
Messages postés107Date d'inscriptionlundi 24 mai 2004StatutMembreDernière intervention 5 mai 2010 27 févr. 2006 à 13:52
-->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)
Superjun
Messages postés10Date d'inscriptionmardi 16 décembre 2003StatutMembreDernière intervention13 août 2007 27 févr. 2006 à 13:45
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 ;)
toutphp
Messages postés107Date d'inscriptionlundi 24 mai 2004StatutMembreDernière intervention 5 mai 2010 27 févr. 2006 à 08:40
ah !!!!! ok, c vrai que ça va tout de suite mieux ! merci
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 27 févr. 2006 à 08:08
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.
toutphp
Messages postés107Date d'inscriptionlundi 24 mai 2004StatutMembreDernière intervention 5 mai 2010 27 févr. 2006 à 03:21
Coucou c encore moi :
J'ai un problème que tu n'as pas dans le code exemple :
/**********************************************************************/
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 ?
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 27 févr. 2006 à 02:02
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 ;-)
toutphp
Messages postés107Date d'inscriptionlundi 24 mai 2004StatutMembreDernière intervention 5 mai 2010 27 févr. 2006 à 01:44
Juste un petit truc : Est-ce normal que tes 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
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 27 févr. 2006 à 01:33
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.
toutphp
Messages postés107Date d'inscriptionlundi 24 mai 2004StatutMembreDernière intervention 5 mai 2010 27 févr. 2006 à 01:29
Vraiment génial, et en plus il est portable sous tout les OS et browser ! 10/10
cs_babid
Messages postés49Date d'inscriptiondimanche 21 septembre 2003StatutMembreDernière intervention17 décembre 2008 24 févr. 2006 à 12:09
Salut,
Ca à l'air super !!! Je le testerai plus tard.
8/10
cs_MaX3315
Messages postés170Date d'inscriptionmercredi 18 juin 2003StatutMembreDernière intervention11 mai 2009 23 févr. 2006 à 12:17
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
3 août 2012 à 06:20
21 sept. 2008 à 11:38
venant de mysql dasn une page de menu.
30 mai 2008 à 17:44
8 janv. 2008 à 18:39
Bonne continuation.
7 janv. 2008 à 10:35
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.
7 janv. 2008 à 08:56
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
6 janv. 2008 à 19:14
Archive à jour http://codessources.votre-web.com/js/onglet/ongletTabulation.zip.
6 janv. 2008 à 18:55
6 janv. 2008 à 17:37
Bravo excellente source, implémentation parfaite dans un projet asp.net 2.O
Merci +++++
10/10
Denis
15 avril 2007 à 01:43
10
21 sept. 2006 à 10:34
je vais donc refaire des PSD... que je te pousserai une fois finis
19 sept. 2006 à 19:57
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.
19 sept. 2006 à 18:33
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
15 sept. 2006 à 14:12
Concernant le PSD j'ai une mauvaise nouvelle puisque je ne retrouve plus le fichier contenant les tracès et les calques. dsl
15 sept. 2006 à 14:00
une question cependant , tu parles des images en PSD.... ou peut on les recuperer?
5 sept. 2006 à 20:12
5 sept. 2006 à 19:45
5 sept. 2006 à 19:32
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 !
5 sept. 2006 à 19:20
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.
5 sept. 2006 à 19:06
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 !
5 sept. 2006 à 18:56
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... :)
5 sept. 2006 à 18:47
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.
12 août 2006 à 20:22
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.
12 août 2006 à 18:58
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
1 juil. 2006 à 14:35
MERCI BEAUCOUP !
1 juil. 2006 à 12:04
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
1 juil. 2006 à 11:49
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...)
1 juil. 2006 à 08:40
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
1 juil. 2006 à 00:23
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()
30 juin 2006 à 23:31
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à :)
30 juin 2006 à 19:14
de façon a passer l'id sans prompt quand j'invoque deleteButtonAt(?????).
15 juin 2006 à 15:13
15 juin 2006 à 14:02
15 juin 2006 à 07:44
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>
essai0
essai1
essai2
Cet extrait de ma page de démo en ligne montre l'implentation de la chose.
14 juin 2006 à 22:10
14 juin 2006 à 21:25
14 juin 2006 à 20:14
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.
30 mai 2006 à 14:49
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 '
' (dépends du menu utilisé bien sur).
Je pense que cette seconde solution peut fonctionner.
30 mai 2006 à 14:42
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
22 mai 2006 à 23:30
NB: ton lien pointe vers une erreur 404.
22 mai 2006 à 18:53
Superbe systeme d'onglet sinon!!
http://www.gelcoat.ifrance.com/onglet/index.html
19 mai 2006 à 16:25
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.
19 mai 2006 à 15:01
j'aurais aimer savoir si y'avait moyen d'agrandir les les cellules?merci
17 avril 2006 à 12:13
1 mars 2006 à 15:49
Bon usage.
1 mars 2006 à 12:13
Il suffit pour ajouté dynamique de simplement faire dans le cas d'un usage avec un boutton de:
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. :-)
1 mars 2006 à 12:02
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="[# Home]</li>
<li id="current">[# News]</li>
<li>[# Produits]</li>
<li>[# A propos]</li>
<li>[# Contact]</li>
et pour finir les boutons
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
1 mars 2006 à 09:53
J'ajoute ce petit bout de code et je mets à jour.
1 mars 2006 à 09:49
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
27 févr. 2006 à 16:17
27 févr. 2006 à 16:13
--> 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...
27 févr. 2006 à 14:49
27 févr. 2006 à 14:33
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.
27 févr. 2006 à 13:52
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)
27 févr. 2006 à 13:45
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 ;)
27 févr. 2006 à 08:40
27 févr. 2006 à 08:08
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.
27 févr. 2006 à 03:21
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>
<table border="0" width="100%" id="page0" style="display:block">----, essai0</td>
essai1
essai2
</td>
</tr>
</table>
</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 ?
27 févr. 2006 à 02:02
27 févr. 2006 à 01:44
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
27 févr. 2006 à 01:33
Merci.
27 févr. 2006 à 01:29
24 févr. 2006 à 12:09
Ca à l'air super !!! Je le testerai plus tard.
8/10
23 févr. 2006 à 12:17
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.