j-Input

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

j-Input è multifunzionale input componente che supporta molte caratteristiche e è ottimizzato per l'uso quotidiano. j-Textbox e j-DropdownFunziona solo con jComponent +v17.

Configurazione:

type {String} opzionale, valori:
- Il valore vuoto è il valore standard text
- email,
- multiline
- checkbox
- phone
- password
- zip
- date (necessario componente datepicker)
- NEW: datetime (necessario componente datepicker)
- time (necessario componente timepicker)
- color (necessario componente colorpicker)
- icon (necessario componente faicons)
- emoji (necessario componente emoji)
- url
- number
- number2 (nulla di valore)
- search
- lower
- upper
- slug
- id
- Sito ufficiale: radiobutton
- Sito ufficiale: tags
- Sito ufficiale: tags-lower
- Sito ufficiale: tags-upper
- Sito ufficiale: tags-id
- Sito ufficiale: tags-email
- Sito ufficiale: tags-slug
- Sito ufficiale: tags-phone
- Sito ufficiale: tags-url
required {Boolean} opzionale, consente "necessario" (default: false)
icon {String} opzionale, icona per etichette ecc. home, cog, ecc.
licon {String} opzionale, icona sinistra, ecc. home, cog, ecc.
liconclick {String} opzionale, un percorso per il metodo function(component, input)
ricon {String} opzionale, icona destra ecc. home, cog, ecc.
riconclick {String} opzionale, un percorso per il metodo function(component, input)
label {String} opzionale, un'etichetta (default è il contenuto HTML)
autofocus {Boolean} opzionale, focalizza l'ingresso (default: false)
align {String} opzionale è left di default, 2 / right o 1 / center
after {String} opzionale, significa un carico dopo l'etichetta (default: :)
autofill {Boolean/String} opzionale, consente la funzione di autofill del browser (string sarà utilizzato come nome di input, predefinito: false)
placeholder {String} opzionale, aggiunge un testo placeholder all'ingresso
maxlength {Number} opzionale, impone una lunghezza massima di cartucce (default: 200)
minlength {Number} opzionale, impone una lunghezza minima di carri
minvalue {Number} opzionale, un valore minimo per il tipo number
maxvalue {Number} opzionale, un valore massimo per il tipo number
increment {Number} opzionale, impone un valore per l'incremento (default: 1)
validate {String} opzionale, una condizione per la validazione del valore, può contenere un link a function(value) o !!value.match(/[a-z]+/)
format {String} opzionale, formattazione di output e.g. per date Il tipo: yyyy-MM-ddper il time Il tipo: HH:mmper il number Si può definire il massimo decimale (default: auto)
disabled {Boolean} opzionale, disabilita questo componente
error {String} opzionale, aggiunge un testo string sotto il componente
autocomplete {String} opzionale, deve contenere un collegamento a una funzione, viene attivato su evento focus
spaces {Boolean} opzionale, permette spazi altrimenti li rimuove (default: true)
innerlabel {Boolean} opzionale, permette l'etichetta interna (default: true)
dirsource {String} opzionale, percorso a una fonte di dati o NEW a function(search, next) (il percorso deve contenere / o NIEW: id|name,id|name
dircustom {String/Boolean} opzionale, può contenere un percorso a function(val, next(new_val)) o può essere Boolean.Questa opzione può consentire l'aggiunta di un valore personalizzato (valore non definito nella fonte dati)
dirrender {String} opzionale, un percorso a function(item, text) (deve essere restituito HTML per j-Directory), questa funzione può influenzare l'elenco degli articoli in j-Directory
dirminwidth {Number} opzionale, una larghezza minima per j-Directory, standard: 200
dirmaxwidth {Number} opzionale, una larghezza massima per j-Directory
diroffsety {Number} opzionale, Y offset (default: 0)
diroffsetx {Number} opzionale, X offset (default: 0)
dirplaceholder {String} opzionale, un contenitore di spazio per j-Directory
dirempty {String} opzionale, aggiunge un campo vuoto per j-Directory
dirkey {String} opzionale, un nome chiave per la lettura di text in dirsource (default: name)
dirvalue {String} opzionale, un nome chiave per la lettura di value in dirsource (default: id)
direxclude {Boolean} opzionale, esclude un valore corrente da j-Directory (default: true)
dirsearch {Boolean|String} opzionale, può disattivare la ricerca in j-Directory (default: true) o {String} (nome chiave) può mapare un valore per la ricerca
dirraw {Boolean} opzionale, può disattivare gli oggetti per j-Directory (default: false)
dirdetail {String} opzionale, un collegamento alla funzione function(val, next(NEW_TEXT)) (obiettivo per dirsource)
dirfilter {String} opzionale, un metodo condizionale di filtro in linea, ad esempio: value.id !== 2 (obiettivo per dirsource)
NEW: dirrawrender {Boolean} opzionale, se il dirsource non include valore renderà un valore crudo (default: true)
mask {String} opzionale, può contenere una maschera nella forma ###/## (# viene sostituito da un carico)
maskregexp {String} opzionale, può contenere RegExp per ciascun carico nel modulo \d,\d,\d,null,\d,\d (, è delimitato)
masktidy {Boolean} opzionale, il componente restituisce solo i carri crudi senza carri fisi (default: false)
autosource {String} un percorso alla fonte di ricerca Array (NEW) o function(search, render(arr)) per la ricerca dinamica
autovalue {String} un percorso di proprietà per il valore in autosource, standard: name
autoexec {String} un metodo di strada function(item, next(value_to_input))
searchalign {Number} Si può allineare l'icona type:search per lasciare (2o giusta (1di default)
forcevalidation {Boolean} permette la validazione della forza per phone e email (default: true)
camouflage {Boolean|String} maschera il valore nell'ingresso dopo che viene rilasciato l'evento blur (default: false) o può essere String che sarà utilizzato come camuflaggio
monospace {Boolean} permette il font monospaced (default: false)
multiple {Boolean} consente scatole se dirsource non è vuoto
tabindex {Number} aggiunge un tabindex (default: 0)
tabs {Boolean} consente le schede per multiline (default: true)
Edizione del campo di testo di blocco readonly {Boolean} (default: false)
transform {String} un collegamento al function(value, config) per la trasformazione dei valori inseriti
multiline {Boolean} funziona solo con il tipo radiobutton
separator {String|Boolean}: un separatore per valori multipli
realtime {Boolean} consente il legame in tempo reale (default: true)
exec {String} un collegamento al function(value, element) che verrà valutato se l'ingresso è influenzato

Interessante è:

type:date richiede il componente datepicker
type:time richiede il componente timepicker
dirsource:path.to.datasource richiede il componente directory
se licon o ricon inizia con !, il componente rilascia un valore crudo invece di icon
La classe ui-input-ok è legata quando l'ingresso è validato e riempito
SET('path', 'camouflage', 'show'); mostra il valore per 2000 ms

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

Utilizzare con <ui-component name="input">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>