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.


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?

<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:

<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:

<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:

<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.

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-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?

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.

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-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.

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="http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-fr.html">Insertion de contenu</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html">Galerie photos</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html">Dessiner des graphiques</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html">Contenu affichable/masquable</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html">Uniformisation de la hauteur</a></li>
		<li><a href="http://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:

<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.

<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:

<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:

<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

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-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:

<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 de modification :