Positionner des vues au dessus ou en dessous des onglets

Dans certains cas, il peut-être intéressant de positionner des vues au dessus ou en dessous de nos formulaires à onglets, afin que certaines vues soient toujours visibles quelque soit l’onglet sur lequel on est positionné.

Par exemple, si on à une bannière sur notre portail, la positionner au dessus des onglets permet d’éviter d’ajouter une bannière dans chaque onglet (duplication du nombre de vues dans notre formulaire) et d’avoir un portail plus joli. Il en est de même pour un formulaire à onglets dans lequel on veut avoir une vue toujours visible (boutons, saisie d’un commentaire, …) :
Exemple de portail avec onglet
Pour mettre en place ce genre de fonctionnalité, il faut passer par un javascript qui va repositionner nos vues à l’endroit désiré (vous pouvez vous référer à cet article afin de voir comment injecter du JavaScript dans un formulaire) :

<script>
  $('.view:first').insertBefore(".tabs-top").css({'vertical-align':'top'});
</script>

Ce script permet de sélectionner la première vue (instruction $('.view:first') et de positionner au-dessus des onglets (instruction insertBefore(".tabs-top"). Si on souhaite mettre la vue en bas, il faut changer l’instruction insertBefore(".tabs-top") en insertAfter(".tabs-top").

Le dernier attribut (instruction css({'vertical-align':'top'}) permet d’améliorer le rendu final de ce repositionnement, il est facultatif.

Positionnement avancé

Le script proposé ci-dessus permet de repositionner une seule vue, ce script peut être étendu pour manipuler plusieurs vues à la fois :

<script>
  $('.view:last').insertAfter(".tabs-top");
  $('.view:first').insertBefore(".tabs-top").css({'vertical-align':'top'});
</script>

Le script va mettre la première vue du premier onglet au dessus des onglets, et la dernière vue du dernier onglet en dessous des onglets (et visible peu importe l’onglet dans lequel on se situe).

Ce genre de positionnement permet par exemple de positionner une bannière au dessus des onglets et une vue contenant des actions en dessous des onglets :

Formulaire avec footer

pierre

Chef de projet chez K2 France, ex consultant solution et blogueur à ses heures perdues! Twitter: @Pierrot_12 Linkedin: Pierre NOILHAN

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.