j-InputTags

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

Configurazione:

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)
after {String} opzionale, significa un carico dopo l'etichetta (default: :)
placeholder {String} opzionale, aggiunge un testo placeholder all'ingresso
validate {String} opzionale, una condizione per la validazione del valore, può contenere un link a function(value) o !!value.match(/[a-z]+/)
disabled {Boolean} opzionale, disabilita questo componente
error {String} opzionale, aggiunge un testo string sotto il componente
spaces {Boolean} opzionale, permette spazi altrimenti li rimuove (default: true)
innerlabel {Boolean} opzionale, permette l'etichetta interna (default: true)
dirsource {String} opzionale, la strada a una fonte di dati o NEW può contenere un collegamento al metodo function(search, next(items_arr))
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
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)
autosource {String} è un percorso per la funzione search in autocomplete, function(search, render(arr))
autovalue {String} un percorso di proprietà per il valore in autosource
transform {Number} opzionale, trasforma il testo 0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize (default: 0)
enteronly {Boolean} opzionale, aggiunge un nuovo valore dopo la pressione della chiave enter (default: true)

Interessante è:

dirsource:path.to.datasource richiede il componente directory
se licon o ricon inizia con !, il componente rilascia un valore crudo invece di icon
dirsource con i percorsi a metodi può caricare i dati in modo asincronico

Utilizzare con <ui-component name="inputtags">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="directory" config="placeholder:Search..."></ui-component>

<div style="width:400px">
	<ui-component name="inputtags" path="form.frameworks" config="required:1;placeholder:Type a framework name;dirsource:frameworks">Framework</ui-component>
	<br />
	<ui-component name="inputtags" path="form.countries" config="innerlabel:true">Country</ui-component>
</div>

<script>
	var frameworks = [{ id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var form = { framework: [1], countries: ['Slovakia', 'Poland', 'Hungary', 'Germany'] };
</script>