Déroulement de champs avec des configurations de base

Comment utiliser le déroulement de champs afin de créer des interaction utilisateur à petite échèle.

Déroulement de champs
Déroulement de champs avec des configurations de base (actuelle)
Déroulement de champs avancé
Alternatives pour le déroulement de champs

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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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": "https://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": "https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html"}'>Galerie photos</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "https://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html"}'>Dessiner des graphiques</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "https://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html"}'>Contenu affichable/masquable</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html"}'>Uniformisation de la hauteur</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "https://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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
		</ul>
	</div>
</form></div>

Première option est le défaut

Trouvez le plugiciel qui répond à vos besoin:

<div class="wb-fieldflow" data-wb-fieldflow='{"defaultselectedlabel": false}'>
	<p>Trouvez le plugiciel qui répond à vos besoin:</p>
	<ul>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-fr.html">Insertion de contenu</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html">Galerie photos</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html">Dessiner des graphiques</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html">Contenu affichable/masquable</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html">Uniformisation de la hauteur</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html">Afficher un contenu superposé</a></li>
	</ul>
</div>

Étiquetage personalisé

Le déroulement de champs permet de personalisé les étiquettes de plusieurs façons.

Empêcher l'ajout automatique de l'étiquette rouge "requis"

Trouvez le plugiciel qui répond à vos besoin:

<div class="wb-fieldflow" data-wb-fieldflow='{ "noreqlabel": true }'>
	<p>Trouvez le plugiciel qui répond à vos besoin:</p>
	<ul>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-fr.html">Insertion de contenu</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html">Galerie photos</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html">Dessiner des graphiques</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html">Contenu affichable/masquable</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html">Uniformisation de la hauteur</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html">Afficher un contenu superposé</a></li>
	</ul>
</div>

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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
	</ul>
</div>

Détails de la page

Date de modification :: 2023-12-01

Sélection de la langue

Recherche

Déroulement de champs avec des configurations de base

Filtrage de contenu inséré (Ajax)

Définir l'interface utilisateur à générer

Définir l'action

Example de redirection

Example avec Ajax

Faire une action immédiatement lors de la sélection

Faire plusieurs actions

Sortie de contenu A (`id="ajaxOutA"`)

Sortie de contenu B (`id="ajaxOutB"`)

Definir le champs optionelle

Première option est le défaut

Étiquetage personalisé

Empêcher l'ajout automatique de l'étiquette rouge "requis"

Définir un étiquette

Block d'étiquette

Définir le sélecteur d'étiquette à utiliser

Personalisé l'étiquette de sélection.

Personalisation du bouton de soumission

La configuration `i18n` Déconseillé

Détails de la page

Déroulement de champs avec des configurations de base

Filtrage de contenu inséré (Ajax)

Définir l'interface utilisateur à générer

Définir l'action

Example de redirection

Example avec Ajax

Faire une action immédiatement lors de la sélection

Faire plusieurs actions

Definir le champs optionelle

Première option est le défaut

Étiquetage personalisé

Empêcher l'ajout automatique de l'étiquette rouge "requis"

Définir un étiquette

Block d'étiquette

Définir le sélecteur d'étiquette à utiliser

Personalisé l'étiquette de sélection.

Personalisation du bouton de soumission

La configuration i18n Déconseillé

Détails de la page

La configuration `i18n` Déconseillé