j-Directory

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

È un componente simile a quello di j-Suggestion, ma ha migliorato la progettazione e supporta funzionalità più intelligenti.

singolo
Lavorare con il tocco
Sviluppo - Modo oscuro

IMPORTANT: per impostazione predefinita questo componente ritorna un valore come testo dalla proprietà name.

Metodi:

Metodo: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} un elenco di elementi (tipo String significa un collegamento alla fonte dei dati)
options.offsetX {Number} opzionale, x offset (default: 0)
options.offsetY {Number} opzionale, y offset (default: 0)
options.offsetWidth {Number} opzionale, width offset (default: 0)
options.placeholder {String} opzionale, un locatore per il campo di ricerca
NEW options.height {Number} opzionale, un'altezza del contenitore (default: 180)
options.render {Function} opzionale, una funzione per il rendering personalizzato dell'oggetto function(item, text) deve restituire HTML
options.custom {Boolean/String} opzionale, consente di restituire un valore non definito in options.items, predefinito: false
options.minwidth {Number} opzionale, una larghezza minima, standard 200
options.maxwidth {Number} opzionale, una larghezza massima, standard infinite
options.callback(selected_item, element, iscustom, e) {Function} viene rilasciato quando l'utente fa clic sull'oggetto
options.key {String} opzionale, un valore predefinito key per text (predefinita: name)
options.empty {String} opzionale, aggiunge campo vuoto
options.exclude {Function} opzionale, può escludere gli articoli e deve restituire un boolean function(item) { return item.id !== 100 }
options.close {Function} opzionale, può determinare la chiusura del pannello
options.search {Boolean/String} opzionale, può nascondere il campo di ricerca (default: true) o {String} (nome chiave) può mapare un valore per la ricerca
options.selected {Object} opzionale, può contenere un valore selezionato (default: undefined)
options.align {String} opzionale, left (default), right o center
options.position {String} opzionale, top (default), bottom
options.raw {Boolean} opzionale, questa opzione impedisce l'escapazione di caratteri (in altre parole: il contenuto HTML sarà consentito nelle etichette degli articoli, in modo predefinito: false)
options.classname {String} opzionale, una classe di contenitore personalizzata per tutti gli articoli
La posizione assoluta funziona solo se il options.element non è definito
- options.x {Number} posizione assoluta X
- La posizione assoluta di options.y {Number} e
options.checkbox {Boolean} opzionale, consentono i checkboxes
options.checked {Array String} opzionale, identificatori di oggetti controllati
- Trattamento per options.items {Function(q, next)}
- Il callback restituisce solo gli identificatori crudi Array {String}
NEW options.template {String} opzionale, un modello personalizzato Tangular ecc. {{ name }} (default: null)
NEW options.fuzzy {Boolean} opzionale, può disattivare la ricerca fuzzy (default: true)

Metodo: component.hide()

Configurazione:

placeholder - un sito per la ricerca di input
create - un contenitore per l'etichetta Create (default: Create)

I campi supportati:

name {String} un nome di marchio
template {String} opzionale, un modello personalizzato Tangular
classname {String} opzionale, aggiunge ulteriori classi all'elemento <li>
disabled {Boolean} opzionale, può disattivare l'articolo
selected {Boolean} opzionale, seleziona l'oggetto

Formattazione tramite Tangular:

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

Formattare tramite funzione personalizzata:

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>';
};

Aggiungi la classe custom:

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

Servizio di ricerca:


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);

Buono sapere:

se checkboxes:true quindi il componente estende gli articoli aggiungendo un timestamp selectedts {Number} a causa dell'ordine

Utilizzare con <ui-component name="directory">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>