j-ServerListing

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Konfiguration:

paginate {String}-Link zu einer Funktion function(page) für die Paginierung
pages {Number} max. Seiten in Paginierung (Standard: 3 --> Hälfte + aktuelle Seite + Hälfte)
scrolltop {Boolean} scrollt automatisch nach oben, wenn der Benutzer eine Seite wechselt
parent {String} jQuery-Selektor zum Ermitteln der Höhe, ermöglicht festen Bereich mit benutzerdefinierten Bildlaufleisten
margin {Number} eine Marge für parent (Standard: 0)
marginxs {Number} optional, ein oberer/unterer Rand zusammen für xs Bildschirmbreite
marginsm ein oberer/unterer Rand zusammen für sm Bildschirmbreite
marginmd ein oberer/unterer Rand zusammen für md Bildschirmbreite
marginlg ein oberer/unterer Rand zusammen für lg Bildschirmbreite
pluralizeitems eine Pluralisierung für die Anzahl aller Elemente, Form: # zero,# one,# two-four,# five and more (wenn leer, wird der Zähler ausgeblendet)
pluralizepages eine Pluralisierung für die Anzahl aller Elemente, Form: # zero,# one,# two-four,# five and more (wenn leer, wird der Zähler ausgeblendet)
modulo {Number} kann leere Elemente mit dem { EMPTY: 1 }-Objekt anhängen (Standard: 0)
nopages {Boolean} kann die Paginierung ausblenden, wenn die Seiten kleiner als 2 sind (Standard: false)

Modell:

Das Modell muss im folgenden Format vorliegen:

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

Tangulares Layout:

body {String} enthält alle gerenderten Elemente, Ausgabe ist HTML
page {Number} aktuelle Seitennummer
pages {Number} Anzahl der Seiten
count {Number} Anzahl der Elemente

Tangular Artikel:

model enthält ein Objekt aus Array
Das zweite Modell $ enthält Informationen zur Datenquelle { index: Number, page: Number, pages: Number, count: Number, value: YOUR_DATA }

Verwenden Sie es mit <ui-component name="serverlisting">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>