j-ServerListing

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Konfigurácia:

paginate {String} prepojenie na funkciu function(page) pre stránkovanie
pages {Number} max. strany 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 horný/dolný okraj spolu pre šírku obrazovky sm
marginmd horný/dolný okraj spolu pre šírku obrazovky md
marginlg horný/dolný okraj spolu pre šírku obrazovky lg
pluralizeitems množné číslo pre počet všetkých položiek, tvar: # zero,# one,# two-four,# five and more (ak je prázdne, počítadlo bude skryté)
pluralizepages množné číslo pre počet všetkých položiek, tvar: # zero,# one,# two-four,# five and more (ak je prázdne, počítadlo bude skryté)
modulo {Number} môže pripojiť prázdne položky k objektu { EMPTY: 1 } (predvolené: 0)
nopages {Boolean} môže skryť stránkovanie, ak sú strany menšie ako 2 (predvolené: false)

Model:

Model musí mať nasledujúci formát:

{
	page: Number,
	count: Number,
	pages: Number,
	items: [{...}, {...}]
}

Uhlové rozloženie:

body {String} obsahuje všetky vykreslené položky, výstup je HTML
page {Number} číslo aktuálnej strany
pages {Number} počet strán
count {číslo} 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, value: YOUR_DATA }

Použite ho so <ui-component name="serverlisting">. 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.

example.html

<div class="row">
	<div class="col-sm-6">
		<h2>With layout</h2>
		<ui-component name="serverlisting" path="model" config="paginate:gotopage">
			<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="serverlisting" path="model" config="paginate:gotopage">
			<script type="text/html">
				<div>
					<div>Item: {{ name }}</div>
				</div>
			</script>
		</ui-component>
		<br />
	</div>
</div>

<script>

	var model = {};
	model.page = 1;
	model.pages = 3;
	model.count = 10;
	model.items = [];

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

	function gotopage(page) {
		alert('GO TO PAGE:' + page);
	}

</script>