j-Input

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

j-Input är multifunktionell input komponenten som stöder många funktioner och den är optimerad för daglig användning. j-Textbox och j-DropdownVerkar endast med jComponent +v17.

Konfigurera:

type {String} alternativ, värden är:
- tomt värde betyder standard text
- email,
- multiline
- checkbox
- phone
- password
- zip
- date (behöver en komponent av datepicker)
- NEW: datetime (behöver en komponent av datepicker)
- time (behöver en komponent av timepicker)
- color (behöver en komponent av colorpicker)
- icon (behöver en komponent av faicons)
- emoji (behöver en komponent av emoji)
- url
- number
- number2 (nollvärd)
- search
- lower
- upper
- slug
- id
- Nytt: radiobutton
- Nytt: tags
- Nytt: tags-lower
- Nytt: tags-upper
- Nytt: tags-id
- Nytt: tags-email
- Nytt: tags-slug
- Nytt: tags-phone
- Nytt: tags-url
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)
autofocus {Boolean} är valfritt, fokuserar på inmatningen (default: false)
align {String} Optionellt är, left (enligt standard för 2 / right eller 1 / center
after {String} är valfritt, det betyder en char efter etikett (default: :)
autofill {Boolean/String} valfritt, möjliggör webbläsarens autofillfunktion (string kommer att användas som ett inmatningsnamn, standard: false)
placeholder {String} alternativ, lägger till en placeholder text i inmatningen
maxlength {Number} valfritt, ställer in en maximal längd av strängar (default: 200)
minlength {Number} valfritt, ställer in en minimilängd av lådor
minvalue {Number} valfritt, ett minimivärde för typ number
maxvalue {Number} valfritt, ett maximalt värde för typ number
increment {Number} valfritt, anger ett värde för ökning (default: 1)
validate {String} är valideringsvillkor och kan innehålla en länk till function(value) eller !!value.match(/[a-z]+/).
format {String} Optionell, utgångsformatering etc. för date Typ av: yyyy-MM-ddFör att time Typ av: HH:mmFör att number Du kan definiera max. decimals (default: auto)
disabled {Boolean} alternativ, inaktiverar denna komponent
error {String} alternativ, lägger till en string text under komponenten
autocomplete {String} är valfritt, måste innehålla en länk till en funktion, utlöses på focus händelse
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} valfritt, väg till en datakälla eller NEW till function(search, next) (vägen måste innehålla / eller NEW: id|name,id|name
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
diroffsety {Number} alternativ, Y offset (default: 0)
diroffsetx {Number} alternativ, X offset (default: 0)
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)
direxclude {Boolean} är valfritt, utesluter ett aktuellt värde från j-Directory (default: true)
dirsearch {Boolean|String} alternativ, kan inaktivera sökningen i j-Directory (default: true) eller {String} (nyckelnamn) kan kartlägga ett värde för sökning
dirraw {Boolean} valfritt, kan inaktivera flöde av objekt för j-Directory (default: false)
dirdetail {String} är valfritt, en länk till funktionen function(val, next(NEW_TEXT)) (målad för dirsource)
dirfilter {String} valfritt, en inline-filter villkorlig metod, till exempel: value.id !== 2 (målad för dirsource)
NEW: dirrawrender {Boolean} valfritt, om dirsource inte innehåller värde kommer det att ge ett råvärde (default: true)
mask {String} valfritt, kan innehålla en mask i form av ###/## (# ersätts för en tåg)
maskregexp {String} är valfritt, kan innehålla RegExp för varje chark i form \d,\d,\d,null,\d,\d (, är delimiter)
masktidy {Boolean} är valfritt, komponenten returnerar endast råvaror utan fasta strängar (default: false)
autosource {String} en väg till sökkällan Array (NEW) eller function(search, render(arr)) för dynamisk sökning
autovalue {String} är en fastighetssida för värdet i autosource, standard: name
autoexec {String} en vägmetod function(item, next(value_to_input))
searchalign {Number} kan anpassa ikonen på type:search att lämna (2eller rätt (1Förfalskad )
forcevalidation {Boolean} möjliggör styrkavalidering för phone och email (default: true)
camouflage {Boolean|String} maskerar värdet i inmatningen efter att blur händelse utlöses (default: false) eller det kan vara String som kommer att användas som en camouflage
monospace {Boolean} aktiverar monospaced font (default: false)
multiple {Boolean} aktiverar checkboxar om dirsource inte är tom
tabindex {Number} lägger till en tabindex (default: 0)
tabs {Boolean} möjliggör flikar för multiline (default: true)
readonly {Boolean} block textfältet (default: false)
transform {String} en länk till function(value, config) för att omvandla inkommande värden
multiline {Boolean} fungerar endast med radiobutton typ
separator {String|Boolean} en separator för flera renderade värden
realtime {Boolean} möjliggör realtidsbindning (default: true)
exec {String} en länk till function(value, element) som kommer att utvärderas om inmatningen påverkas

Intressanta är:

type:date behöver datepicker komponent
type:time behöver timepicker komponent
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.
ui-input-ok-klassen binds när inmatningen valideras och fylls i
SET('path', 'camouflage', 'show'); visar värdet för 2000 ms

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

Använd den med <ui-component name="input">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="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>