j-Input

j-Input is multifunctioneel input component die veel functies ondersteunt en is geoptimaliseerd voor dagelijks gebruik. j-Textbox en j-DropdownWerkt alleen met jComponent +v17.

Configuratie:

• type {String} optie, waarden:
  • Vrije waarde betekent standaard text
  • email,
  • multiline
  • checkbox
  • phone
  • password
  • zip
  • date (het vereist de datepicker component)
  • NEW: datetime (need een component van datepicker)
  • time (het vereist de timepicker component)
  • color (het vereist de colorpicker component)
  • icon (het vereist de faicons component)
  • emoji (het vereist de emoji component)
  • url
  • number
  • number2 (niet mogelijk)
  • search
  • lower
  • upper
  • slug
  • id
  • Hoofdstukken: radiobutton
  • Hoofdstukken: tags
  • Hoofdstukken: tags-lower
  • Hoofdstukken: tags-upper
  • Hoofdstukken: tags-id
  • Hoofdstukken: tags-email
  • Hoofdstukken: tags-slug
  • Hoofdstukken: tags-phone
  • Hoofdstukken: tags-url
• required {Boolean} optioneel, mogelijk "verplicht" (default: false)
• icon {String} optioneel, icon voor etiket bijvoorbeeld home, cog, enz.
• licon {String} optioneel, linkse icon bijvoorbeeld home, cog, enz.
• liconclick {String} optioneel, een weg naar de methode function(component, input)
• ricon {String} optioneel, rechter icon bijvoorbeeld home, cog, enz.
• riconclick {String} optioneel, een weg naar de methode function(component, input)
• label {String} optioneel, een etiket (de standaard is HTML-inhoud)
• autofocus {Boolean} optioneel, focust op de ingang (default: false)
• align {String} Optieel is, left De standaard, 2 / right Of 1 / center
• after {String} optioneel, het betekent een char na etiket (default: :)
• autofill {Boolean/String} optioneel, de autofillfunctie van de browser (string zal worden gebruikt als een invoernaam, standaard: false)
• placeholder {String} optioneel, voegt een placeholder tekst toe aan de invoer
• maxlength {Number} optioneel, bepaalt een maximale lengte van de banden (default: 200)
• minlength {Number} optioneel, bepaalt een minimale lengte van banden
• minvalue {Number} optioneel, een minimale waarde voor de number type
• maxvalue {Number} optioneel, een maximale waarde voor de number type
• increment {Number} optioneel, bepaalt een waarde voor verhoging (default: 1)
• validate {String} optioneel, een voorwaarde voor validatie van waarde, kan een link bevatten naar function(value) of !!value.match(/[a-z]+/)
• format {String} optie, output formatting enz. voor date Type van: yyyy-MM-ddVoor time Type van: HH:mmVoor number U kunt max. decimals definiëren (default: auto)
• disabled {Boolean} optioneel, deze component wordt uitgeschakeld
• error {String} optioneel, voegt een string tekst onder de component toe
• autocomplete {String} optioneel, moet een link naar een functie bevatten, wordt uitgevoerd op het evenement focus
• spaces {Boolean} optioneel, maakt ruimte anders het verwijdert ze (default: true)
• innerlabel {Boolean} optioneel, mogelijk interne etikettering (default: true)
• dirsource {String} optioneel, de route naar een gegevensbron of NEW naar function(search, next) (de route moet / of NIEW bevatten: id|name,id|name
• dircustom {String/Boolean} is optioneel, kan een route bevatten naar function(val, next(new_val)) of kan Boolean. Deze optie kan het toevoegen van een aangepaste waarde (waarde niet gedefinieerd in de gegevensbron)
• dirrender {String} optioneel, een route naar function(item, text) (must HTML retourneren voor j-Directory), deze functie kan de lijst van items in j-Directory beïnvloeden
• dirminwidth {Number} optioneel, een minimale breedte voor j-Directory, standaard: 200
• dirmaxwidth {Number} optioneel, een maximale breedte voor j-Directory
• diroffsety {Number} optioneel, Y offset (default: 0)
• diroffsetx {Number} optioneel, X offset (default: 0)
• dirplaceholder {String} optioneel, een plaatshouder voor j-Directory
• dirempty {String} optioneel, voegt een leeg veld toe voor j-Directory
• dirkey {String} optioneel, een sleutelnaam voor het lezen van text in dirsource (default: name)
• dirvalue {String} optioneel, een sleutelnaam voor het lezen van value in dirsource (default: id)
• direxclude {Boolean} optioneel, uitsluit een huidige waarde van j-Directory (default: true)
• dirsearch {Boolean|String} optioneel, kan de zoekopdracht in j-Directory (default: true) of {String} (key name) kunnen een waarde voor het zoeken mappen
• dirraw {Boolean} optioneel, kan het ontsnappen van items voor j-Directory worden uitgeschakeld (default: false)
• dirdetail {String} optioneel, een link naar de functie function(val, next(NEW_TEXT)) (doelstelling voor dirsource)
• dirfilter {String} optioneel, een inline filterconditionele methode, bijvoorbeeld: value.id !== 2 (gericht op dirsource)
• NEW: dirrawrender {Boolean} optioneel, als de dirsource geen waarde bevat, zal het een grondwaarde opleveren (default: true)
• mask {String} optioneel, kan een masker in de vorm van ###/## bevatten (# wordt vervangen door een char)
• maskregexp {String} optioneel, kan RegExp bevatten voor elke char in het formulier \d,\d,\d,null,\d,\d (, is delimiter)
• masktidy {Boolean} optioneel, de component retourt alleen grondvluchten zonder vaste vluchten (default: false)
• autosource {String} een route naar de zoekbron Array (NEW) of function(search, render(arr)) voor dynamische zoekopdrachten
• autovalue {String} een eigendomsweg voor de waarde in autosource, standaard: name
• autoexec {String} een pad methode function(item, next(value_to_input))
• searchalign {Number} kan ik icon op type:search Verlaten (2Of juist (1De default)
• forcevalidation {Boolean} mogelijk voor kracht validatie voor phone en email (default: true)
• camouflage {Boolean|String} verbergt de waarde in de ingang na het worden uitgevoerd blur gebeurtenis (default: false) of het kan zijn String dat zal worden gebruikt als een camouflage
• monospace {Boolean} maakt monospaced lettertype mogelijk (default: false)
• multiple {Boolean} maakt checkboxes mogelijk als dirsource niet leeg is
• tabindex {Number} voegt een tabindex toe (default: 0)
• tabs {Boolean} toelaat de tabs voor multiline (default: true)
• readonly {Boolean} blok tekstveld editie (default: false)
• transform {String} een link naar de function(value, config) voor het transformeren van ingebouwde waarden
• multiline {Boolean} werkt alleen met radiobutton
• separator {String|Boolean}: een separator voor meerdere renderde waarden
• realtime {Boolean} zorgt voor realtime binding (default: true)
• exec {String} een link naar de function(value, element) die zal worden beoordeeld als de ingang wordt beïnvloed

Interessant is:

• type:date nodig datepicker component
• type:time nodig timepicker component
• dirsource:path.to.datasource nodig directory component
• Als licon of ricon begint met !, dan is de component een grondwaarde in plaats van icon.
• De ui-input-ok-klasse wordt gebonden wanneer de input is gevalideerd en gevuld.
• SET('path', 'camouflage', 'show'); toont de waarde voor 2000 ms

Gebruik het met <ui-component name="input">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.