j-Directory

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Es un componente similar a j-Suggestion, pero tiene un diseño mejorado y admite funciones más útiles.

singleton
funciona con toques
admite modo oscuro

IMPORTANTE: de forma predeterminada, este componente representa un valor como texto de la propiedad name.

Métodos:

Método: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} una lista de elementos (el tipo String significa un enlace a la fuente de datos)
options.offsetX {Number} opcional, desplazamiento x (predeterminado: 0)
options.offsetY {Number} opcional, desplazamiento y (predeterminado: 0)
options.offsetWidth {Number} opcional, desplazamiento width (predeterminado: 0)
options.placeholder {String} opcional, un marcador de posición para el campo de búsqueda
NEW options.height {Number} opcional, una altura del contenedor (por defecto: 180)
options.render {Function} opcional, una función para la representación personalizada del artículo function(item, text) debe devolver HTML
options.custom {Boolean/String} opcional, permite devolver un valor no definido en options.items, predeterminado: false
options.minwidth {Number} opcional, ancho mínimo, predeterminado 200
options.maxwidth {Number} opcional, ancho máximo, predeterminado infinite
options.callback(selected_item, element, iscustom, e) {Function} se activa cuando el usuario hace clic en el elemento
options.key {String} opcional, un valor predeterminado key para text (predeterminado: name)
options.empty {String} opcional, agrega campo vacío
options.exclude {Function} opcional, puede excluir elementos y debe devolver un valor booleano function(item) { return item.id !== 100 }
options.close {Function} opcional, puede determinar el cierre del panel
options.search {Boolean/String} opcional, puede ocultar el campo de búsqueda (predeterminado: true) o {String} (nombre de clave) puede asignar un valor para la búsqueda
options.selected {Object} opcional, puede contener un valor seleccionado (predeterminado: undefined)
options.align {String} opcional, left (predeterminado), right o center
options.position {String} opcional, top (predeterminado), bottom
options.raw {Boolean} opcional, esta opción desactiva el escape de caracteres (en otras palabras: se permitirá contenido HTML en las etiquetas de los elementos, predeterminado: false)
options.classname {String} opcional, una clase de contenedor personalizada para todos los artículos
el posicionamiento absoluto funciona sólo si options.element no está definido
- options.x {Number} posición absoluta X
- options.y {Number} posición absoluta y
options.checkbox {Boolean} opcional, habilita casillas de verificación
options.checked {Array String} opcional, identificadores de artículos marcados
- dirigido a options.items {Function(q, next)}
- la devolución de llamada devuelve sólo identificadores sin formato Array {String}
NEW options.template {String} opcional, una plantilla personalizada Tangular, p. {{ name }} (predeterminado: nulo)
NEW options.fuzzy {Boolean} opcional, puede desactivar la búsqueda difusa (predeterminado: true)

Método: component.hide()

Configuración:

placeholder - un marcador de posición para la entrada de búsqueda
create - un marcador de posición para la etiqueta Create (predeterminado: Create)

Campos de elementos admitidos:

name {String} un nombre de etiqueta
template {String} opcional, una plantilla Tangular personalizada
classname {String} opcional, agrega clases adicionales al elemento <li>
disabled {Boolean} opcional, puede desactivar el elemento
selected {Boolean} opcional, selecciona item

Formato vía Tangular:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', template: '<b>{{ name }}</b>' });

Formateo mediante función personalizada:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js' });
opt.push({ name: 'Express.js' });
opt.push({ name: 'Koa.js' });
opt.render = function(item, name) {
	return '<b>' + name + '</b>';
};

Adición de clase personalizada:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });

Búsqueda del lado del servidor:


var opt = {};

opt.element = your_element;

opt.items = function(search, next) {
	next([{ name: 'Item 1' }, { name: 'Item 2' }]);
};

opt.callback = function(selected) {
	console.log(selected);
};

SETTER('directory/show', opt);

Es bueno saberlo:

si checkboxes:true entonces el componente extiende los elementos agregando una marca de tiempo selectedts {Number} debido al pedido

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

example.html

<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="directory" config="placeholder:Search ..."></ui-component>

<div class="container">
	<div><a href="javascript:void(0)" data-name="classic">Open directory - classic</a></div>
	<div><a href="javascript:void(0)" data-name="checkboxes">Open directory - checkboxes</a></div>
</div>

<script>
	$(document).on('click', 'a', function() {


		var opt = {};
		opt.element = $(this);

		if (opt.element.attrd('name') === 'checkboxes') {
			opt.checkbox = true;
			opt.items = [{ name: 'Total.js', selected: true }, { name: 'Express.js', selected: true }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];
		} else
			opt.items = [{ name: 'Total.js', template: '<b>{{ name }}</b>' }, { name: 'Express.js' }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];

		opt.callback = function(value) {
			if (opt.checkbox)
				console.log('SELECTED:', value);
			else
				console.log('CLICKED:', value);
		};

		SETTER('directory/show', opt);
	});
</script>