j-Layout

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

Ce composant peut créer un aménagement pour votre SPA. Ce composant est un peu plus difficile à comprendre, mais il est très utile. j-Layout utilise jComponent +v17.

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)
remember {Boolean} peut mémoriser les derniers paramètres de mise en page pour le redimensionnement (par défaut : true)
space {Number} interne, contient un espace entre les panneaux (par défaut : 1)
border {Number} interne, contient une taille de bordure (par défaut : 0)
resize {String} interne, un chemin vers la méthode qui est exécutée lorsque la mise en page est redimensionnée
autoresize {Boolean} permet le redimensionnement automatique (par défaut : true)

Méthodes :

component.refresh() actualise la mise en page
component.resize() effectue un redimensionnement
component.reset() effectue la réinitialisation du redimensionnement
component.layout(name) modifie une mise en page (comme une liaison de données bidirectionnelle)
component.rebind(code_string) réalise une nouvelle configuration de mise en page
component.lock(type, [boolean]) verrouille le panneau

Types de panneaux :

left panneau gauche, redimensionnable
Panneau droit right, redimensionnable
Le panneau de droite right2 sera à côté du panneau de gauche et utilise la clé right dans la configuration, redimensionnable
Panneau supérieur top, redimensionnable (c'est un panneau au-dessus de tous les panneaux)
Panneau supérieur top2, redimensionnable et utilise la clé top dans la configuration (il se situe entre le panneau left et right)
Panneau inférieur bottom, redimensionnable (c'est le panneau en bas de tous les panneaux)
Panneau inférieur bottom2, redimensionnable et utilise la clé bottom dans la configuration (il se situe entre le panneau left et right)
Panneau principal main, ne peut pas être redimensionné et la taille est comptée automatiquement

Mise en page :

La réalisation de la mise en page est très simple et offre de nombreuses possibilités. La mise en page doit avoir sa propre structure HTML. Regardez par exemple. L'exemple ci-dessous décrit uniquement les métadonnées de la mise en page.

size {Number/String} peut contenir une hauteur/largeur de panneau selon le type de panneau. Le numéro 120 définit les pixels et la chaîne 100% peut définir le pourcentage.
minsize {Number/String} est une taille minimale du panneau lors du redimensionnement du panneau (par défaut : valeur size)
maxsize {Number/String} est une taille maximale du panneau lors du redimensionnement du panneau (par défaut : comptage automatique)
resize {Boolean} permet le redimensionnement du panneau sauf le panneau main (il est compté automatiquement)
show {Boolean} permet la visibilité (par défaut : false)

{
	top: { size: 80, resize: true, minsize: 50 }, // top panel
	right: { size: 100 },
	bottom: { size: 100 }, // bottom panel
	left: { size: 100, resize: true }, // left panel
	main: {}, // main panel

	// Can contain a different template for various display types
	// lg = Large display, md = Medium display, sm = Small display, xs = Extra small display
	md: {
		top: { show: true, size: 80 },
		bottom: { show: false },
		left: { show: false },
		main: { show: true }
	},

	// Custom layouts
	detail: {

		// Custom display types in custom layouts
		md: {
			top: { show: true },
			bottom: { show: true },
			main: { show: true },
			left: { show: false },
			right: { show: true, size: 300 }
		},
		xs: {
			top: { show: true },
			bottom: { show: true },
			main: { show: false },
			left: { show: false },
			right: { show: true, size: '100%' }
		}
	}
}

Bon à savoir :

IMPORTANT : ce composant doit contenir des méta-données de la mise en page enveloppées dans <script type="text/plain"></script>
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
top2 utilise la clé de configuration top
right2 utilise la clé de configuration right
bottom2 utilise la clé de configuration bottom

Utilisez-le avec <ui-component name="layout">. 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

<style>
	.ui-layout-section { font-size: 11px; }
</style>

<div style="width:500px;height:300px">
	<ui-component name="layout" path="mylayout" config="parent:parent" class="invisible">

		<!-- META DATA OF THE LAYOUT -->
		<!-- VERY IMPORTANT -->
		<script type="text/plain">
			{
				top: { size: 80, resize: true },
				bottom: { size: 100 },
				left: { size: 100, minsize: 50, resize: true },
				right: { size: 100 },
				main: {},
				detail: {
					left: { show: false },
					right: { show: true, size: '100%' },
					bottom: { show: false },
					main: { show: false }
				}
			}
		</script>

		<!-- PANEL IN LAYOUT -->
		<section data-type="top">
			TOP
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="main">
			MAIN
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="right">
			RIGHT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="left">
			LEFT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="bottom">
			BOTTOM
		</section>

	</ui-component>
</div>

<br />

<div style="width:500px;height:300px">
	<ui-component name="layout" config="parent:parent" class="invisible">
		<script type="text/plain">
			{
				top: { size: 80, resize: 1 },
				bottom: { size: 100 },
				left: { size: 100 },
				right: { size: 100 },
				main: {}
			}
		</script>

		<section data-type="top2">
			TOP2
		</section>

		<section data-type="main">
			MAIN
		</section>

		<section data-type="right">
			RIGHT
		</section>

		<section data-type="left">
			LEFT
		</section>

		<section data-type="bottom2">
			BOTTOM2
		</section>

	</ui-component>
</div>

<script>

	var mylayout = '';

	setInterval(function() {
		SET('mylayout', mylayout === 'detail' ? '' : 'detail');
	}, 5000);

	setInterval(function() {
		SETTER('layout', 'lock', 'right');
	}, 8000);

</script>