j-ServerListing

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Configuratie:

paginate {String} link naar een functie function(page) voor pagina's
pages {Number} max. pagina's in de pagina (default: 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 een top/bottom marge samen voor sm schermbreedte
marginmd een top/bottom marge samen voor md schermbreedte
marginlg een top/bottom marge samen voor lg schermbreedte
pluralizeitems een pluralisatie voor het tellen van alle items, formulier: # zero,# one,# two-four,# five and more (als leeg, zal de teller verborgen)
pluralizepages een pluralisatie voor het tellen van alle items, formulier: # zero,# one,# two-four,# five and more (als leeg, zal de teller verborgen)
modulo {Number} kan leeg items aanvoegen met { EMPTY: 1 } object (default: 0)
nopages {Boolean} kan de pagina's verbergen als de pagina’s minder zijn dan 2 (default: false)

Modellen:

Het model moet in het onderstaande formaat zijn:

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

Tangular Layout:

body {String} bevat alle gerenderde items, de output is HTML
page {Nummer} huidige pagina
pages {Nummer} aantal pagina's
count {Nummer} aantal items

Tangular voorwerpen:

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

Gebruik het met <ui-component name="serverlisting">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.

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>