j-Input

j-Input est multifonctionnel input composant qui soutient beaucoup de fonctionnalités et est optimisé pour l'utilisation quotidienne. j-Textbox et j-DropdownIl travaille uniquement avec jComponent +v17.

Configuration :

• type {String} optionnel, valeurs :
  • La valeur vide signifie défaut text
  • email,
  • multiline
  • checkbox
  • phone
  • password
  • zip
  • date (il faut un composant datepicker)
  • NEW : datetime (ne nécessite pas de composant datepicker)
  • time (il faut un composant timepicker)
  • color (il faut un composant colorpicker)
  • icon (il faut un composant faicons)
  • emoji (il faut un composant emoji)
  • url
  • number
  • number2 (non disponible)
  • search
  • lower
  • upper
  • slug
  • id
  • Étiquette : radiobutton
  • Étiquette : tags
  • Étiquette : tags-lower
  • Étiquette : tags-upper
  • Étiquette : tags-id
  • Étiquette : tags-email
  • Étiquette : tags-slug
  • Étiquette : tags-phone
  • Étiquette : tags-url
• required {Boolean} en option, active "obligatoire" (par défaut : false)
• icon {String} en option, icône pour étiquette par ex. home, cog, etc.
• licon {String} en option, icône de gauche par ex. home, cog, etc.
• liconclick {String} facultatif, un chemin vers la méthode function(component, input)
• ricon {String} en option, icône de droite par ex. home, cog, etc.
• riconclick {String} facultatif, un chemin vers la méthode function(component, input)
• label {String} facultatif, une étiquette (la valeur par défaut est le contenu HTML)
• autofocus {Boolean} optionnel, focalisant l'entrée (defaut: false)
• align {String} Optionnel left par défaut, 2 / right ou 1 / center
• after {String} facultatif, cela signifie un caractère après l'étiquette (par défaut : :)
• autofill {Boolean/String} optionnel, permet la fonctionnalité d'autofill du navigateur (string sera utilisé comme nom d'entrée, par défaut: false)
• placeholder {String} facultatif, ajoute un texte placeholder dans l'entrée
• maxlength {Number} optionnel, fixant une longueur maximale des chars (defaut: 200)
• minlength {Number} optionnel, fixant une longueur minimale des chars
• minvalue {Number} optionnel, une valeur minimale pour le type number
• maxvalue {Number} optionnel, une valeur maximale pour le type number
• increment {Number} optionnel, définit une valeur pour l'augmentation (defaut: 1)
• validate {String} facultatif, condition de validation de valeur, peut contenir un lien vers function(value) ou !!value.match(/[a-z]+/)
• format {String} optionnel, formatage de sortie etc. pour date Type : yyyy-MM-ddPour time Type : HH:mmPour number Vous pouvez définir les décimales (defaut : auto)
• disabled {Boolean} facultatif, désactive ce composant
• error {String} facultatif, ajoute un texte string sous le composant
• autocomplete {String} optionnel, doit contenir un lien à une fonction, est déclenché sur l'événement focus
• spaces {Boolean} facultatif, active les espaces sinon il les supprime (par défaut : true)
• innerlabel {Boolean} en option, active l'étiquette intérieure (par défaut : true)
• dirsource {String} facultatif, route vers une source de données ou NEW à function(search, next) (pour contenir / ou NOW: id|name,id|name
• dircustom {String/Boolean} facultatif, peut contenir un chemin vers function(val, next(new_val)) ou peut être Boolean. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données)
• dirrender {String} facultatif, un chemin vers function(item, text) (doit renvoyer du HTML pour j-Directory), cette fonction peut affecter la liste des éléments dans j-Directory
• dirminwidth {Number} en option, une largeur minimale pour j-Directory, par défaut : 200
• dirmaxwidth {Number} en option, une largeur maximale pour j-Directory
• diroffsety {Number} optionnel, Y offset (défaut: 0)
• diroffsetx {Number} optionnel, X offset (défaut: 0)
• dirplaceholder {String} en option, un espace réservé pour j-Directory
• dirempty {String} facultatif, ajoute un champ vide pour j-Directory
• dirkey {String} en option, un nom de clé pour la lecture de text dans dirsource (par défaut : name)
• dirvalue {String} en option, un nom de clé pour la lecture de value dans dirsource (par défaut : id)
• direxclude {Boolean} optionnel, exclure une valeur actuelle de j-Directory (défaut: true)
• dirsearch {Boolean|String} optionnel, peut désactiver la recherche dans j-Directory (defaut: true) ou {String} (nom clé) peut cartographier une valeur pour la recherche
• dirraw {Boolean} facultatif, peut désactiver l'échappement des articles pour j-Directory (defaut: false)
• dirdetail {String} optionnel, un lien vers la fonction function(val, next(NEW_TEXT)) (objectif pour dirsource)
• dirfilter {String} optionnel, une méthode conditionnelle de filtre en ligne, par exemple: value.id !== 2 (objectif pour dirsource)
• NEW: dirrawrender {Boolean} facultatif, si le dirsource ne comprend pas la valeur, il rendra une valeur première (defaut: true)
• mask {String} optionnel, peut contenir une masque sous la forme de ###/## (# est remplacé par un char)
• maskregexp {String} facultatif, peut contenir RegExp pour chaque char dans le formulaire \d,\d,\d,null,\d,\d (, est délimité)
• masktidy {Boolean} optionnel, le composant ne retourne que les chars crus sans chars fixes (defaut: false)
• autosource {String} un chemin vers la source de recherche Array (NEW) ou function(search, render(arr)) pour la recherche dynamique
• autovalue {String} est une voie de propriété pour la valeur en autosource, par défaut: name
• autoexec {String} méthode de route function(item, next(value_to_input))
• searchalign {Number} Il est possible d'alligner l'icône type:search Pour quitter (2ou bien (1Le défaut
• forcevalidation {Boolean} permet la validation de force pour phone et email (défaut: true)
• camouflage {Boolean|String} masque la valeur dans l'entrée après que l'événement blur est déclenché (defaut: false) ou peut être String qui sera utilisé comme camouflage
• monospace {Boolean} permet la phonture monospaced (défaut : false)
• multiple {Boolean} permet les boîtes de contrôle si dirsource n'est pas vide
• tabindex {Number} ajoute un indice tab (defaut : 0)
• tabs {Boolean} permet des panneaux pour multilines (defaut: true)
• Édition de champ de texte de bloc readonly {Boolean} (defaut: false)
• transform {String} un lien vers le function(value, config) pour la transformation des valeurs entrées
• multiline {Boolean} ne fonctionne que avec le type radiobutton.
• separator {String|Boolean} : un séparateur pour plusieurs valeurs rendues
• realtime {Boolean} permet la connexion en temps réel (defaut: true)
• exec {String} un lien vers le function(value, element) qui sera évalué si l'entrée est affectée

Intéressant :

• type:date nécessite le composant datepicker
• type:time nécessite le composant timepicker
• dirsource:path.to.datasource nécessite le composant directory
• si licon ou ricon commence par ! alors le composant restitue une valeur brute au lieu de icon
• La classe ui-input-ok est liée lorsque l'entrée est valide et remplie
• SET('path', 'camouflage', 'show'); montre la valeur de 2000 ms

Utilisez-le avec <ui-component name="input">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.