j-Listing

• pracuje s celým Arrays iba na strane klienta

Konfigurácia:

• count {Number} Voliteľné, počet položiek na stránku (predvolené: 20)
• pages {Number} Voliteľné, maximálny počet strán v stránkovaní (predvolené: 3 --> polovica + aktuálna strana + polovica)
• scrolltop {Boolean} sa automaticky posúva hore, keď používateľ zmení stránku
• parent {String} Selektor jQuery na získanie výšky, umožňuje pevnú oblasť s vlastnými posuvníkmi
• margin {Number} marža pre parent (predvolené: 0)
• marginxs {Number} voliteľné, horný/dolný okraj spolu pre šírku obrazovky xs
• marginsm {Number} voliteľné, horný/dolný okraj spolu pre šírku obrazovky sm
• marginmd {Number} voliteľné, horný/dolný okraj spolu pre šírku obrazovky md
• marginlg {Number} voliteľné, horný/dolný okraj spolu pre šírku obrazovky lg
• pluralizeitems {String} množné číslo pre počet všetkých položiek, tvar: # zero,# one,# two-four,# five and more
• pluralizepages {String} množné číslo pre počet všetkých položiek, tvar: # zero,# one,# two-four,# five and more
• NOVINKA: scrollbarshadow {Boolean} povolí tieň posuvnej lišty

Uhlové rozloženie:

• body {String} obsahuje všetky vykreslené položky, výstup je HTML
• page {Number} aktuálne číslo strany
• pages {Number} počet strán
• count {Number} počet položiek

Tangular item:

• model obsahuje objekt zo Array
• druhý model obsahuje informácie o zdroji údajov { index: Number, page: Number, pages: Number, count: Number }

Použite ho so <ui-component name="listing">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>