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

Komponenten

j-Input

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

j-Input ist multifunktionell input Komponente, die viele Funktionen unterstützt und für den täglichen Gebrauch optimiert ist. j-Textbox und j-DropdownArbeitet nur mit jComponent +v17.


Konfiguration:

  • type {String} Option, Werte
    • Feuerwert bedeutet Standard-text
    • email,
    • multiline
    • checkbox
    • phone
    • password
    • zip
    • date (sie benötigt datepicker Komponente)
    • NEW: datetime (sie benötigt datepicker Komponente)
    • time (sie benötigt timepicker Komponente)
    • color (sie benötigt colorpicker Komponente)
    • icon (sie benötigt faicons Komponente)
    • emoji (sie benötigt emoji Komponente)
    • url
    • number
    • number2 (Nullable)
    • search
    • lower
    • upper
    • slug
    • id
    • NEU: radiobutton
    • NEU: tags
    • NEU: tags-lower
    • NEU: tags-upper
    • NEU: tags-id
    • NEU: tags-email
    • NEU: tags-slug
    • NEU: tags-phone
    • NEU: tags-url
  • required {Boolean} optional, aktiviert „erforderlich“ (Standard: false)
  • icon {String} optionale, Ikon für die Etikette z.B. home, cog, etc.
  • licon {String} optionale, linken Ikon z. B. home, cog, etc.
  • liconclick {String} optionale, eine Art und Weise zu function(component, input)
  • ricon {String} optionale, rechte Ikon z. B. home, cog, etc.
  • riconclick {String} optionale, eine Art und Weise zu function(component, input)
  • label {String} optionale, eine Etikette (Default ist HTML-Inhalte)
  • autofocus {Boolean} optionale, konzentriert sich auf den Eingang (Default: false)
  • align {String} Optional ist, left (und im Standard) 2 / right oder 1 / center
  • after {String} optionale, das bedeutet eine Char nach der Etikette (Default: :)
  • autofill {Boolean/String} optionale, ermöglicht die Autofill-Funktion des Browsers (string wird als Eingabename verwendet werden, Standard: false)
  • placeholder {String} optional, fügt der Eingabe einen placeholder-Text hinzu
  • maxlength {Number} optional, legt eine maximale Zeichenlänge fest (Standard: 200)
  • minlength {Number} optional, legt eine Mindestlänge von Zeichen fest
  • minvalue {Number} optional, ein Mindestwert für den Typ number
  • maxvalue {Number} optional, ein Maximalwert für den Typ number
  • increment {Number} optionale, stellt eine Wert für die Zunahme fest (Default: 1)
  • validate {String} optional, eine Bedingung zur Validierung des Werts, kann einen Link zu function(value) oder !!value.match(/[a-z]+/) enthalten
  • format {String} Optional, Ausgangsformatering e.g. für date Typ zu finden: yyyy-MM-ddFür time Typ zu finden: HH:mmFür number Sie können max. decimals definieren (Default: auto)
  • disabled {Boolean} optional, deaktiviert diese Komponente
  • error {String} optionale, fügt einen string Text unter der Komponente hinzu
  • autocomplete {String} optional, muss einen Link zu einer Funktion enthalten, wird beim Ereignis focus ausgelöst
  • spaces {Boolean} optional, aktiviert Leerzeichen, andernfalls werden sie entfernt (Standard: true)
  • innerlabel {Boolean} optionale, ermöglicht die innere Etikette (Default: true)
  • dirsource {String} optionale, Pfad zu einer Datenquelle oder NEW zu function(search, next) (Path muss / oder NIEW enthalten: id|name,id|name
  • dircustom {String/Boolean} optionale, kann einen Weg zu function(val, next(new_val)) enthalten oder kann Boolean. Diese Option ermöglicht die Einhaltung eines angepassten Wertes (Wert nicht definiert in der Datenquelle)
  • dirrender {String} optionale, eine Route zu function(item, text) (HTML für j-Directory zurückkehren muss), kann diese Funktion die Liste der Elemente in j-Directory beeinflussen
  • dirminwidth {Number} optionale, minimale Breite für j-Directory, Standard: 200
  • dirmaxwidth {Number} optionale, eine maximale Breite für j-Directory
  • diroffsety {Number} optional, Y Offset (Standard: 0)
  • diroffsetx {Number} optional, X Offset (Standard: 0)
  • dirplaceholder {String} optionale, ein Platzinhaber für j-Directory
  • dirempty {String} optionale, fügt ein leeres Feld für j-Directory hinzu
  • dirkey {String} optionale, ein Schlüsselname für die Lesung von text in dirsource (Default: name)
  • dirvalue {String} optionale, ein Schlüsselname für die Lesung von value in dirsource (Default: id)
  • direxclude {Boolean} ist optionell und ausschließt einen aktuellen Wert von j-Directory (Default: true)
  • dirsearch {Boolean|String} optionale, kann die Suche in j-Directory (Default: true) oder {String} (Schlüsselname) ein Wert für die Suche deaktivieren
  • dirraw {Boolean} optionale, kann die Entladung von Elementen für j-Directory deaktivieren (Default: false)
  • dirdetail {String} optionale, eine Verbindung zur Funktion function(val, next(NEW_TEXT)) (zielt auf dirsource)
  • dirfilter {String} optionale, eine inline-Filterbedingte Methode, zum Beispiel: value.id !== 2 (zielt auf dirsource)
  • NEW: dirrawrender {Boolean} optionalerweise, wenn der dirsource keinen Wert enthält, wird er einen Rohwert darstellen (Default: true)
  • mask {String} optionale, kann eine Maske in der Form ###/## enthalten (# wird für einen Charger ersetzt)
  • maskregexp {String} optionale, kann RegExp für jeden Char in der Form \d,\d,\d,null,\d,\d enthalten (, ist Delimiter)
  • masktidy {Boolean} optionale, die Komponente kehrt nur Rohdichte ohne Festdichte zurück (Default: false)
  • autosource {String} einen Weg zur Suchquelle Array (NEW) oder function(search, render(arr)) für dynamische Suche
  • autovalue {String} ein Eigenschaftspfad für den Wert in autosource, Standard: name
  • autoexec {String} eine Pfadmethode function(item, next(value_to_input))
  • searchalign {Number} Sie können die Icon an type:search zu verlassen (2oder richtig (1und default)
  • forcevalidation {Boolean} ermöglicht die erzwungene Validierung für phone und email (Standard: true)
  • camouflage {Boolean|String} Masken Sie den Wert in der Eingabe nachdem er ausgelöst wird blur Die Veranstaltung (default ) falseOder es kann String die als Kamuflaß verwendet werden
  • monospace {Boolean} aktiviert die Schriftart monospaced (Standard: false)
  • multiple {Boolean} ermöglicht Checkboxes, wenn dirsource nicht leer ist
  • tabindex {Number} fügt einen Tabindex hinzu (Default: 0)
  • tabs {Boolean} ermöglicht Tasten für Multilinen (Default: true)
  • readonly {Boolean} Block Textfeld Edition (Default: false)
  • transform {String} eine Verbindung zum function(value, config) für die Transformation eingegebener Werte
  • multiline {Boolean} funktioniert nur mit radiobutton
  • separator {String|Boolean} - ein separator für mehrere renderierte Werte
  • realtime {Boolean} ermöglicht die Echtzeitbindung (Default: true)
  • exec {String} ein Link zum function(value, element), der ausgewertet wird, wenn der Eingang betroffen ist

Interessant:

  • type:date benötigt datepicker Komponente
  • type:time benötigt timepicker Komponente
  • dirsource:path.to.datasource benötigt directory Komponente
  • Wenn licon oder ricon mit ! beginnt, dann stellt die Komponente einen Rohwert anstelle von icon dar.
  • Die ui-input-ok-Klasse wird gebunden, wenn der Eingang validiert und gefüllt ist
  • SET('path', 'camouflage', 'show'); zeigt den Wert für 2000 ms
https://www.youtube.com/watch?v=Ne3ezaP0w34

Verwenden Sie es mit <ui-component name="input">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>