j-InputTags

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Konfigurera:

required {Boolean} valfritt, möjliggör "nödvändigt" (default: false)
icon {String} valfritt, ikon för etikett t.ex. home, cog, etc.
licon {String} valfritt, vänsterikon t.ex. home, cog, etc.
liconclick {String} valfritt, en väg till metoden function(component, input)
ricon {String} valfritt, högerikon t.ex. home, cog, etc.
riconclick {String} valfritt, en väg till metoden function(component, input)
label {String} är valfritt, en etikett (default är HTML-innehåll)
after {String} är valfritt, det betyder en char efter etikett (default: :)
placeholder {String} alternativ, lägger till en placeholder text i inmatningen
validate {String} är valideringsvillkor och kan innehålla en länk till function(value) eller !!value.match(/[a-z]+/).
disabled {Boolean} alternativ, inaktiverar denna komponent
error {String} alternativ, lägger till en string text under komponenten
spaces {Boolean} valfritt, möjliggör utrymmen annars tar det bort dem (default: true)
innerlabel {Boolean} valfritt, möjliggör inre etikett (default: true)
dirsource {String} alternativ, väg till en datakälla eller NEW kan innehålla en länk till metoden function(search, next(items_arr))
dircustom {String/Boolean} är valfritt, kan innehålla en väg till function(val, next(new_val)) eller kan vara Boolean.Detta alternativ kan ge dig möjlighet att lägga till ett anpassat värde (värde inte definieras i datakällan)
dirrender {String} är valfritt, en väg till function(item, text) (du måste returnera HTML för j-Directory), denna funktion kan påverka listan över objekt i j-Directory
dirminwidth {Number} valfritt, minsta bredd för j-Directory, standard: 200
dirmaxwidth {Number} valfritt, högsta bredd för j-Directory
dirplaceholder {String} valfritt, en platsinnehavare för j-Directory
dirempty {String} alternativ, lägger till ett tomt fält för j-Directory
dirkey {String} valfritt, ett nyckelnamn för läsning av text i dirsource (default: name)
dirvalue {String} valfritt, ett nyckelnamn för läsning av value i dirsource (default: id)
autosource {String} en väg till search funktion i autocomplete, function(search, render(arr))
autovalue {String} är en fastighetssida för värdet i autosource
transform {Number} alternativ, omvandlar text 0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize (Default: 0)
enteronly {Boolean} är valfritt och lägger till ett nytt värde efter att enter-nyckeln trycks (default: true)

Intressanta är:

dirsource:path.to.datasource behöver directory komponent
Om licon eller ricon börjar med ! så ger komponenten ett råvärde istället för icon.
dirsource med vägar till metoder kan ladda data asynkroniskt

Använd den med <ui-component name="inputtags">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>