Éléments basiques de formulaire
input text
Textareas
Select
Input file
Pour form7, il est ici nécessaire de garder toute la structure exemple et d'insérer le shortcode form7 à la place de la balise input uniquement.
Checkskin (radio and checkbox)
avec form7 dans les cas des "checkboxes" et des "radios", il est obligatoire de cocher la case "avec Wrap each item with label element".
Éléments conteneurs
Barre de recherche (search bar)
Fieldsets (contenants plusieurs éléments différents)
Javascript : fonctionnalités avancées
Systèmes d'affichage ciblé (radio)
2 ème exemple : spécifier un choix par défaut si rien n'est coché
- utiliser l'attribut "data-radio-auto-menu" sur chaque élément de commande (label.formflex-radio) et y spécifier le mot clé lié à ce choix
- mettre ce mot clé sur chaque élément qui devra être affiché quand ce choix est actif.
Le mot clé doit être mis dans un attribut "data-target".
peut importe où il se trouve sur la page et sur quel type d'élement, il sera commandé par le menu.
- il est possible qu'on élément soit commandé par plusieurs menu, juste mettre les différents mots clés dans un même "data-target" séparés par des espaces
Relatif au 2 ème exemple :
Par defaut, si les boutons radios sont tous décochés, rien ne se passera.
Mais il est possible de choisir quelle réponse aura son fonctionnement appliqué par defaut en ajoutant la class "uncheck_default" sur celui-ci.
PS: ici la class "uncheck_default" est appliquée au label contenant la réponse "non".
Systèmes d'affichage ciblé (checkbox)
- utiliser l'attribut "data-checkbox-auto-menu" sur l'élément de commande (label.checkbox) et y spécifier le mot clé unique lié à ce choix
- sur chaque item commandé par ce menu, placer un attribut "data-target" contenant l'identifiant unique suivit de "-yes" ou de "-no".
Ce dernier point décidera quel état de la checkbox fera apparaitre l'item (il est donc possible d'utiliser un fonctionnement inversé avec un affichage uniquement quand décoché).
Systèmes d'affichage ciblé (select)
- utiliser l'attribut "data-ffx-select-automenu" sur le select et y spécifier le mot clé lié à cette question (sans la terminaison)
EX: couple_marie, enfants_au_domicile, etc.
- sur chaque "< option >" de ce select, ajouter "data-key" et y spécifier la réponse à la question
EX: oui, non, 1, 2, celibataire, etc.
- mettre la combinaison du mot clé et de la réponse (séparé par un tiret) sur chaque élément qui devra être affiché quand ce choix est actif.
Le mot clé doit être mis dans un attribut "data-ffx-select-target".
peut importe où il se trouve sur la page et sur quel type d'élement, il sera commandé par le menu.
EX: enfants_au_domicile-oui, nombre_de_chambres-2, etc.
- il est possible qu'on élément soit commandé par plusieurs menu, juste mettre les différents mots clés dans un même "data-ffx-select-target" séparés par des espaces
Plugin d'ajout d'items
Exemple 1 : simple, sans tri ni ffx-name automatique
Exemple 2 : identique, avec le système de tri en plus
- commencez par identifier un groupe dupplicable en lui ajoutant l'attribut data-group, contenant un identifiant unique.
- Placez la class "dupplicate_wrapper" sur l'élement qui contiendra au commencement l'unique bouton d'ajout (l'élément principal si il n'y a qu'un item comme dans l'exemple).
- placez la class "delete" sur l'élement qui commande la suppression de la ligne
- placez la class "dupplicate" sur l'élement qui commande l'ajout de la ligne
- ajoutez l'attribut "data-manual-increment" si vous voulez que cette fonction incremente les valeurs des names duppliqués.
Dans ce cas, remplissez cet attribut avec le nombre de groupe par defaut au chargement de la page (1 ici).
"children_templates" : élément invisible injecté par js
Menu de langue
- utiliser l'attribut "data-lang-menu" sur le menu des langues et lui donner une valeur unique (ex:menu_test).
- utiliser l'attribut "data-lang" sur chaque bouton de ce menu et y mettre la langue (ex:fr,nl,etc).
- Ajouter l'attribut "data-lang-category" sur chaque element commandé par ce menu.
ex: menu_test
- Ajouter l'attribut "data-lang-target" sur chaque element commandé par ce menu.
Dans ce dernier attribut, ecrire le mot clé composé du nom du catégorie et de l'extension de langue, séparés par un tiret.
ex: menu_test-fr.
PS: il est possible d'utiliser plusieurs fois le même attribut (pas besoin de regrouper sous un même parent).
Menu de langue avec système de création
Auto-naming : cas 1
si on supprime l'attribut "data-name" des inputs, le système marche toujours mais n'ajoute pas les derniers crochets. Ca se finit donc sur le nombre incrémenté
Auto-naming : cas 2
(click to show names)
Auto-naming : cas 3
(click to show names)
Auto-naming : cas 4
(click to show names)
Messages d'alerte