j-Input

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

j-Input multifunkcionális input összetevő, amely sok funkciót támogat, és optimalizált a mindennapi használatra. j-Textbox és j-DropdownCsak a munkával jComponent +v17.

konfiguráció:

type {String} opcionális értékek:
- Az üres értéke az alapértelmezett text-et jelenti
- email,
- multiline
- checkbox
- phone
- password
- zip
- date (a datepicker összetevőre van szükség)
- NEW: datetime (a datepicker komponensre van szükség)
- time (a timepicker összetevőre van szükség)
- color (a colorpicker összetevőre van szükség)
- icon (a faicons összetevőre van szükség)
- emoji (a emoji összetevőre van szükség)
- url
- number
- number2 (nem érvényes)
- search
- lower
- upper
- slug
- id
- Hírek > radiobutton
- Hírek > tags
- Hírek > tags-lower
- Hírek > tags-upper
- Hírek > tags-id
- Hírek > tags-email
- Hírek > tags-slug
- Hírek > tags-phone
- Hírek > tags-url
required {Boolean} opcionális, lehetővé teszi a „követelt” (default: false)
icon {String} opcionális, a címkék ikonja például home, cog, stb.
licon {String} opcionális, bal ikon, például home, cog, stb.
liconclick {String} opcionális, a function(component, input) módszerhez vezető út
ricon {String} opcionális, jobb ikon, például home, cog, stb.
riconclick {String} opcionális, a function(component, input) módszerhez vezető út
label {String} opcionális, címke (az alapértelmezett HTML tartalom)
autofocus {Boolean} opcionális, összpontosítja a bevitelt (default: false)
align {String} az opcionális, left (Egy alaptörvény szerint 2 / right vagy 1 / center
after {String} opcionális, ez azt jelenti, hogy egy char a címke után (default: :)
autofill {Boolean/String} opcionális, lehetővé teszi a böngésző autofill funkcióját (string fog használni a beviteli névként, alapértelmezett: false)
A placeholder {String} opcionális, a placeholder szöveget adja hozzá a bejegyzéshez
maxlength {Number} opcionális, maximális tartományt állapít meg (default: 200)
minlength {Number} opcionális, minimális hosszúságot állít be
minvalue {Number} opcionális, a number típus minimális értéke
maxvalue {Number} opcionális, a number típus maximális értéke
A increment {Number} opcionális, a fokozás értéke (default: 1)
validate {String} opcionális, az érték validálásának feltétele, tartalmazhat egy linket a function(value) vagy !!value.match(/[a-z]+/)
format {String} Az opcionális, kimeneti formázás stb. date A típus: yyyy-MM-ddAzért time A típus: HH:mmAzért number Maximális decimálok (default) meghatározása: auto)
disabled {Boolean} opcionális, kikapcsolja ezt az összetevőt
error {String} opcionális, hozzáadja a string szöveget az összetevő alatt
autocomplete {String} opcionális, egy funkcióhoz való linket kell tartalmaznia, a focus eseményen indítható
spaces {Boolean} opcionális, lehetővé teszi a helyek máskülönben eltávolítja őket (default: true)
innerlabel {Boolean} opcionális, lehetővé teszi a belső címke (default: true)
dirsource {String} opcionális, az adatforráshoz vezető út vagy NEW a function(search, next) felé (az útnak tartalmaznia kell a / vagy a NEW: id|name,id|name
dircustom {String/Boolean} opcionális, tartalmazhat egy utat a function(val, next(new_val)) vagy lehet Boolean. Ez az opció lehetővé teszi a hozzáadott érték (érték nem meghatározott adatforrás)
dirrender {String} opcionális, egy út a function(item, text) (a j-Directory HTML-t vissza kell téríteni), ez a funkció befolyásolhatja az elemek listáját a j-Directory
dirminwidth {Number} opcionális, minimális szélesség a j-Directory, alapértelmezett: 200
dirmaxwidth {Number} opcionális, maximális szélesség a j-Directory
diroffsety {Number} opcionális, Y offset (default: 0)
diroffsetx {Number} opcionális, X offset (default: 0)
dirplaceholder {String} opcionális, egy helytartó a j-Directory
dirempty {String} opcionális, üres mezőt ad a j-Directory számára
dirkey {String} opcionális, a text olvasásához szükséges kulcsszavak dirsource-ben (előzetes: name)
dirvalue {String} opcionális, a value olvasásához szükséges kulcsszavak dirsource-ben (előzetes: id)
direxclude {Boolean} opcionális, kizárja a jelenlegi értéket a j-Directory (default: true)
dirsearch {Boolean|String} opcionális, lehet letiltani a keresést a j-Directory (default: true) vagy a {String} (kulcsnev) térképet értéket keresés
dirraw {Boolean} opcionális, nem engedélyezheti a j-Directory elemek elkerülését (default: false)
dirdetail {String} opcionális, a function(val, next(NEW_TEXT)) funkcióhoz való hivatkozás (a dirsource-re irányuló)
dirfilter {String} opcionális, inline szűrő feltételes módszer, például: value.id !== 2 (a dirsource-re irányuló)
NEW: dirrawrender {Boolean} opcionális, ha a dirsource nem tartalmaz értéket, akkor nyers értéket jelent (default: true)
mask {String} opcionális, tartalmazhat egy maszk formájában ###/## (# helyettesíthető a char)
maskregexp {String} opcionális, tartalmazhat RegExp minden char a \d,\d,\d,null,\d,\d formában (, a delimiter)
masktidy {Boolean} opcionális, az összetevő csak nyers csöveket ad vissza rögzített csövek nélkül (előzetes: false)
autosource {String} egy út a keresési forráshoz Array (NEW) vagy function(search, render(arr)) a dinamikus kereséshez
autovalue {String} a tulajdonság útja az értékre autosource, alapértelmezett: name
autoexec {String} egy út módszer function(item, next(value_to_input))
searchalign {Number} Az ikonok illeszkedhetnek type:search Elhagyni (2vagy a helyes (1A default)
A forcevalidation {Boolean} lehetővé teszi a phone és a email teljesítmény validálását (default: true)
A camouflage {Boolean|String} elrejti az értéket a beviteli után blur esemény (például: false) vagy lehet String amely használható, mint egy kamuflázió
A monospace {Boolean} a monospaced betűtípusot engedélyezi (például: false)
A multiple {Boolean} lehetővé teszi az ellenőrző dobozokat, ha a dirsource nem üres
A tabindex {Number} beállítja a tabindexet (például: 0)
A tabs {Boolean} lehetővé teszi a multilinek címkéit (default: true)
readonly {Boolean} blokk szöveg mező kiadás (default: false)
transform {String} a beadott értékek átalakítására szolgáló function(value, config) link
A multiline {Boolean} csak a radiobutton típusral működik
separator {String|Boolean} - több renderezett értékek szétválasztója
A realtime {Boolean} valós idejű kötődését teszi lehetővé (default: true)
exec {String} egy link a function(value, element) amely értékelni fogja, ha a bevitelt befolyásolja

Érdekes az:

type:date szükséges datepicker komponens
type:time szükséges timepicker komponens
dirsource:path.to.datasource szükséges directory komponens
Ha az licon vagy ricon Kezdődik a ! A készítmény a nyers érték helyett icon
A ui-input-ok osztály kötődik, amikor a bevitelt érvényesítik és kitöltötték
A SET('path', 'camouflage', 'show'); értékét mutatja a 2000 ms

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

Használja a <ui-component name="input">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>