j-InputTags

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Konfigurácia:

required {Boolean} voliteľné, umožňuje "povinné" (predvolené: false)
icon {String} voliteľné, ikona pre štítok napr. home, cog atď.
licon {String} voliteľné, ikona vľavo napr. home, cog atď.
liconclick {String} voliteľné, cesta k metóde function(component, input)
ricon {String} voliteľné, pravá ikona napr. home, cog atď.
riconclick {String} voliteľné, cesta k metóde function(component, input)
label {String} voliteľné, štítok (predvolený je obsah HTML)
after {String} voliteľné, to znamená znak za štítkom (predvolené: :)
placeholder {String} voliteľné, do vstupu pridá text placeholder
validate {String} voliteľné, podmienka pre overenie hodnoty, môže obsahovať prepojenie na function(value) alebo !!value.match(/[a-z]+/)
disabled {Boolean} voliteľné, deaktivuje tento komponent
error {String} voliteľné, pridá text string pod komponent
spaces {Boolean} voliteľné, povolí medzery, inak ich odstráni (predvolené: true)
innerlabel {Boolean} voliteľné, umožňuje vnútorný štítok (predvolené: true)
dirsource {String} voliteľné, cesta k zdroju údajov alebo NEW môže obsahovať odkaz na metódu function(search, next(items_arr))
dircustom {String/Boolean} voliteľné, môže obsahovať cestu k function(val, next(new_val)) alebo môže byť Boolean. Táto možnosť môže povoliť pridanie vlastnej hodnoty (hodnota nie je definovaná v zdroji údajov)
dirrender {String} voliteľné, cesta k function(item, text) (musí vrátiť HTML pre j-Directory), táto funkcia môže ovplyvniť zoznam položiek v j-Directory
dirminwidth {Number} voliteľné, minimálna šírka pre j-Directory, predvolená: 200
dirmaxwidth {Number} voliteľné, maximálna šírka pre j-Directory
dirplaceholder {String} voliteľné, zástupný znak pre j-Directory
dirempty {String} voliteľné, pridá prázdne pole pre j-Directory
dirkey {String} voliteľné, názov kľúča na čítanie text v dirsource (predvolené: name)
dirvalue {String} voliteľné, názov kľúča na čítanie value v dirsource (predvolené: id)
autosource {String} cesta k funkcii search v autocomplete, function(search, render(arr))
autovalue {String} cesta vlastnosti pre hodnotu v autosource
transform {Number} voliteľné, transformuje text 0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize (predvolené: 0)
enteronly {Boolean} voliteľné, po stlačení tlačidla enter pridá novú hodnotu (predvolené: true)

Zaujímavé:

dirsource:path.to.datasource potrebuje directory komponent
ak licon alebo ricon začína !, potom komponent vykreslí surovú hodnotu namiesto icon
dirsource s cestami k metódam môže načítať dáta asynchrónne

Použite ho so <ui-component name="inputtags">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>