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

Componente

j-Input

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

j-Input este multifuncțional input componenta care susține o mulțime de caracteristici și este optimizat pentru utilizarea zilnică. j-Textbox şi j-DropdownFuncţionează numai cu jComponent +v17.


Configurarea:

  • type {String} opțional, valori:
    • Valoarea goală înseamnă standardul text
    • email,
    • multiline
    • checkbox
    • phone
    • password
    • zip
    • date (necesită componenta datepicker)
    • NEW: datetime (necesită componenta datepicker)
    • time (necesită componenta timepicker)
    • color (necesită componenta colorpicker)
    • icon (necesită componenta faicons)
    • emoji (necesită componenta emoji)
    • url
    • number
    • number2 (Nulabil în continuare)
    • search
    • lower
    • upper
    • slug
    • id
    • Cuvânt cheie: radiobutton
    • Cuvânt cheie: tags
    • Cuvânt cheie: tags-lower
    • Cuvânt cheie: tags-upper
    • Cuvânt cheie: tags-id
    • Cuvânt cheie: tags-email
    • Cuvânt cheie: tags-slug
    • Cuvânt cheie: tags-phone
    • Cuvânt cheie: tags-url
  • required {Boolean} opțional, permite „necesită” (default: false)
  • icon {String} opțional, icon pentru etichetă de exemplu home, cog, etc.
  • licon {String} opțional, iconul stâng de exemplu home, cog, etc.
  • liconclick {String} opțional, o cale către metoda function(component, input)
  • ricon {String} opțional, icon drept, de exemplu home, cog, etc.
  • riconclick {String} opțional, o cale către metoda function(component, input)
  • label {String} opțional, o etichetă (default este conținutul HTML)
  • autofocus {Boolean} opțional, se concentrează pe intrare (default: false)
  • align {String} opţial şi left în mod implicit, 2 / right sau 1 / center
  • after {String} este opțional, înseamnă un car după etichetă (default: :)
  • autofill {Boolean/String} opțional, permite funcția de autofilare a browserului (string va fi utilizat ca un nume de intrare, în mod implicit: false)
  • placeholder {String} este opțional, adăugând un text placeholder la intrarea
  • maxlength {Number} opțional, stabilește o lungime maximă a încărcăturii (default: 200)
  • minlength {Number} opțional, stabilește o lungime minimă a încărcăturii
  • minvalue {Number} opțional, o valoare minimă pentru tipul number
  • maxvalue {Number} opțional, o valoare maximă pentru tipul number
  • increment {Number} opțional, stabilește o valoare pentru creștere (default: 1)
  • validate {String} opțional, o condiție de validare a valorii, poate conține un link la function(value) sau !!value.match(/[a-z]+/)
  • format {String} opțional, formatul de ieșire etc. pentru date Tipul este: yyyy-MM-ddPentru time Tipul este: HH:mmPentru number Puteți defini max. decimale (default: auto)
  • disabled {Boolean} opțional, dezactivă acest component
  • error {String} opțional, adaugă un text string sub componenta
  • autocomplete {String} opțional, trebuie să conțină un link la o funcție, este declanșat pe evenimentul focus
  • spaces {Boolean} opțional, permite spații altfel le îndepărtează (default: true)
  • innerlabel {Boolean} opțional, permite eticheta interioară (default: true)
  • dirsource {String} opțional, calea către o sursă de date sau NEW la function(search, next) (calea trebuie să conțină / sau NOW: id|name,id|name
  • dircustom {String/Boolean} este opțional, poate conține o cale la function(val, next(new_val)) sau poate fi Boolean.Această opțiune poate permite adăugarea unei valori personalizate (valorile nu sunt definite în sursa de date)
  • dirrender {String} opțional, o cale la function(item, text) (trebuie să se întoarcă HTML pentru j-Directory), această funcție poate afecta lista de elemente din j-Directory
  • dirminwidth {Number} opțional, o lățime minimă pentru j-Directory, standard: 200
  • dirmaxwidth {Number} opțional, o lățime maximă pentru j-Directory
  • diroffsety {Number} opțional, Y offset (default: 0)
  • diroffsetx {Number} opțional, X offset (default: 0)
  • dirplaceholder {String} opțional, un locator pentru j-Directory
  • dirempty {String} opțional, adaugă un câmp gol pentru j-Directory
  • dirkey {String} opțional, un nume cheie pentru citirea text în dirsource (default: name)
  • dirvalue {String} opțional, un nume cheie pentru citirea value în dirsource (default: id)
  • direxclude {Boolean} opțional, exclude o valoare curentă de la j-Directory (default: true)
  • dirsearch {Boolean|String} opțional, poate dezactiva căutarea în j-Directory (default: true) sau {String} (numele cheie) poate descrie o valoare pentru căutare
  • dirraw {Boolean} opțional, poate dezactiva scăderea de elemente pentru j-Directory (default: false)
  • dirdetail {String} opțional, un link la funcția function(val, next(NEW_TEXT)) (targetat pentru dirsource)
  • dirfilter {String} opțional, o metodă condiționată de filtrare inline, de exemplu: value.id !== 2 (targetat pentru dirsource)
  • NEW: dirrawrender {Boolean} opțional, în cazul în care dirsource nu include valoarea va reprezenta o valoare crudă (default: true)
  • mask {String} opțional, poate conține o mască în formă ###/## (# este înlocuit cu un car)
  • maskregexp {String} opțional, poate conține RegExp pentru fiecare șar în formularul \d,\d,\d,null,\d,\d (, este delimitant)
  • masktidy {Boolean} opțional, componentul returnează numai baterii crude fără baterii fixe (default: false)
  • autosource {String} o cale către sursa de căutare Array (NEW) sau function(search, render(arr)) pentru căutarea dinamică
  • autovalue {String} este o cale de proprietate pentru valoarea în autosource, standard: name
  • autoexec {String} - o metodă de călătorie function(item, next(value_to_input))
  • searchalign {Number} pot fi aliniate cu iconul type:search Să plece (2sau în mod corect (1În mod default)
  • forcevalidation {Boolean} permite validarea forței pentru phone și email (default: true)
  • camouflage {Boolean|String} mască valoarea în intrare după ce este declanșat evenimentul blur (default: false) sau poate fi String care va fi folosit ca camouflage
  • monospace {Boolean} permite fontul monospaced (default: false)
  • multiple {Boolean} permite cutia de verificare dacă dirsource nu este goală
  • tabindex {Number} adăuga un tabindex (default: 0)
  • tabs {Boolean} permite tabele pentru multilină (default: true)
  • Ediția de câmp text de bloc readonly {Boolean} (default: false)
  • transform {String} un link la function(value, config) pentru transformarea valorilor introduse
  • multiline {Boolean} funcționează numai cu tipul radiobutton
  • separator {String|Boolean} - un separator pentru valori multiple
  • realtime {Boolean} permite legarea în timp real (default: true)
  • exec {String} este un link la function(value, element) care va fi evaluat dacă intrarea este afectată.

Interesantă :

  • type:date necesită componentul datepicker
  • type:time necesită componentul timepicker
  • dirsource:path.to.datasource necesită componentul directory
  • Dacă licon sau ricon începe cu !, atunci componenta face o valoare crudă în loc de icon.
  • Clasa ui-input-ok este legată atunci când intrarea este validată și umplută
  • SET('path', 'camouflage', 'show'); arată valoarea pentru 2000 ms
https://www.youtube.com/watch?v=Ne3ezaP0w34

Utilizați-l cu <ui-component name="input">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>