j-Parts

Ce contenu peut gérer plusieurs parts stockés dans le Array et se concentrer sur une partie spécifique.

Configuration :

• parent {String} en raison de la taille partielle (defaut: auto)
• margin {Number} marge verticale (defaut : 0)
• create {String} un lien vers le function(part), il est exécuté si la partie est créée (appelé une fois)
• focus {String} un lien vers le function(part), il est exécuté si la partie est focalisée
• close {String} un lien vers le function(part), il est exécuté si la partie est fermée

Bon à savoir 1 :

• toutes les phrases ~PATH~ seront automatiquement remplacées par item.path
• toutes les phrases ~ID~ seront automatiquement remplacées par item.id

spécification de l'élément:

• item.id {String} très important, partie identifiant
• item.blur {String/Function(el, item)} optionnel, un lien vers le function(element, item) si la partie est focalisée
• item.focus {String/Function(el, item)} ou item.reload {String} optionnel, un lien vers le function(element, item) si la partie est focalisée
• item.remove {String/Function(el, item)} optionnel, un lien vers le function(element, item) si la partie est supprimée
• item.html {String} un contenu HTML ou utilisez item.url
• item.import {String} URL pour le contenu
• item.path {String} optionnel, il remplace toutes les phrases ~PATH~ automatiquement
• item.delay {Number} retard pour la suppression de la classe invisible
• NEW item.attrd {Object} ajoute des attributs data-key dans l'élément

Extension par le composant:

• item.focused {Boolean} détermine si la partie est focalisée ou non
• item.element {jQuery} Un élément

Méthodes :

• component.close(id) Fermer la partie
• Le component.focus(id) se concentre sur
• component.rename(id, name, [icon]) renommée

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

<ui-component name="exec">

	<ui-bind path="myparts" config="template" class="block">
		<script type="text/html">
			{{ foreach m in value }}
			<button class="exec" data-exec="changepart" data-id="{{ m.id }}"><i class="ti ti-times exec mr5" data-prevent="true" data-exec="closepart"></i>{{ m.name }}</button>
			{{ end }}
		</script>
	</ui-bind>
	<br />

	<div style="width:600px;height:300px;border:1px solid #E0E0E0">
		<ui-component name="parts" path="myparts" config="parent:auto"></ui-component>
	</div>

</ui-component>

<script>
	var myparts = [];

	myparts.push({ id: '1', name: 'Part 1', html: '<div class="padding">Part 1</div>' });
	myparts.push({ id: '2', name: 'Part 2', html: '<div class="padding">Part 2</div>' });
	myparts.push({ id: '3', name: 'Part 3', html: '<div class="padding">Part 3</div>' });

	function changepart(el ,e) {
		var id = ATTRD(el);
		SETTER('parts/focus', id);
	}

	function closepart(el, e) {
		var id = ATTRD(el);
		SETTER('parts/close', id);
	}

</script>