j-Listing

• fonctionne avec l'ensemble des tableaux uniquement côté client

Configuration :

• count {Number} En option, éléments par page (par défaut : 20)
• pages {Number} Facultatif, nombre maximum de pages en pagination (par défaut : 3 --> moitié + page actuelle + moitié)
• scrolltop {Boolean} défile automatiquement vers le haut lorsque l'utilisateur change de page
• Sélecteur jQuery parent {String} pour l'obtention de la hauteur, permet une zone fixe avec des barres de défilement personnalisées
• margin {Number} une marge pour parent (par défaut : 0)
• marginxs {Number} en option, une marge supérieure/inférieure ensemble pour la largeur d'écran xs
• marginsm {Number} en option, une marge supérieure/inférieure ensemble pour la largeur d'écran sm
• marginmd {Number} en option, une marge supérieure/inférieure ensemble pour la largeur d'écran md
• marginlg {Number} en option, une marge supérieure/inférieure ensemble pour la largeur d'écran lg
• pluralizeitems {String} une pluralisation pour le nombre de tous les éléments, forme : # zero,# one,# two-four,# five and more
• pluralizepages {String} une pluralisation pour le nombre de tous les éléments, forme : # zero,# one,# two-four,# five and more
• NOUVEAU : scrollbarshadow {Boolean} active l'ombre de la barre de défilement

Disposition tangentielle :

• body {String} contient tous les éléments rendus, la sortie est HTML
• page {Number} numéro de page actuel
• Nombre de pages pages {Number}
• Nombre d'articles count {Number}

Article Tangulaire :

• model contient un objet de Array
• le deuxième modèle contient des informations sur la source de données { index: Number, page: Number, pages: Number, count: Number }

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

<div class="row">
	<div class="col-sm-6">
		<h2>With layout</h2>
		<ui-component name="listing" path="items">
			<script type="text/html">
				<div class="col-xs-4">
					<div>Item: {{ name }}</div>
				</div>
			</script>
			<script type="text/html">
				<div><b>Layout:</b></div>
				<br />
				<div class="row">{{ body | raw }}</div>
			</script>
		</ui-component>
		<br />
	</div>

	<div class="col-sm-6">
		<h2>Without layout</h2>
		<ui-component name="listing" path="items" config="count:8">
			<script type="text/html">
				<div>
					<div>Item: {{ name }}</div>
				</div>
			</script>
		</ui-component>
		<br />
	</div>
</div>

<script>

	var items = [];
	for (var i = 0; i < 100; i++)
		items.push({ name: GUID(10) });

</script>