j-ServerListing

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Konfigurera:

paginate {String} länk till en funktion function(page) för sida
pages {Number} max. sidor i sidan (default: 3 --> halv + nuvarande sida + halv)
scrolltop {Boolean} vrider upp automatiskt när användaren ändrar en sida
parent {String} jQuery-selektor för att få höjd, möjliggör fasta områden med anpassade skruvar
margin {Number} en marginal för parent (default: 0)
marginxs {Number} valfritt, en topp/bottom marginal tillsammans för xs skärmbredd
marginsm en topp/bottom marginal tillsammans för sm skärmbredd
marginmd en topp/bottom marginal tillsammans för md skärmbredd
marginlg en topp/bottom marginal tillsammans för lg skärmbredd
pluralizeitems en pluralisering för att räkna alla objekt, formulär: # zero,# one,# two-four,# five and more (om tomt kommer kontoret att vara dolt)
pluralizepages en pluralisering för att räkna alla objekt, formulär: # zero,# one,# two-four,# five and more (om tomt kommer kontoret att vara dolt)
modulo {Number} kan bifoga tomma objekt med { EMPTY: 1 } objekt (default: 0)
nopages {Boolean} kan dölja sidan om sidorna är mindre än 2 (default: false)

Modellen:

Modellen måste vara i formatet nedan:

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

Tangular läggning:

body {String} innehåller alla renderade objekt, utgången är HTML
page {Numret} nuvarande sidnummer
pages {Numret} antal sidor
count {Numret} räkna objekt

Tangular objekt:

model innehåller ett objekt från Array
Den andra modellen $ innehåller information om datakälla { index: Number, page: Number, pages: Number, count: Number, value: YOUR_DATA }

Använd den med <ui-component name="serverlisting">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>