Wextensibles

TAB Conteneur dans deux rangées d’une table

Le premier conteneur d’onglet présenté ci-dessous est celui qui est structuré sur une table avec deux rangées. J’ai mis un exemple ici avec 3 onglets:

Ceci est le code HTML de Cette structure:

Comme nous le voyons est une table avec 2 rangées . Dans le premier nous, nous mettons les onglets dans les cellules de titre <th>, alternant une cellule qui fera un creux (classe tabcks) et un autre avec le Titre de l’onglet (tabck). Dans celui des trous, nous mettons un espace non séparable pour forcer que la largeur du trou n’est pas modifiée. Les cellules qui font des onglets identifient l’ajout du numéro au nom de la classe avec id="tabck-N" où n est le numéro de cet onglet. Chacun transporte un événement onclick="activarTab(this)" pour activer cet onglet.

La deuxième ligne a une seule cellule qui couvre autant de cellules que dans la première rangée avec l’attribut colspan="6", il y aura généralement des onglets 2n comptant sur les trous. Ensuite, nous avons n conteneurs <div> avec la classe tabdiv et identifié de la même manière avec id="tabdiv-N".

Avec la mise à jour de ce composant en mars 2014, j’ai ajouté les attributs data-min et data-max vers le table. J’ai également identifié l’élément IV ID = « 44C2A95407 » contenant le <div class="tabdiv"> avec id="tab-N". Les versions précédentes continueront de fonctionner même si elles ne contemplent pas ces modifications, qui servent à inclure des onglets à l’intérieur des conteneurs et également pour les conteneurs avec plusieurs rangées d’onglets, comme on le verra ci-dessous. Pour l’instant, nous dirons seulement que la plage des identifiants des onglets est déclarée dans l’ID data-min et data-max, tandis que l’ID

deid="tab-N"sera le premier index de cette plage.

Le style pour obtenir cette structure est à l’en-tête de cette structure. Page:

La table, qui a le modèle de bord ouvert comme nous l’avons expliqué, nous le faisons avec le contexte transparent d’agir sur l’effet des trous entre les onglets situés au bas du conteneur où il se trouve. Pour les trous, les cils et la cellule inférieure seront pris en compte de l’ordre dans la dépollution des bords. Bien sûr, vous devez maintenir la cohérence dans les couleurs utilisées. Donc, la couleur gray est le gris sur le bord tandis que le rgb(230,230,205) est le gris clair des fonds.

Enfin, les conteneurs div que le contenu à présenter est finalement de la taille d’une taille. Le style précédent est générique et sert à tous les conteneurs. Nous spécifions 100% de large et le hauteur sera auto. Ensuite, pour chaque application, nous allons définir les mesures dont nous avons besoin.Donc, pour le premier exemple précédent de cette page, nous avons ce style qui écrase la précédente:

Pour activer un onglet et désactiver les autres que nous devons utiliser JavaScript. Ce code est à l’en-tête de cette page:

dans la boucle, il est lui-même au total des onglets. Par conséquent, nous avons commencé à déclarer un maximum d’onglets MAXTABS que nous pourrions insérer et que nous ne devons donc pas changer avec chaque application la limite supérieure de la boucle interne dans la fonction qui active l’onglet. . C’est-à-dire que ce script sert sans le toucher à un nombre quelconque d’onglets égaux ou inférieurs à cette limite.

Après la mise à jour de mars 2014 et pour maintenir la compatibilité avec les conteneurs existants, nous gardons l’opération exposée dans le précédent paragraphe afin de ne pas avoir à modifier le code HTML de ces conteneurs. Toutefois, en utilisant les attributs data-max et data-min dans le tableau, il ne sera plus nécessaire de itérer par tous les éléments jusqu’à cette limite maximale, Pour que nous puissions ignorer la variable MAXTABS.

avec le chargement de la page Nous activons le premier onglet, ou celui que nous souhaitons. Ensuite, la fonction activarTab(unTab) nous exécute l’événement onclick() situé sur les onglets. L’argument apporte une référence à la cellule où cela clic a été fait. Nous obtenons l’identifiant qui est dans la voie id="tabck-N" et extraire le nombre n avec split(). Nous localisons le conteneur <div class="tabdiv-N"> pour cette N. Ensuite, nous adaptons tous les onglets en activant le courant et en désactivant les autres. Nous activons avec display = "block" et l’arrière-plan, les paroles de la paroi souhaité et désactivent également mais sans valeur pour display. Les onglets de plusieurs lignes sont expliqués ci-dessous.

