Voir un exemple
Tout d'abord il faut savoir si vous souhaitez que votre formulaire soit sur plusieurs onglets seulement en mode saisie, seulement en mode vue ou les deux.
Dans le cas de l'exemple ci-dessus les onglets apparaissent en mode vue mais pas lors du remplissage du formulaire.
-
En mode Saisie : C'est à dire que les onglets que vous ajoutez apparaitront seulement lors du
remplissage du formulaire
-
En mode Vue : C'est à dire que les onglets que vous ajoutez apparaitront seulement sur
la fiche crée par le formulaire
Cela dépendra de la position à laquelle vous mettez votre code sur la balise
Mode saisie = 2ème champs
Mode vue = 4ème champs
labelhtml***mode saisie*** ***mode vue*** *** *** *** *** *** *** ***
Vous pouvez donc choisir de mettre du HTML en mode saisie ou en mode vue ou en mode saisie et vue
L'exemple qui suit est en mode saisie, si vous souhaitez que les onglets s'affichent que sur les fiches (mode vue), il faut couper/coller le code et le mettre dans le 4ème champs.
Si vous voulez que les onglets soient en mode saisie et vue, vous copier le code dans les deux champs ( 2 et 4 )
Le code pour les onglets se découpent en plusieurs parties :
1 - Code indiquant qu'il y aura 3 onglets :
labelhtml***<ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#menu1" role="tab" data-toggle="tab">NOM DE L'ONGLET 1</a></li><li role="presentation"><a href="#menu2" role="tab" data-toggle="tab">NOM DE L'ONGLET 2</a></li><li role="presentation"><a href="#menu3" role="tab" data-toggle="tab">NOM DE L'ONGLET 3</a></li></ul><div class="tab-content"><!--indique qu'il y aura 3 onglets, les noms des onglets (Onglet 1, Onglet 2,...) peuvent être modifiés ici (et dans leur différentes occurences ci-dessous)--> *** *** *** *** *** *** *** *** *** ***
2 - Ouvre le premier onglet :
labelhtml***<div role="tabpanel" class="tab-pane active" id="menu1"><br><br><!--ouvre le premier onglet-->*** *** *** *** *** *** *** *** *** ***
Contenu de l'onglet 1
3 - Ferme l'onglet 1 et ouvre l'onglet 2 :
labelhtml***<div class="clearfix"></div></div><!-- ferme l'onglet 1 --> <div role="tabpanel" class="tab-pane" id="menu2"><br><br><!-- ouvre l'onglet 2-->*** *** *** *** *** *** *** *** *** ***
Contenu de l'onglet 2
4 - Ferme l'onglet 2 et ouvre l'onglet 3 :
labelhtml***<div class="clearfix"></div></div><!-- ferme l'onglet 2 --> <div role="tabpanel" class="tab-pane" id="menu3"><br><br><!-- ouvre l'onglet 3-->*** *** *** *** *** *** *** *** *** ***
Contenu de l'onglet 3
5 - Ferme l'ensemble des onglets et efface les boutons Valider/Annuler en bas de chaque onglet :
labelhtml***<div class="clearfix"></div></div><!-- ferme l'onglet 3 --> </div><!-- ferme l'ensemble des onglets --><style>#formulaire .form-actions { display:none; }</style><!--Efface les boutons Valider/Annuler en bas de chaque onglet-->*** *** *** *** *** *** *** *** *** ***
Si vous voulez rajouter un onglet (ou plusieurs), il va falloir que vous modifiez le premier code,
Le plus simple étant de copier le code d'un onglet et de l'intercaler entre deux onglets.
Vous remarquerez une répétition du code pour les 3 onglets correspondant au code :
<a href="#menu2" role="tab" data-toggle="tab">NOM DE L'ONGLET 2</a></li><li role="presentation">.
Vous copiez ce code et vous l'intercalez entre deux code similaire.
ll faudra également que vous rajoutiez les codes qui permette de fermer et d’ouvrir de nouveau onglet en n'omettant pas de modifier les numéros des menus dans les différents codes id="menu1, 2 , 3..." menu1 correspondant à l'onglet 1, menu2 à l'onglet 2.....
Bises