j-Input

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

j-Input je multifunkční input komponent, který podporuje mnoho funkcí a je optimalizován pro každodenní použití. j-Textbox a j-DropdownPráce pouze s jComponent +v17.

Konfigurace:

type {String} volitelné hodnoty:
- Prázdná hodnota znamená default text
- email,
- multiline
- checkbox
- phone
- password
- zip
- date (potřebuje složku datepicker)
- NEW: datetime (potřebuje složku datepicker)
- time (potřebuje složku timepicker)
- color (potřebuje složku colorpicker)
- icon (potřebuje složku faicons)
- emoji (potřebuje složku emoji)
- url
- number
- number2 (zrušený)
- search
- lower
- upper
- slug
- id
- Příslušenství: radiobutton
- Příslušenství: tags
- Příslušenství: tags-lower
- Příslušenství: tags-upper
- Příslušenství: tags-id
- Příslušenství: tags-email
- Příslušenství: tags-slug
- Příslušenství: tags-phone
- Příslušenství: tags-url
required {Boolean} volitelně, umožňuje "potřebné" (předvolené: false)
icon {String} volitelné, ikona pro štítky např. home, cog, atd.
licon {String} volitelný, levá ikona např. home, cog, atd.
liconclick {String} volitelný, cesta k metodu function(component, input)
ricon {String} volitelný, pravá ikona např. home, cog, atd.
riconclick {String} volitelný, cesta k metodu function(component, input)
label {String} volitelné, štítek (default je obsah HTML)
autofocus {Boolean} je volitelný, zaměřuje se na vstup (předvolený: false)
align {String} volitelně , left a podvodně, 2 / right nebo 1 / center
after {String} je volitelný, znamená to char po štítku (default: :)
autofill {Boolean/String} volitelně, umožňuje funkci autofill prohlížeče (string bude použit jako vstupní název, předvoleno: false)
placeholder {String} volitelně, přidává text placeholder do vstupu
maxlength {Number} volitelně, nastavení maximální délky čerpadel (default: 200)
minlength {Number} volitelně, stanoví minimální délku pneumatik
minvalue {Number} volitelné, minimální hodnota pro typ number
maxvalue {Number} volitelné, maximální hodnota pro typ number
increment {Number} je volitelný, stanoví hodnotu pro zvýšení (default: 1)
validate {String} volitelný, podmínka pro potvrzení hodnoty, může obsahovat odkaz na function(value) nebo !!value.match(/[a-z]+/)
format {String} Volitelné, výstupní formátování atd. date typy : yyyy-MM-ddPro time typy : HH:mmPro number Můžete definovat max. decimals (default): auto)
disabled {Boolean} volitelně, tento složka je deaktivována
error {String} volitelně, přidává text string pod složkou
autocomplete {String} je volitelný, musí obsahovat odkaz na funkci, vyvolává se na události focus
spaces {Boolean} volitelné, umožňuje prostory jinak je odstraňuje (předvolené: true)
innerlabel {Boolean} volitelné, umožňuje vnitřní značku (podmínkou: true)
dirsource {String} volitelně, cesta k datovému zdroji nebo NEW do function(search, next) (cesta musí obsahovat / nebo NĚV: id|name,id|name
dircustom {String/Boolean} je volitelný, může obsahovat cestu k function(val, next(new_val)) nebo může být Boolean.Tato možnost umožňuje přidání vlastního hodnoty (hodnota není definována v zdroji údajů)
dirrender {String} volitelné, cesta k function(item, text) (musí vrátit HTML pro j-Directory), tato funkce může ovlivnit seznam položek v j-Directory
Volitelná šířka dirminwidth {Number}, minimální šířky pro j-Directory, výchozí: 200
dirmaxwidth {Number} volitelné, maximální šířka pro j-Directory
diroffsety {Number} volitelné, Y offset (předvolené: 0)
diroffsetx {Number} volitelné, X offset (předvolené: 0)
dirplaceholder {String} volitelné, místo držitele pro j-Directory
dirempty {String} volitelně, přidává prázdné pole pro j-Directory
dirkey {String} volitelný, klíčový název pro čtení text v dirsource (předvolený: name)
dirvalue {String} volitelný, klíčový název pro čtení value v dirsource (předvolený: id)
direxclude {Boolean} je volitelný, vylučuje aktuální hodnotu z j-Directory (předvolený: true)
dirsearch {Boolean|String} volitelně, může být vyhledávání deaktivováno v j-Directory (podle předvolby: true) nebo {String} (klíčové jméno) může mapovat hodnotu pro vyhledání
dirraw {Boolean} volitelné, může být zakázáno únik položek pro j-Directory (předvolené: false)
dirdetail {String} volitelně, odkaz na funkci function(val, next(NEW_TEXT)) (cílí na dirsource)
dirfilter {String} volitelná, inline filtrová podmíněná metoda, například: value.id !== 2 (s cílem na dirsource)
NEW: dirrawrender {Boolean} volitelné, pokud dirsource neobsahuje hodnotu, bude to surová hodnota (podle předvolby: true)
mask {String} volitelné, může obsahovat masku ve formě ###/## (# je nahrazeno charem)
maskregexp {String} volitelně, může obsahovat RegExp pro každý char ve formě \d,\d,\d,null,\d,\d (, je delimetr)
masktidy {Boolean} volitelně, komponenta vrací pouze surové pneumatiky bez pevných pneumatik (předvolené: false)
autosource {String} je cesta k vyhledávacímu zdroji Array (NEW) nebo function(search, render(arr)) pro dynamické vyhledávání
autovalue {String} je vlastnická cesta pro hodnotu v autosource, předvolená: name
Metoda function(item, next(value_to_input)) je metoda autoexec {String}
searchalign {Number} Můžete přidat ikonku type:search Zanechal jsem (2nebo správně (1a default)
forcevalidation {Boolean} umožňuje validace síly pro phone a email (předvolené: true)
camouflage {Boolean|String} maskuje hodnotu v vstupu po vyvolání události blur (předběžně: false) nebo může být String, která bude použita jako kamufláže
monospace {Boolean} umožňuje písemnost monospaced (předvolené: false)
multiple {Boolean} umožňuje kontrolní krabičky, pokud není dirsource prázdný
tabindex {Number} přidává tabový index (předvolený: 0)
tabs {Boolean} umožňuje tabulky pro multiliny (předvolené: true)
readonly {Boolean} blokovací textové pole (předvolené: false)
transform {String} odkaz na function(value, config) pro přeměnu zadávaných hodnot
multiline {Boolean} funguje pouze s typem radiobutton
separator {String|Boolean} - separátor pro více hodnot
realtime {Boolean} umožňuje zavazování v reálném čase (předvolené: true)
exec {String} odkaz na function(value, element), který bude vyhodnocován, pokud je vstup ovlivněn

Zajímavé je:

type:date potřebuje _datepicker__ složku
type:time potřebuje _timepicker__ složku
dirsource:path.to.datasource potřebuje _directory__ složku
Pokud licon nebo ricon začíná s !, pak složka představuje surovou hodnotu namísto icon.
Klasa ui-input-ok je připojena, když je vstup validován a vyplněn
SET('path', 'camouflage', 'show'); ukazuje hodnotu 2000 ms

https://www.youtube.com/watch?v=Ne3ezaP0w34

Použijte ji s <ui-component name="input">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>