Création d'onglets

Résolu/Fermé
Gwen - 29 nov. 2007 à 00:40
 emilie3 - 10 sept. 2010 à 17:24
Bonjour,
Comment puis-je creer des onglets sur mon site ( qui bougent legerement lorsque l'on passe la fleche de la souris dessus ) Merci d'avance
A voir également:

7 réponses

Utiliser flash pour ça??? Lamentable -_-"
http://stilbuero.de/jquery/tabs/
https://pckult.developpez.com/tutoriels/javascript/frameworks/jquery/boite-onglets-web2/
http://www.weedle.fr/tutoriel-jquery-creer-boite-onglets/
Et tout simple :
http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

Petite précision : Même si le post a deux ans, étant dans les premiers résultats de google, je me permet de poster pour éviter à n'importe qui de choisir une solution flash totalement inapproprié pour le web d'aujourd'hui, lourd, et très bientôt obsolète je dirais!

Du flash... On croirais rêver...
12
Dr Zoidberg Messages postés 529 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 12 juin 2015 100
29 nov. 2007 à 11:04
Salut,

Le flash est une solution, tu peux aussi utiliser des librairie javascript toute faite.

Par exemple JQuery (https://jquery.com/ avec sa librairie UI incluant entre autre une gestion des onglets.

Demo des onglets : http://dev.jquery.com/view/trunk/ui/current/demos/ui.tabs.html
Site de UI: https://jquery.com/ sa doc : https://jquery.com/
3
anossi Messages postés 5 Date d'inscription mardi 25 novembre 2008 Statut Membre Dernière intervention 23 février 2011
16 avril 2009 à 02:21
Nous allons dans ce cours apprendre à se servir des TabStrip. C'est normalement un contrôle qui ne recquiert que très peu de code, mais je vais vous apprendre à ajouter des onglets et à en supprimer en exécution. Vous verrez vite que généralement, on ne le fait pas car cela crée certain problème assez lourd (niveau programmation) à régler.

Le principe d'un TabStrip n'est pas très au point. En fait, un TabStrip ne contient qu'une zone et des onglets. Nous sommes obligé de créer des picturebox qui contiendront les contrôles à afficher lorsqu'un onglet est cliqué. Vous allez voir, c'est assez difficile à expliquer mais facile à comprendre.

Le contrôle TabStrip ne se charge pas automatiquement avec Visual Basic, pour le trouver, il vous suffit de cliquez avec le bouton droit sur la barre de composants, allez sur composants et rechercher "Microsoft Windows Common Control 6.0". Une fois tout les contrôles chargés, disposez un TabStrip sur votre form.

Cliquez ensuite avec le bouton droit sur ce TabStrip, et cliquez sur Propriétés. Allez ensuite dans onglets, c'est là que vous pouvez facilement ajouter des onglets. Ajoutez 3 onglets qui porteront simplement le nom de "Onglet 1, "Onglet 2", "Onglet 3" (propriété Caption). Ensuite, définissez la propriété Tag. Pour le premier onglet, tapez 1, pour les deuxième onglet, tapez 2 et pour le troisième, tapez 3. C'est grâce à cette propriété que les PictureBox adéquats s'afficheront au click de cet onglet.

Maintenant, si vous remarquez, vous ne pouvez pas (en mode création) cliquez sur un onglet pour disposer des contrôles pour cet onglet. C'est ce que je disais tantot, il va falloir créer une groupe de contrôle qui contiendra les contrôles à afficher.

Insérez donc un PictureBox sur votre feuille, et réglez sa propriété BorderStyle sur "0 - None". Insérez ensuite dans ce PictureBox les controles que vous désirez. Cela n'a pas d'importance. Insérez ensuite un autre PictureBox sur votre form et nommez le comme le premier inséré (propriété Name) et répondez oui à la question que Visual Basic va vous poser. Vous créerez ainsi un groupe de contrôle. Disposez à nouveau les contrôles que vous désirez. Essayez d'insérer des contrôles différents de ceux insérés dans le premier PictureBox, pour bien comprendre le système. Insérez enfin un dernier PictureBox que vous appelerez également de la même manière que les deux autres (toujours la propriété Name) et encore une fois, disposez les contrôles que vous désirez. Réglez la propriété BorderStyle des deux PictureBox dernièrement ajoutés sur "0 - None" et leur propriété Visible sur False. Disposez ensuite les 3 PictureBox dans le TabStrip, placez-les les uns sur les autres.

Une fois, cela fait, disposez 4 boutons à droite de votre TabStrip. Modifiez leur propriété Caption sur "Compter", "Ajouter", "Supprimer" et "Quitter".

Si vous avez suivi mes indications, votre form devrait plus ou moins ressembler à celle-ci :


Double-cliquez d'abord sur "Quitter" et tapez :
End

Cette commande, comme vous le savez vous permettra de quitter le programme en cours d'exécution. Double-cliquez maintenant sur Compter et tapez :
MsgBox "Il y a " & TabStrip1.Tabs.Count & " onglets", vbInformation + vbOKOnly, "Comptage"

Nous utilisons ici une MsgBox pour afficher un message. Le message en question est le nombre d'onglet que contient le TabStrip. Ne vous inquiètez pas si vous ne comprenez pas toute la ligne de commande, il vous faut pour cela savoir utiliser les MsgBox. La partie importante de cette instruction est
TabStrip1.Tabs.Count

Cette instruction renvoie en fait simplement le nombre (Count) d'onglets (Tabs) contenus dans le TabStrip (TabStrip1). Double-cliquez maintenant sur supprimer et tapez :
TabStrip1.Tabs.Remove TabStrip1.SelectedItem.Index
TabStrip1_Click

La première instruction permet de supprimer un onglet. Cette commande s'utilise en passant en argument l'index de l'onglet à supprimer. Cet index est renvoyé par (.SelectedItem.Index). Effectivement, cette méthode renvoie l'index (.Index) de l'élément sélectionné (.SelectedItem). Ensuite, nous appelons l'événement Click du TabStrip1. Cet évément n'a pas encore été défini. Cet événement va nous permettre d'afficher les PictureBox associé au onglet. Double-cliquez donc sur le TabStrip et tapez :
Dim x As Byte

For x = 0 To 2

Picture1(x).Visible = False

Next x

If (TabStrip1.SelectedItem.Tag - 1 >= 3) Then Exit Sub

Picture1(TabStrip1.SelectedItem.Tag - 1).Visible = True

Nous commençons par déclarer une variable de type Byte. Effectivement, il est rare que nous ayons plus de 255 onglets dans un TabStrip. Nous exécutons ensuite 3 fois une boucle qui va nous permettre de cacher tout les PictureBox. Nous modifions donc leur propriété Visible sur False. Nous passons la variable de la boucle en tant qu'index pour cacher le contrôle. A la première exécution, c'est donc le contrôle Picture1(0) qui sera caché, à la deuxième exécution, ce sera le Picture1(1), etc,...

Ensuite, nous devons nous arranger pour afficher le PictureBox dont l'index correspond à la propriété Tag - 1 (car les index des groupes de contrôles commencent à 0 contrairement à ceux des onglets du TabStrip qui commencent à 1). Ici, nous n'avons défini que 3 PictureBox, les indices s'arrêtent donc à 2. Nous disons donc que si la propriété Tag - 1 de l'onglet sélectionné est plus grand ou égal à 3 (If (TabStrip1.SelectedItem.Tag - 1 >= 3)), nous devons quitter la procédure en cours (Exit Sub).

Nous disons ensuite que le PictureBox qui correspond à l'index défini par la propriété Tag-1 de l'onglet sélectionné doit être visible (Picture1(TabStrip1.SelectedItem.Tag - 1).Visible = True). Exécutez votre programme et cliquez sur les onglets, vous verrez que cela fonctionne (encore heureux ... ^^).

Vous comprenez maintenant pourquoi nous appelons cet événement à la suppression d'un onglet. Cela sert simplement à mettre à jour le PictureBox à afficher après le suppression de l'onglet.

Cliquez ensuite sur Ajouter et tapez :
Dim titre As String

titre = InputBox("Veuillez entrer le titre de l'onglet", "Titre", "Onglet")
TabStrip1.Tabs.Add , , titre
TabStrip1.Tabs(TabStrip1.Tabs.Count).Tag = TabStrip1.Tabs.Count

Nous commençons d'abord par déclarer une variable de type String. Ensuite, nous demandons grâce à une InputBox le titre de l'onglet à ajouter. Nous stockons ce texte dans la variable précédemment déclarée. Nous ajoutons ensuite cet onglet. Les deux premiers paramètres sont facultatifs, nous les passons donc. Le troisième argument attend le titre de l'onglet, nous faisons donc passer la variable contenant le titre en paramètre. Ensuite, nous devons définir la propriété Tag de cet onglet pour pouvoir afficher un PictureBox avec cet onglet. Nous devons donc modifier le dernier onglet du TabStrip. Il vous faut donc son index, mais comment faire ?

Il suffit simplement de récupérer le nombre d'onglet contenu dans le TabStrip. Vu que les index des onglets commencent à 1, ce nombre vaudra l'index du dernier onglet. Nous le passons donc en argument de la collection Tabs (.Tabs()) du contrôle TabStrip1 (TabStrip1). Nous modifions la propriété Tag de ce contrôle et nous lui attribuons la valeur de son index pour pouvoir afficher le PictureBox.

Ici est le problème du TabStrip que l'on modifie en exécution. Effectivement, vous avez sans doute remarqué que si nous ajoutons 3 onglets par exemple, nous n'avons pas de PictureBox qui a l'index 5... Il vous faudrait donc créer des contrôles en mode exécution en passant par la fonction load. Cet façon de faire est très lourde mais c'est pourtant la seule, il est donc conseillé de ne pas modifier un TabStrip en exécution.
0
Dr Zoidberg Messages postés 529 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 12 juin 2015 100 > anossi Messages postés 5 Date d'inscription mardi 25 novembre 2008 Statut Membre Dernière intervention 23 février 2011
16 avril 2009 à 08:30
Facile de repomper sans citer la source
http://www.areaprog.com/index.php?page=lire&id=50

En plus c'est mal fait et hors sujet ...
0
Ziman > Dr Zoidberg Messages postés 529 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 12 juin 2015
12 mai 2009 à 23:18
De quoi qui est mal fait ?
0
Dr Zoidberg Messages postés 529 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 12 juin 2015 100 > Ziman
13 mai 2009 à 07:57
Le reponpage (sans mise en page , sans balises code ...). Et hors sujet car c'est du VB et non un langage Web comme il est question ici.
0
Ziman > Dr Zoidberg Messages postés 529 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 12 juin 2015
13 mai 2009 à 11:34
Ah oki, je pensais que tu parlais du cours en lui-même ;-)

Dans ce cas, je te rejoins sur ce que tu as dit, c'est pas bien de faire ça. Surtout si le rédacteur tombe la dessus, il risquerait de pas apprécier 8-)

(je confirme que j'apprécie pas, mais comme c'est hors sujet...)
0
slt on peut le faire sur un phone portable????
0
Je travaille avec Frontage ? il n'existe pas un p'tit programme en français du genre qui me ferait des onglets style flash ?
-1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
J'ai un problème similaire .j'ai crée 3 image légerement décalées ( boutton).
J'aimerais bien qu'on l'on puisse avoir l'impression qu'on enfonce l'image quand on clique dessus.
Je sais bien que je ne suis pas très doué mais j'ai utilisé UNfreeZ pour creer l'image gif correspondant,le gros problème c'est que l'image s'enfonce toute seule en boucle.
Moi j'aimerais uniquement avoir l'impression que l'image s'enfonce quand on clique dessus..
J'ai déjà programmer en PASCAL ,donc si vous aviez un code en Java ou une méthode pour m'aider ..

Je vous remercie infiniment
-1
crapoulou Messages postés 28158 Date d'inscription mercredi 28 novembre 2007 Statut Modérateur, Contributeur sécurité Dernière intervention 16 avril 2024 7 990
Modifié le 11 févr. 2008 à 16:02
Salut,

Pour des mouvements sur un site : pense flash ;) c'est le top.
Par contre, si tu gères pas c'est pas facile.
Tu peux faire un hoover (quand on passe la souris dessus)
Par exemple tes boutons (onglets) sont des images (photoshop) et t'en crée 2 dont un hoover où la position est décalée par rapport au premier par exemple.
-4
Si tu ne veux pas t'embêter par la création d'onglets, vas télécharger cette petite application;
http://babylon-design.com/css-tab-designer-logiciel-creation-onglets-xhtml-css/
En espérant qu'il ne soit pas trop tard... tcho!
-4