j-Section

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

Il maintient un taux fixe
Excellente utilisation pour les applications intranet
Soutenir le releasing

Configuration :

height {Number} pourcentage de hauteur
parent {String} en option, un conteneur à hauteur fixe, peut être window. Valeur par défaut : élément parent.
minheight {Number} une hauteur minimale en pixels (defaut: 0 - désactivé)
scroll {Boolean} permet le scrollage vertical (defaut: false - désactivé)
scrollbar {Boolean} montre la barre d'échantillonnage (defaut : false)
delay {Number} msec. reprend la boîte si la valeur est modifiée selon le chemin (defaut: 100)
visibleY {Boolean} Toujours montrer Y Le scrollbar (defaut) : false)
visibleX {Boolean} Toujours montrer X Le scrollbar (defaut) : false)
scrolltop {Boolean} défile automatiquement vers le haut si le path est modifié (par défaut : false)
margin {Number} facultatif, une marge de haut/bas ensemble (supportant auto qui est compté à partir de offset.top, par défaut: 0)
marginxs {Number} en option, une marge supérieure/inférieure ensemble pour la largeur d'écran xs
marginsm en option, une marge supérieure/inférieure ensemble pour la largeur d'écran sm
marginmd en option, une marge supérieure/inférieure ensemble pour la largeur d'écran md
marginlg en option, une marge supérieure/inférieure ensemble pour la largeur d'écran lg
invisible {Boolean} si true alors la section établit la classe invisible lors de la rendu (défaut: true)
autofocus {Boolean/String} peut focaliser une entrée. String === jQuery selector pour l'entrée
back {String} un titre pour le bouton arrière (defaut: Back)
Délai d'animation delayanim {Number} (par défaut : 100)
scrollbarshadow {Boolean} ajoute une ombre pour les scrollbars (defaut: false)
backexec {String} un lien vers le function(parent) qui capte le bouton de retour (il empêche le comportement standard)

Méthodes :

component.scrolltop(val) défile Y
component.scrollbottom(val) fait défiler Y depuis le côté inférieur
component.resize() redimensionne le conteneur (il réagit automatiquement aux événements resize)
component.resizescrollbar() résise la barre de scroll personnalisée (dirigée pour les cas spéciaux)
NEW: component.import(url) importe une nouvelle section de l'URL, la réponse doit être dans le formulaire <section data-if="...."
NEW: component.import(html) importe une nouvelle section de l'HTML dans le formulaire <section data-if="...."
NEW: component.import(element) importe une nouvelle section de l'élément SECTION
NEW: component.cancel([id]) supprime la section dynamiquement

Définition:

<ui-component name="section" path="path">

	<!-- path must have same value as "data-if" attribute -->
	<section data-if="1" data-title="A title">

	</section>

	<!-- path must have same value as "data-if" attribute -->
	<!-- "data-parent" enables Back button in the header and after click the component sets value from "data-parent" attribute -->
	<section data-if="2" data-parent="1" data-title="A title">

	</section>

	<!-- GOOD TO KNOW: Dynamic compilation -->
	<section data-if="3" data-parent="2" data-title="A title" data-back="link_to_function">

		<!-- SCRIPT or TEMPLATE -->
		<script type="text/html">
			Will be compiled and rendered when the section will be displayed
		</script>

	</section>

	<!-- Template from URL address -->
	<section data-if="4" data-parent="2" data-title="A title" data-url="LINK_TO_HTML_TEMPLATE"></section>

</ui-component>

Les attributs de la section:

Le data-if doit contenir une condition d'affichage
data-parent peut contenir un parent data-if
data-title contient un étiquette/titre pour la section
data-reload peut contenir un lien vers le function(el) (optional)
data-id contient un identifiant personnalisé pour remplacer toutes les phrases ~ID~ dans le contenu (optional)
data-url peut contenir un lien vers le modèle (optionnel)

Bon à savoir :

Si vous voulez ajouter un contenu supplémentaire dans le titre à droite, appuyez simplement à l'intérieur du composant par exemple <div>BUTTON</div>.
Vous pouvez intégrer/retourner les sections en fonction des méthodes component.import() ou component.cancel().
Toutes les attributs de la section peuvent être modifiés dynamiquement (par exemple, data-title, data-parent, etc.).
Toutes les phrases ~PATH~ seront remplacées par la valeur attribuée data-if
Toutes les phrases ~ID~ seront remplacées par la valeur attribuée data-if
SET('path', 'if', 'right') va animer le contenu à droite

Utilisez-le avec <ui-component name="section">. 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>
	body { padding: 0; margin: 0; overflow: hidden; }
</style>

<ui-component name="section" path="common.section" config="parent:window;scrollbar:1" default="''">

	<section class="hidden invisible" data-if="1" data-title="Section 1">
		<div class="padding">
			<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
				<div>SECTION 1</div>
				<div class="exec link" data-exec="showsection2">Show section 2</div>
			</div>
		</div>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2">
		<script type="text/html">
			<div class="padding">
				<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
					SECTION 2
				</div>
			</div>
		</script>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2" data-url="LINK_TO_TEMPLATE"></section>
</ui-component>

<script>

	function showsection2() {
		SET('common.section', '2');
	}

	setTimeout(showsection2, 1000);

</script>