j-Listing

• werken met de hele Arrays alleen aan de klant-zijde

Configuratie:

• count {Number} Optie, items per pagina (default: 20)
• pages {Number} Optie, max pagina's in pagina (de standaard: 3 --> halve + huidige pagina + halve)
• scrolltop {Boolean} scrollt automatisch als de gebruiker een pagina verandert
• parent {String} jQuery selector voor het verkrijgen van hoogte, zorgt voor een vast gebied met aangepaste scrollbars
• margin {Number} een marge voor parent (default: 0)
• marginxs {Number} optioneel, een top/bottom margin samen voor xs scherm breedte
• marginsm {Number} optioneel, een top/bottom margin samen voor sm scherm breedte
• marginmd {Number} optioneel, een top/bottom margin samen voor md scherm breedte
• marginlg {Number} optioneel, een top/bottom margin samen voor lg scherm breedte
• pluralizeitems {String} een pluralisatie voor het tellen van alle items, vorm: # zero,# one,# two-four,# five and more
• pluralizepages {String} een pluralisatie voor het tellen van alle items, vorm: # zero,# one,# two-four,# five and more
• NEW: scrollbarshadow {Boolean} maakt scrollbar schaduw mogelijk

Tangular Layout:

• body {String} bevat alle renderde items, de uitgang is HTML
• page {Number} huidige pagina
• pages {Number} pagina's
• count {Number} aantal items

Tangular voorwerpen:

• model bevat een object van Array
• Het tweede model bevat informatie over de gegevensbron { index: Number, page: Number, pages: Number, count: Number }

Gebruik het met <ui-component name="listing">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

<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>