ForgeKomponenty
sk
English Español Slovenčina Deutsch Français Italiano Português Polski Čeština Nederlands Română Magyar Svenska Ελληνικά Български

Komponenty

j-Input

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

j-Input je multifunkčný komponent input, ktorý podporuje množstvo funkcií a je optimalizovaný pre každodenné použitie. Je to skvelá alternatíva k j-Textbox a j-Dropdown. Funguje len so jComponent +v17.


Konfigurácia:

  • type {String} voliteľné, hodnoty:
    • prázdna hodnota znamená predvolenú hodnotu text
    • email,
    • multiline
    • checkbox
    • phone
    • password
    • zip
    • date (potrebuje komponent datepicker)
    • NOVINKA: datetime (potrebuje komponent datepicker)
    • time (potrebuje komponent timepicker)
    • color (potrebuje komponent colorpicker)
    • icon (potrebuje komponent faicons)
    • emoji (potrebuje komponent emoji)
    • url
    • number
    • number2 (nulovateľné)
    • search
    • lower
    • upper
    • slug
    • id
    • NOVINKA: radiobutton
    • NOVINKA: tags
    • NOVINKA: tags-lower
    • NOVINKA: tags-upper
    • NOVINKA: tags-id
    • NOVINKA: tags-email
    • NOVINKA: tags-slug
    • NOVINKA: tags-phone
    • NOVINKA: tags-url
  • 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)
  • autofocus {Boolean} voliteľné, zaostrí vstup (predvolené: false)
  • align {String} voliteľné, left (predvolené), 2 / right alebo 1 / center
  • after {String} voliteľné, to znamená znak za štítkom (predvolené: :)
  • autofill {Boolean/String} voliteľné, umožňuje funkciu automatického dopĺňania prehliadača (ako názov vstupu sa použije string, predvolené: false)
  • placeholder {String} voliteľné, do vstupu pridá text placeholder
  • maxlength {Number} voliteľné, nastavuje maximálnu dĺžku znakov (predvolené: 200)
  • minlength {Number} voliteľné, nastavuje minimálnu dĺžku znakov
  • minvalue {Number} voliteľné, minimálna hodnota pre typ number
  • maxvalue {Number} voliteľné, maximálna hodnota pre typ number
  • increment {Number} voliteľné, nastavuje hodnotu pre zvýšenie (predvolené: 1)
  • validate {String} voliteľné, podmienka pre overenie hodnoty, môže obsahovať prepojenie na function(value) alebo !!value.match(/[a-z]+/)
  • format {String} voliteľné, formátovanie výstupu napr. pre date typ: yyyy-MM-dd, pre time typ: HH:mm, pre number môžete definovať max. desatinné miesta (predvolené: auto)
  • disabled {Boolean} voliteľné, deaktivuje tento komponent
  • error {String} voliteľné, pridá text string pod komponent
  • autocomplete {String} voliteľné, musí obsahovať prepojenie na funkciu, spúšťa sa pri udalosti focus
  • 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 až function(search, next) (cesta musí obsahovať / alebo NEW: id|name,id|name
  • 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
  • diroffsety {Number} voliteľné, posun Y (predvolené: 0)
  • diroffsetx {Number} voliteľné, posun X (predvolené: 0)
  • 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)
  • direxclude {Boolean} voliteľné, vylučuje aktuálnu hodnotu zo j-Directory (predvolené: true)
  • dirsearch {Boolean|String} voliteľné, môže zakázať vyhľadávanie v j-Directory (predvolené: true) alebo {String} (názov kľúča) môže mapovať hodnotu pre vyhľadávanie
  • dirraw {Boolean} voliteľné, môže zakázať escapovanie položiek pre j-Directory (predvolené: false)
  • dirdetail {String} voliteľné, prepojenie na funkciu function(val, next(NEW_TEXT)) (cielené na dirsource)
  • dirfilter {String} voliteľné, podmienená metóda vloženého filtra, napríklad: value.id !== 2 (zacielené na dirsource)
  • NEW: dirrawrender {Boolean} voliteľné, ak dirsource nezahŕňa hodnotu, zobrazí sa nespracovaná hodnota (predvolené: true)
  • mask {String} voliteľné, môže obsahovať masku v tvare ###/## (# je nahradené znakom)
  • maskregexp {String} voliteľné, môže obsahovať RegExp pre každý znak v tvare \d,\d,\d,null,\d,\d (, je oddeľovač)
  • masktidy {Boolean} voliteľné, komponent vracia iba nespracované znaky bez pevných znakov (predvolené: false)
  • autosource {String} cesta k zdroju vyhľadávania Array (NEW) alebo function(search, render(arr)) pre dynamické vyhľadávanie
  • autovalue {String} cesta vlastnosti pre hodnotu v autosource, predvolená hodnota: name
  • autoexec {String} a spôsob cesty function(item, next(value_to_input))
  • searchalign {Number} môže zarovnať ikonu na type:search doľava (2) alebo doprava (1, predvolené)
  • forcevalidation {Boolean} umožňuje overenie sily pre phone a email (predvolené: true)
  • camouflage {Boolean|String} maskuje hodnotu na vstupe po spustení udalosti blur (predvolené: false) alebo to môže byť String, ktorá bude použitá ako kamufláž
  • monospace {Boolean} povolí písmo monospaced (predvolené: false)
  • multiple {Boolean} aktivuje začiarkavacie políčka, ak dirsource nie je prázdne
  • tabindex {Number} pridá tabindex (predvolené: 0)
  • tabs {Boolean} povoľuje karty pre viacriadkové (predvolené: true)
  • Vydanie blokového textového poľa readonly {Boolean} (predvolené: false)
  • transform {String} prepojenie na function(value, config) pre transformáciu zadaných hodnôt
  • multiline {Boolean} funguje len s typom radiobutton
  • separator {String|Boolean} oddeľovač pre viacero vykreslených hodnôt
  • realtime {Boolean} umožňuje viazanie v reálnom čase (predvolené: true)
  • exec {String} prepojenie na function(value, element), ktoré sa vyhodnotí, ak bude ovplyvnený vstup

