j-Layout2

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Ce composant est un composant beaucoup plus simple comparé au j-Layout.

Configuration :

parent {String} peut contenir parent, window ou un sélecteur jQuery pour la méthode closest (par défaut : window)
margin {Number} ajoute une marge pour le height (par défaut : 0)
autoresize {Boolean} active le redimensionnement automatique (par défaut : true)

Méthodes :

IMPORTANT component.show(type) peut afficher un panneau spécifique pour les appareils mobiles, type peut être left, right ou main
component.resizescrollbar(panel_type) redimensionne une barre de défilement pour un panneau spécifique
component.scrolltop(panel_type) défile vers le haut pour un panneau spécifique

Types de panneaux :

left panneau gauche
right panneau droit
Panneau supérieur top (c'est le panneau au-dessus de tous les panneaux)
Panneau supérieur top2 et utilise la clé top dans la configuration (elle se situe entre le panneau left et le panneau right)
Panneau inférieur bottom (c'est le panneau au bas de tous les panneaux)
Panneau inférieur bottom2 et utilise la clé bottom dans la configuration (elle se situe entre le panneau left et right)
Contenu principal de main

Mise en page :

La réalisation de la mise en page est très simple.

<div data-type="" data-size="" data-scrollbar=""></div>

Attributs :

data-type doit contenir un type de section top, top2 ,left, right, bottom, bottom2 ou main
data-size contient une taille de section LG,MD,SM,XS --> en pixels ou pourcentage, exemple : 200,200,200,0 (0 signifie caché) ou 20% (toutes les valeurs hériteront de 20%)
data-scrollbar="margin:50;visible:1" active la barre de défilement, valeurs possibles :
- selector {String} facultatif, sélecteur jQuery pour le conteneur de barre de défilement
- Marge de la barre de défilement margin {Number} (par défaut : 0)
- visible {Boolean} affiche la barre de défilement

Bon à savoir :

chaque panneau est un élément section et doit contenir l'attribut data-type="top" avec le type de panneau
définir uniquement les panneaux que vous utiliserez
l'ordre de tous les éléments section n'est pas important

Utilisez-le avec <ui-component name="layout2">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

example.html

<ui-component name="layout2" config="parent:window" class="invisible">
	<div data-type="top" data-size="44" style="background-color:red">
		TOP
	</div>
	<div data-type="bottom2" data-size="44" style="background-color:blue">
		BOTTOM
	</div>
	<div data-type="left" data-size="20%,20%,20%,0" style="background-color:green">
		LEFT
	</div>
	<div data-type="right" data-size="20%,20%,20%,0" style="background-color:purple">
		RIGHT
	</div>
	<div data-type="main" data-scrollbar="visible:true" style="background-color:#F0F0F0">
	</div>
</ui-component>