j-Directory

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

Es handelt sich um eine ähnliche Komponente wie j-Suggestion, verfügt jedoch über ein verbessertes Design und unterstützt praktischere Funktionen.

Singleton
arbeitet mit Berührungen
unterstützt den Dark-Modus

WICHTIG: Standardmäßig rendert diese Komponente einen Wert als Text aus der Eigenschaft name.

Methoden:

Methode: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} eine Liste von Elementen (Typ String bedeutet einen Link zur Datenquelle)
options.offsetX {Number} optional, x Offset (Standard: 0)
options.offsetY {Number} optional, y Offset (Standard: 0)
options.offsetWidth {Number} optional, width Offset (Standard: 0)
options.placeholder {String} optional, ein Platzhalter für das Suchfeld
NEW options.height {Number} optional, eine Höhe des Containers (Standard: 180)
options.render {Function} optional, eine Funktion zum benutzerdefinierten Rendern des Elements function(item, text) muss HTML zurückgeben
options.custom {Boolean/String} optional, ermöglicht die Rückgabe eines Werts, der nicht in options.items definiert ist, Standard: false
options.minwidth {Number} optional, eine minimale Breite, Standard 200
options.maxwidth {Number} optional, eine maximale Breite, Standard infinite
options.callback(selected_item, element, iscustom, e) {Function} wird ausgelöst, wenn der Benutzer auf das Element klickt
options.key {String} optional, ein Standardwert key für text (Standard: name)
options.empty {String} optional, fügt leeres Feld hinzu
options.exclude {Function} optional, kann Elemente ausschließen und muss einen booleschen Wert function(item) { return item.id !== 100 } zurückgeben
options.close {Function} optional, kann das Schließen des Panels bestimmen
options.search {Boolean/String} optional, kann das Suchfeld ausblenden (Standard: true) oder {String} (Schlüsselname) kann einen Wert für die Suche zuordnen
options.selected {Object} optional, kann einen ausgewählten Wert enthalten (Standard: undefined)
options.align {String} optional, left (Standard), right oder center
options.position {String} optional, top (Standard), bottom
options.raw {Boolean} optional, diese Option deaktiviert das Escapezeichen von Zeichen (mit anderen Worten: HTML-Inhalte sind in Beschriftungen von Elementen zulässig, Standard: false)
options.classname {String} optional, eine benutzerdefinierte Containerklasse für alle Elemente
Die absolute Positionierung funktioniert nur, wenn options.element nicht definiert ist
- options.x {Number} absolute Position X
- options.y {Number} absolute Position y
options.checkbox {Boolean} optional, aktiviert Kontrollkästchen
options.checked {Array String} optional, Kennungen der geprüften Elemente
- gezielt für options.items {Function(q, next)}

– Der Rückruf gibt nur die Rohbezeichner Array {String} zurück

NEU options.template {String} optional, eine benutzerdefinierte Tangular-Vorlage, z. B. {{ name }} (Standard: null)
NEU options.fuzzy {Boolean} optional, es kann die Fuzzy-Suche deaktivieren (Standard: true)

Methode: component.hide()

Konfiguration:

placeholder – ein Platzhalter für die Sucheingabe
create – ein Platzhalter für die Bezeichnung Create (Standard: Create)

Unterstützte Artikelfelder:

name {String} ein Labelname
template {String} optional, eine benutzerdefinierte Tangular-Vorlage
classname {String} optional, fügt dem Element <li> zusätzliche Klassen hinzu
disabled {Boolean} optional, es kann das Element deaktivieren
selected {Boolean} optional, es wählt das Element aus

Formatierung über Tangular:

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

Formatierung über benutzerdefinierte Funktion:

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

Hinzufügen einer benutzerdefinierten Klasse:

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

Serverseitige Suche:


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

Gut zu wissen:

wenn checkboxes:true dann die Komponente erweitert, indem ein Timestamp selectedts {Number} aufgrund der Bestellung hinzugefügt wird

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

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>