Déroulement de champs, configuration
Comment utiliser le déroulement de champs afin de créer des interaction utilisateur à petit échèle.
- Filtrage de contenu inséré (Ajax)
- Définir l'interface utilisateur à générer
- Définir l'action
- Faire une action immédiatement lors de la sélection
- Faire plusieurs actions
- Definir le champs optionelle
- Étiquetage personalisé
Filtrage de contenu inséré (Ajax)
Cette fonctionalité dépend du plugiciels data ajax.
Cet example télécharge ce fichier: ../ajax/filtering-hash.html
Choisissez du contenu à insérer?
- Section 1 (hash)
- Section 2 (hash)
- Section 3 (hash)
- Section 4 (hash)
- Section 5 (hash)
- ul (sélecteur)
- .filter-selector (sélecteur)
- Multi hash [.section1,.section2,.section3] (sélecteur)
<p>Cet example télécharge ce fichier: <a href="ajax/filtering-hash.html">../ajax/filtering-hash.html</a></p>
<div class="wb-fieldflow">
<p>Choisissez du contenu à insérer?</p>
<ul>
<li data-wb-fieldflow="ajax/filtering-hash.html#part1">Section 1 (hash)</li>
<li data-wb-fieldflow="ajax/filtering-hash.html#part2">Section 2 (hash)</li>
<li data-wb-fieldflow="ajax/filtering-hash.html#part3">Section 3 (hash)</li>
<li data-wb-fieldflow="ajax/filtering-hash.html#part4">Section 4 (hash)</li>
<li data-wb-fieldflow="ajax/filtering-hash.html#part5">Section 5 (hash)</li>
<li data-wb-fieldflow="ajax/filtering-hash.html ul">ul (sélecteur)</li>
<li data-wb-fieldflow="ajax/filtering-hash.html .filter-selector">.filter-selector (sélecteur)</li>
<li data-wb-fieldflow="ajax/filtering-hash.html .section1,.section2,.section3">Multi hash [.section1,.section2,.section3] (sélecteur)</li>
</ul>
</div>
Définir l'interface utilisateur à générer
select
- Valeur par défault, selection d'un item parmis d'une liste de choix (Les élements
select
,option
,optgroup
). checkbox
- Liste de boîte à cocher (Élément
input[type=checkbox]
). radio
- Liste de bouton radio (Élément
input[type=radio]
).
Lorsque l'interface utilisateur à générer est soit une liste de boîte à cocher ou une liste de bouton radio, vous pouvez utiliser la configuration inline
avec une valeur vrai (true) ce qui permetera d'indiquer de créer une interface linéraire.
Notez: L'utilisation d'une interface qui permet plusieurs choix est comme l'execution de plusieurs action en simultané.
Choisissez du contenu à insérer:
- (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
- (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
- (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
- (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
- (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"checkbox"}'>
<p>Choisissez du contenu à insérer:</p>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
Définir l'action
Liste des actions pré-définie.
redir
- Effectue une redirection
ajax
- Insert du contenu dans la page (Ajax)
query
- Définie une valeur et un nom de champs l'élément du formulaire. Ceci peut-être utile lorsqu'il est utilisé avec d'autre controle de déroulement de champs.
append
- Ajoute un second champ, comme un autre controle de déroulement de champs.
addClass
- Ajoute une classe CSS à un éléments spécifier
removeClass
- Enlève une classe CSS à un éléments spécifier
toggle
- Bascule des éléments entre les états activé et désactivé.
tblfilter
- Applique un filter à un tableau de donnée (
wb-tables
).
Example de redirection
Trouvez le plugiciel qui répond à vos besoin:
- Insertion de contenu
- Galerie photos
- Dessiner des graphiques
- Contenu affichable/masquable
- Uniformisation de la hauteur
- Afficher un contenu superposé
<div class="wb-fieldflow">
<p>Trouvez le plugiciel qui répond à vos besoin:</p>
<ul>
<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-fr.html"}'>Insertion de contenu</li>
<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html"}'>Galerie photos</li>
<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html"}'>Dessiner des graphiques</li>
<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html"}'>Contenu affichable/masquable</li>
<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html"}'>Uniformisation de la hauteur</li>
<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html"}'>Afficher un contenu superposé</li>
</ul>
</div>
Example avec Ajax
Choisissez du contenu à insérer:
- (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
- (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
- (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
- (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
- (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow">
<p>Choisissez du contenu à insérer:</p>
<ul>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-1.html"}'>(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-2.html"}'>(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-3.html"}'>(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-4.html"}'>(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-5.html"}'>(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
Faire une action immédiatement lors de la sélection
En premier vous devez déactiver la création automatique du formulaire conteneur et de créer cet environnement manuellement. Par la suite vous pouvez utilisé l'option "live":true
pour les éléments qui doit être executé lors de la sélection.
<div class="wb-frmvld"><form>
<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true}'>
<p>Choisissez du contenu à insérer:</p>
<ul>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-1.html", "live":true}'>(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-2.html", "live":true}'>(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-3.html", "live":true}'>(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-4.html", "live":true}'>(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-5.html", "live":true}'>(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
</form></div>
Faire plusieurs actions
Multiple action can be set by providing an JSON array for the item configuration. Althrough the plugin will not check for potential incompatibility between any action being set. It's the responsability of the interaction designer too choose wisely compatible action. Like making a redirection within an ajax are incompatible action.
In the following example it use the option container
to specify where to insert the content, where it doen't clean automatically and his value is an valid jquery selector.
Choisissez du contenu à insérer?
- Ensemble 1 [A] - Section 1 [B]
- Ensemble 2 [A] - Section 2 [B]
- Ensemble 3 [A] - Section 3 [B]
- Ensemble 4 [A] - Section 4 [B]
- Ensemble 5 [A] - Section 5 [B]
Sortie de contenu A (id="ajaxOutA"
)
Sortie de contenu B (id="ajaxOutB"
)
<div class="wb-fieldflow">
<p>Choisissez du contenu à insérer?</p>
<ul>
<li data-wb-fieldflow='[
{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-1.html"},
{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part1"}
]'>Ensemble 1 [A] - Section 1 [B]</li>
<li data-wb-fieldflow='[
{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-2.html"},
{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part2"}
]'>Ensemble 2 [A] - Section 2 [B]</li>
<li data-wb-fieldflow='[
{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-3.html"},
{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part3"}
]'>Ensemble 3 [A] - Section 3 [B]</li>
<li data-wb-fieldflow='[
{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-4.html"},
{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part4"}
]'>Ensemble 4 [A] - Section 4 [B]</li>
<li data-wb-fieldflow='[
{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-5.html"},
{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part5"}
]'>Ensemble 5 [A] - Section 5 [B]</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<section class="panel panel-default">
<header class="panel-heading">
<h5 class="panel-title">Sortie de contenu A (<code>id="ajaxOutA"</code>)</h5>
</header>
<div id="ajaxOutA" class="panel-body">
</div>
</section>
</div>
<div class="col-md-6">
<section class="panel panel-default">
<header class="panel-heading">
<h5 class="panel-title">Sortie de contenu B (<code>id="ajaxOutB"</code>)</h5>
</header>
<div id="ajaxOutB" class="panel-body">
</div>
</section>
</div>
</div>
Definir le champs optionelle
Par défaut, tous les champs du déroulement de champs sont requis et sont validé par le plugiciel du validateur de formulaire, à l'exception de l'action pour le filtrage de tableau. Lorsque nécessaire, comme lorsque vous voulez faire une action à la volé, it peut être intéressant que le champ soit marqué optionelle.
<div class="wb-frmvld"><form method="get">
<div class="wb-fieldflow" data-wb-fieldflow='{ "noForm": true, "base": { "live": true }, "isoptional": true }'>
<p>Choisissez du contenu à insérer:</p>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
</form></div>
Étiquetage personalisé
Le déroulement de champs permet de personalisé les étiquettes de plusieurs façons.
Définir un étiquette
Par défaut tous le contenu du premier éléments, habituellement un paragraph, est utilisé. Par contre, vous pouvez spécifier le texte à utiliser en enveloppant une partie du contenu avec <span class="wb-fieldflow-label">...</span>
. Cela devrait vous permetre d'adopter une approche simpliste pour l'améliorartion progressive de votre contenu.
Choisissez du contenu à insérer:
- (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
- (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
- (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
- (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
- (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow">
<p><span class="wb-fieldflow-label">Choisissez du contenu</span> à insérer:</p>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
Block d'étiquette
Il est possible de spécifier du contenu qui sera inséré avant et après l'étiquette. Ceci permet, lors de la conception, d'ajouter des précision à l'utilisateur lorsqu'il utilise le contrôle. Pour ce faire, le premier élément enfant doit avoir la classe wb-fieldflow-header
. S'il n'y a pas de sous-éléments avec la classe wb-fieldflow-label
, le premier paragraph sera utilisé en tant qu'étiquette.
Du texte avant l'étiquette.
L'étiquette
Du texte après l'étiquette.
- (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
- (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
- (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
- (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
- (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow">
<div class="wb-fieldflow-header">
<p>Du texte avant l'étiquette.</p>
<p class="wb-fieldflow-label">L'étiquette</p>
<p>Du texte après l'étiquette.</p>
</div>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
Définir le sélecteur d'étiquette à utiliser
Il est possible redéfinir le sélecteur d'étiquette par défaut en utilisant l'option lblselector
.
Choisissez du contenu à insérer: Mon étiquette caché.
- (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
- (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
- (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
- (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
- (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow" data-wb-fieldflow='{"lblselector":"#myHiddenLabel"}'>
<p>Choisissez du contenu à insérer: <span id="myHiddenLabel" class="hidden">Mon étiquette caché.</span></p>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
Personalisé l'étiquette de sélection.
Il est possible de définir l'étiquette de sélection par l'option defaultselectedlabel
.
Choisissez du contenu à insérer:
- (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
- (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
- (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
- (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
- (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow" data-wb-fieldflow='{"defaultselectedlabel":"Je suis une étiquette écrassante"}'>
<p>Choisissez du contenu à insérer:</p>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
Personalisation du bouton de soumission
La meilleur façon de personaliser le bouton de soumission c'est en le codant à même le formulaire et d'indiqué au contrôle de déroulement de champ de ne pas créer l'enveloppe de formulaire, option "noForm": true
<div class="wb-frmvld"><form>
<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true}'>
<p>Choisissez du contenu à insérer:</p>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
<input class="btn btn-default btn-lg mrgn-bttm-md" type="submit" value="Mon bouton soumettre personalisé" />
</form></div>
La configuration i18n
Déconseillé
Déconseillé: Cette option est un mécanisme de contournement jusqu'à le texte soit traduit dans toutes les langues supporté par la boîte à outils d'expérience web. Ceci est fourni à titre informative seulement et il est possible que ces réglage créer une interférance avec les autres composant de déroulement de champs dans la page. Il est planifier de retirer cette options lorsque l'intégration du texte traduit soit complété.
i18n
:
btn
- Texte du bouton soumettre
- Français: "Allez" (valeur par défaut)
- Anglais: "Continue" (valeur par défaut)
defaultsel
- Texte de l'option par défaut dans une liste de choix
- Français: "Sélectionnez dans la liste..." (valeur par défaut)
- Anglais: "Make your selection..." (valeur par défaut)
required
- Texte pour l'étiquette de champs requis
- Français: "obligatoire" (valeur par défaut)
- Anglais: "required" (valeur par défaut)
Définir ces options peux avoir une influence sur les autres contrôle de déroulement de champs.
Choisissez du contenu à insérer:
- (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
- (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
- (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
- (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
- (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow" data-wb-fieldflow='{
"i18n": {
"btn": "Faites ce qui est demandé",
"defaultsel": "Humm, choisez une options que vous aimer",
"required": "Vous devez absolument choisir quelques chose"
}
}'>
<p>Choisissez du contenu à insérer:</p>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>
- Date modified: