# j-Listing

> j-Listing: fácil uso; funciona con todos los Arrays solo en el lado del cliente

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: c7c9a04c3be440f9999dc6e929d29a230a0a14bbd09b649313fdc861ea2a0c9f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- funciona con todos los Arrays sólo en el lado del cliente


__Configuración__:

- `count {Number}` Opcional, elementos por página (predeterminado: `20`)
- `pages {Number}` Opcional, máximo de páginas en paginación (predeterminado: `3` --> mitad + página actual + mitad)
- `scrolltop {Boolean}` se desplaza hacia arriba automáticamente cuando el usuario cambia de página
- `parent {String}` Selector jQuery para obtención de altura, habilita área fija con barras de desplazamiento personalizadas.
- `margin {Number}` un margen para `parent` (predeterminado: `0`)
- `marginxs {Number}` opcional, un margen superior/inferior juntos para el ancho de pantalla `xs`
- `marginsm {Number}` opcional, un margen superior/inferior juntos para el ancho de pantalla `sm`
- `marginmd {Number}` opcional, un margen superior/inferior juntos para el ancho de pantalla `md`
- `marginlg {Number}` opcional, un margen superior/inferior juntos para el ancho de pantalla `lg`
- `pluralizeitems {String}` una pluralización para el recuento de todos los elementos, formulario: `# zero,# one,# two-four,# five and more`
- `pluralizepages {String}` una pluralización para el recuento de todos los elementos, formulario: `# zero,# one,# two-four,# five and more`
- __NUEVO__: `scrollbarshadow {Boolean}` habilita la sombra de la barra de desplazamiento

__Diseño tangular__:

- `body {String}` contiene todos los elementos renderizados, la salida es __HTML__
- `page {Number}` número de página actual
- `pages {Number}` recuento de páginas
- `count {Number}` recuento de artículos

__Artículo tangular__:

- `model` contiene un objeto de `Array`
- el segundo modelo contiene información sobre la fuente de datos `{ index: Number, page: Number, pages: Number, count: Number }`

Úselo con `<ui-component name="listing">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (la CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

```html example.html
<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>
```