# j-Layout
> 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.
Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: c64687b279b2e811f297b1431da123dd2ee02a49857755e7c46631ea9d463b0d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded
- 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`)
```js
{
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 ``
- 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 ``. 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.
```html example.html
```