TAB Conteneur à l’intérieur d’une onglet

La mise à jour de mars 2014 de ce composant était due à la nécessité de mettre un conteneur de cils sur un onglet de un autre conteneur. Dans l’exemple suivant, nous avons une extérieure avec trois onglets. Dans la première, nous mettons un autre conteneur avec deux onglets avec deux onglets.

Nous utilisons la plage data-min="100" et

Spécifiez les trois onglets de la table extérieure. Dans le<div>de la première onglet, nous mettons une autre table intérieure avec la structure de l’onglet et à l’aide de la plagedata-min="200"etdata-max="201"de ses deux onglets.

Le même script exposé dans la section précédente est responsable de l’itérate par les onglets de chaque gamme, limité à agir sur chaque conteneur. Comme dans une page, nous pouvons avoir de nombreux conteneurs de cils, nous organiser nous pouvons utiliser des gammes telles que 0..99, 100..199, 200..299, etc. Pour chacun des conteneurs de la page. Nous faisons particulariser les largeurs des deux conteneurs avec ce CSS (situé à l’en-tête de cette page):

conteneur avec plusieurs rangées de onglets

et déjà des positions avec une mise à jour (mars 2014 ), parce que nous ne donnons pas la possibilité d’avoir plusieurs rangées d’onglets.

Le code HTML correspond à ceci est comme ceci:

premier la table doit prendre un attribut data-filas sans Aucune valeur Ensuite, nous voyons qu’il y a trois rangées pour les onglets. L’avant-dernière rangée de la table est la rangée active. C’est avant la rangée chic "filadiv" qui inclut le contenu indiqué et masquer. Lorsque nous cliquons sur un onglet des rangées supérieures, nous avons déplacé cette ligne de manière à ce qu’elle soit la ligne active. Cette pièce de script est dans la fonction activarTab() exposée dans une section précédente:

Nous soulignons également que nous pouvons mettre moins d’onglets dans une rangée.La première ligne a deux onglets et les autres ont trois. Ceci est réalisé en ajoutant un séparateur th (Classe "tabcks") avec un colspan="2" pour couvrir 2 colonnes, comme les colonnes totales de cet exemple doivent être 6.

Conteneur d’onglet dans les corps de table

Cette seconde structure est un peu plus complexe que le précédent parce que chaque conteneur de chacun L’onglet est inclus dans un corps <tbody> de la table. Nous savons qu’une table présente toujours un au moins de ces éléments, bien qu’il puisse être ignoré lorsque le code est écrit. Nous utilisons donc un en-tête de table <thead> pour localiser les onglets et 3 corps <tbody>

Exemple:

premier	troisième
Contenu de la première onglet. Lorem Ipsum Douleur Sit Amet Amet, Consecturer Adipiscing Elit. Donec Sollicittude Libero ID Elit. Sed euismod NEQUEME NEQUE. Nam Dignissim Urna Vel Urn. Nunc aliquet Nonc Vel Dui Mattis Magna Varius Condimumum. Etii-Lacus enim, Ultrances d’Aiquam, Luctus UT, ID de plaisir, Lectus. Vestibulum Laoreet Commodo Tritor. Nunc Eget Urna. Suspense AC Orci. Vivamus QUI TRORTOR FACILIZES velit interdum blandit.
Autre contenu de l’onglet 2nd
le dernier contenu de la onglet 3

Le code HTML de cette structure est le suivant:

Les onglets sont à l’en-tête de la table Les événements onclick="activarTabB(this, 'p-N') nous permettront d’activer l’onglet N et de désactiver le reste. Le contenu est dans les corps <tbody>, où nous pouvons mettre le nombre de lignes que nous voulons. Mais chaque ligne n’aura qu’une cellule <td> qui couvrira autant de colonnes que les onglets déclarés colspan="N" pour N onglets.

Ceci est le style qui est également à l’en-tête de ce document:

Ceci est JavaScript qui est également dans ce document:

L’opération est similaire à celle observée dans le section précédente. Nous activons le premier onglet que nous voulons avec la charge de la page. Ensuite, nous obtenons l’élément , nous recherchons votre parent, puis nous obtenons la collection de corps de la table à itérer pour eux. Le reste est le même, activant l’onglet Courant dans ce cas avec tbs.style.display = "table-row-group" et désactivez-le avec la valeur Aucun.