j-InputTags

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Configuratie:

required {Boolean} optioneel, mogelijk "verplicht" (default: false)
icon {String} optioneel, icon voor etiket bijvoorbeeld home, cog, enz.
licon {String} optioneel, linkse icon bijvoorbeeld home, cog, enz.
liconclick {String} optioneel, een weg naar de methode function(component, input)
ricon {String} optioneel, rechter icon bijvoorbeeld home, cog, enz.
riconclick {String} optioneel, een weg naar de methode function(component, input)
label {String} optioneel, een etiket (de standaard is HTML-inhoud)
after {String} optioneel, het betekent een char na etiket (default: :)
placeholder {String} optioneel, voegt een placeholder tekst toe aan de invoer
validate {String} optioneel, een voorwaarde voor validatie van waarde, kan een link bevatten naar function(value) of !!value.match(/[a-z]+/)
disabled {Boolean} optioneel, deze component wordt uitgeschakeld
error {String} optioneel, voegt een string tekst onder de component toe
spaces {Boolean} optioneel, maakt ruimte anders het verwijdert ze (default: true)
innerlabel {Boolean} optioneel, mogelijk interne etikettering (default: true)
dirsource {String} optioneel, de route naar een gegevensbron of NEW kan een link bevatten naar de methode function(search, next(items_arr))
dircustom {String/Boolean} is optioneel, kan een route bevatten naar function(val, next(new_val)) of kan Boolean. Deze optie kan het toevoegen van een aangepaste waarde (waarde niet gedefinieerd in de gegevensbron)
dirrender {String} optioneel, een route naar function(item, text) (must HTML retourneren voor j-Directory), deze functie kan de lijst van items in j-Directory beïnvloeden
dirminwidth {Number} optioneel, een minimale breedte voor j-Directory, standaard: 200
dirmaxwidth {Number} optioneel, een maximale breedte voor j-Directory
dirplaceholder {String} optioneel, een plaatshouder voor j-Directory
dirempty {String} optioneel, voegt een leeg veld toe voor j-Directory
dirkey {String} optioneel, een sleutelnaam voor het lezen van text in dirsource (default: name)
dirvalue {String} optioneel, een sleutelnaam voor het lezen van value in dirsource (default: id)
autosource {String} een weg naar search functie in autocomplete, function(search, render(arr))
autovalue {String} een eigendomsweg voor de waarde in autosource
transform {Number} optioneel, transformeren de tekst 0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize (default: 0)
enteronly {Boolean} optioneel, voegt een nieuwe waarde toe nadat de enter sleutel wordt gedrukt (default: true)

Interessant is:

dirsource:path.to.datasource nodig directory component
Als licon of ricon begint met !, dan is de component een grondwaarde in plaats van icon.
dirsource met paden naar methoden kan gegevens asynchronisch opladen

Gebruik het met <ui-component name="inputtags">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>