Zaujímavé:

  • type:date potrebuje datepicker komponent
  • type:time potrebuje timepicker komponent
  • dirsource:path.to.datasource potrebuje directory komponent
  • ak licon alebo ricon začína !, potom komponent vykreslí surovú hodnotu namiesto icon
  • Trieda ui-input-ok je viazaná, keď je vstup validovaný a vyplnený
  • SET('path', 'camouflage', 'show'); zobrazuje hodnotu pre 2000 ms
https://www.youtube.com/watch?v=Ne3ezaP0w34

Použite ho so <ui-component name="input">. 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="LAZY directory" config="placeholder:Search..."></ui-component>
<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY icons"></ui-component>

<div style="width:400px">
	<ui-component name="input" path="form.framework" config="placeholder:Choose a framework;dirsource:frameworks" class="m">Framework</ui-component>
	<ui-component name="input" path="form.terms" config="type:checkbox" class="m">I agree with terms</ui-component>
	<ui-component name="input" path="form.notes" config="type:multiline;innerlabel:1;placeholder:Enter notes" class="m">Notes</ui-component>
	<ui-component name="input" path="form.frameworks" config="placeholder:Select frameworks;multiple:true;dirsource:frameworks">Frameworks</ui-component>
	<br />
	<ui-component name="input" path="form.city" config="required:1;placeholder:Where do you live?;dirsource:cities;dircustom:true">City</ui-component>
	<br />
	<ui-component name="input" path="cities" config="type:tags;placeholder:Type a tag and press enter">Tags</ui-component>
	<br />
	<ui-component name="input" path="form.date" config="placeholder:Enter date;type:date;required:true;innerlabel:true">Date</ui-component>
	<br />
	<ui-component name="input" path="form.search" config="placeholder:Search...;type:search;innerlabel:true">Search</ui-component>
	<br />
	<ui-component name="input" path="form.password" config="placeholder:Type a password...;type:password">Password</ui-component>
	<br />
	<ui-component name="input" path="form.zip" config="mask:###-##;maskregexp:\d,\d,\d,null,\d,\d">ZIP</ui-component>
	<br />
	<ui-component name="input" path="form.email" config="placeholder:example@email.com;type:email">Email</ui-component>
	<br />
	<ui-component name="input" path="form.phone" config="placeholder:+421;type:phone">Phone</ui-component>
	<br />
	<ui-component name="input" path="form.radio" config="type:radiobutton;dirsource:Male,Female,Unknown">Gender</ui-component>
	<br />
	<ui-component name="input" path="form.radio" config="type:radiobutton;dirsource:Male,Female,Unknown;multiline:1">Gender</ui-component>
	<br />
	<div style="width:150px">
		<ui-component name="input" path="form.age" config="type:number;innerlabel:false">Your age</ui-component>
	</div>
</div>

<script>
	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var cities = ['Slovakia', 'Poland', 'Hungary', 'Germany'];
	var form = {};
	form.age = 30;
</script>