j-InputTags

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

Konfiguration:

required {Boolean} optional, aktiviert „erforderlich“ (Standard: false)
icon {String} optionale, Ikon für die Etikette z.B. home, cog, etc.
licon {String} optionale, linken Ikon z. B. home, cog, etc.
liconclick {String} optionale, eine Art und Weise zu function(component, input)
ricon {String} optionale, rechte Ikon z. B. home, cog, etc.
riconclick {String} optionale, eine Art und Weise zu function(component, input)
label {String} optionale, eine Etikette (Default ist HTML-Inhalte)
after {String} optionale, das bedeutet eine Char nach der Etikette (Default: :)
placeholder {String} optional, fügt der Eingabe einen placeholder-Text hinzu
validate {String} optional, eine Bedingung zur Validierung des Werts, kann einen Link zu function(value) oder !!value.match(/[a-z]+/) enthalten
disabled {Boolean} optional, deaktiviert diese Komponente
error {String} optionale, fügt einen string Text unter der Komponente hinzu
spaces {Boolean} optional, aktiviert Leerzeichen, andernfalls werden sie entfernt (Standard: true)
innerlabel {Boolean} optionale, ermöglicht die innere Etikette (Default: true)
dirsource {String} Option, Weg zu einer Datenquelle oder NEW kann einen Link zur Methode function(search, next(items_arr)) enthalten
dircustom {String/Boolean} optionale, kann einen Weg zu function(val, next(new_val)) enthalten oder kann Boolean. Diese Option ermöglicht die Einhaltung eines angepassten Wertes (Wert nicht definiert in der Datenquelle)
dirrender {String} optionale, eine Route zu function(item, text) (HTML für j-Directory zurückkehren muss), kann diese Funktion die Liste der Elemente in j-Directory beeinflussen
dirminwidth {Number} optionale, minimale Breite für j-Directory, Standard: 200
dirmaxwidth {Number} optionale, eine maximale Breite für j-Directory
dirplaceholder {String} optionale, ein Platzinhaber für j-Directory
dirempty {String} optionale, fügt ein leeres Feld für j-Directory hinzu
dirkey {String} optionale, ein Schlüsselname für die Lesung von text in dirsource (Default: name)
dirvalue {String} optionale, ein Schlüsselname für die Lesung von value in dirsource (Default: id)
autosource {String} ein Pfad zur Funktion search in autocomplete, function(search, render(arr))
autovalue {String} eine Eigentumsstraße für den Wert in autosource
transform {Number} optionale, umwandelt den Text 0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize (Default: 0)
enteronly {Boolean} optionale, fügt eine neue Wert hinzu, nachdem der enter-Schlüssel gedruckt wird (Default: true)

Interessant:

dirsource:path.to.datasource benötigt directory Komponente
Wenn licon oder ricon mit ! beginnt, dann stellt die Komponente einen Rohwert anstelle von icon dar.
dirsource mit Wegen zu Methoden kann Daten asynchronisch laden

Verwenden Sie es mit <ui-component name="inputtags">. 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

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

<div style="width:400px">
	<ui-component name="inputtags" path="form.frameworks" config="required:1;placeholder:Type a framework name;dirsource:frameworks">Framework</ui-component>
	<br />
	<ui-component name="inputtags" path="form.countries" config="innerlabel:true">Country</ui-component>
</div>

<script>
	var frameworks = [{ id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var form = { framework: [1], countries: ['Slovakia', 'Poland', 'Hungary', 'Germany'] };
</script>