Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Déroulement de champs avancé

Comment aller au-delà avec le déroulement de champs.

Requête ajax personalisé

Le contenu est insérer en utilisant le plugiciel data-ajax. Il est possible de cibler des récipent spécifique, il est possible d'utiliser différente méthode (tel que: append, prepend, after, before, replace) et de bénifier des fonctionalité de filtrage fait par le ajax fetch.

Un usage simplet c'est de définir le chemin du fichier (URL) à insérer à l'aide de l'attribut data-wb-fieldflow="Chemin/du/fichier".

Le contenu définie par l'attribut data-wb-fieldflow peut ne pas être accessible lorsque le javascript est déactivé et par les moteurs de recherche à des fins d'indexation et de référencement. Donc, il est recommendé de fournir une solution alternative duquel l'utilisateur pourra obtenir de l'information équivalente.

Utilisé l'attribut data-wb-fieldflow="Chemin/du/fichier" est la même instruction que:

Les paramètres suivante sont disponible:

type
Défini comment le contenu sera inséré. Les options disponible sont: insérer du contenu après l'élément (after), ajouter du contenu à la fin de l'élément (append), insérer le contenu avant l'élément (before), ajouter le contenu au début de l'élément (prepend), remplace le contenu de l'élément (replace). La valeur par défaut c'est "replace"
container
Un sélecteur jquery qui sera l'hôte pour l'éxécution du plugiciel data-ajax. S'il n'est pas spécifier, un conteneur vide sera créer et insérer après les controle de déroulement de champs.
clean
Un sélecteur jquery dont l'instruction jquery empty() sera exécuté.
trigger
Permet d'initier les plugiciels de la WET sur le contenu inséré.

id="ajaxPanel" Paneau a des fins d'example pratique

(Pour illustrer le comportement de la configuration container et de la configuration clean)

Choisissez du contenu à insérer:

<section id="ajaxPanel" class="panel panel-primary">
	<header class="panel-heading">
		<h3 class="panel-title"><code>id="ajaxPanel"</code> Paneau a des fins d'example pratique</h3>
	</header>
	<div class="panel-body">
		<p>(Pour illustrer le comportement de la configuration <code>container</code> et de la configuration <code>clean</code>)</p>
	</div>
</section>

<div class="wb-fieldflow">
	<p>Choisissez du contenu à insérer:</p>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">Ensemble 1</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-1.html", "live": true}'>Ensemble 1 - Effectuer immédiatement</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "live": true}'>Ensemble 3 - Effectuer immédiatement</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "live": true}'>Ensemble 4 - Effectuer immédiatement</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-2.html"}'>Ensemble 2 - Appel équivalente avec une configuration différente dans data-wb-fieldflow</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-2.html", "type": "replace"}'>Ensemble 2 - Appel équivalent avec une configuration différentes qui définie le type de requête ajax</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body"}'>Ensemble 3 - Utilise le récipient: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body"}'>Ensemble 4 - Utilise le récipient: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body", "type": "append"}'>Ensemble 4 - Ajoute le contenu au récipient: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body", "type": "prepend", "clean": "#ajaxPanel .panel-body"}'>Set 3 - Insert le contenu au début du récipent $("#ajaxPanel .panel-body") et le vide (clean) lors du changement de sélection</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-5.html"}'>Ensemble 5</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-5.html", "trigger": true}'>Ensemble 5 - avec initialisation de plugiciel</li>
	</ul>
</div>

Ajouter un control fieldflow

L'action ajout (append) nécessite la configuration source représentant un sélecteur jQuery pointant vers le block d'un élément qui peut être utilisé en tant que sous plugin. Ce sous contrôle sera inséré à la suite du contrôle initiateur de l'action. Un comportement similar peut être fait en dupliquant le contenu du sous-controle dans chacune des items de la listes, voir l'exemple subséquent.

La configuration target contient un id qui définie que cet action sera exécuté lors que l'item identifier par l'id sera sélectioné par un contrôle de déroulement de contenu.

Cette fonctionalité est utile pour évité la duplication de contenu.

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", "target": "append-ex-en", "url": "https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Insertion de contenu</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Galerie photos</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Dessiner des graphiques</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Contenu affichable/masquable</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Uniformisation de la hauteur</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Afficher un contenu superposé</li>

	</ul>
</div>

<div id="question-langue" class="hidden">
	<p>Quel langue?</p>
	<ul>
		<li id="append-ex-fr">Français</li>
		<li id="append-ex-en">Anglais</li>
	</ul>
</div>

Cela est équivale à:

Trouvez le plugiciel qui répond à vos besoin:

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

Ajout ou retirer des classes CSS

Changer la couleur du paragraphe suivant:

Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#addremoveCSSexample", "class": "text-muted text-primary text-success text-info text-warning text-danger" }
	}'>
	<p>Changer la couleur du paragraphe suivant:</p>
	<ul>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-muted" }'>Sourde</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-primary" }'>Primaire</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-success" }'>Succès</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-info" }'>Renseignement</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-warning" }'>Avertissement</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-danger" }'>Danger</li>
	</ul>
</div>

<p id="addremoveCSSexample">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>

Appliquer des actions par défaut et pour la réinitialisation

Changer la couleur du paragraphe suivant:

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#resetdefaultExample-fr", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph1-fr", "live": true }
	}'>
	<p>Changer la couleur du paragraphe suivant:</p>
	<ul>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-muted" }'>Sourde</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-primary" }'>Primaire</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-success" }'>Succès</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-info" }'>Renseignement</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-warning" }'>Avertissement</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-danger" }'>Danger</li>
	</ul>
</div>

Fichier ajax/paragraph.html

<!DOCTYPE html>
<html>
<!-- DataAjaxFragmentStart -->

<div lang="en">
	<div id="paragraph1-en">
		<p id="resetdefaultExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>

	<div id="paragraph2-en">
		<p id="definebaseExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>

	<div id="paragraph3-en">
		<p id="defineDefaultExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>
</div>

<div lang="fr">
	<div id="paragraph1-fr">
		<p id="resetdefaultExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>

	<div id="paragraph2-fr">
		<p id="definebaseExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>

	<div id="paragraph3-fr">
		<p id="defineDefaultExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>
</div>

<!-- DataAjaxFragmentEnd -->
</html>

Définir une action de base

Cet exemple applique la même action pour n'importe lequel des items sélectionné, exécute les actions défini dans "reset" lors de la réinitialisation du contrôle et chaque action hérite de l'action de base.

Changer la couleur du paragraphe suivant:

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#definebaseExample-fr", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph2-fr", "live": true },
		"base" : { "action": "addClass", "source":"#definebaseExample-fr" }
	}'>
	<p>Changer la couleur du paragraphe suivant:</p>
	<ul>
		<li data-wb-fieldflow='{ "class": "text-muted" }'>Sourde</li>
		<li data-wb-fieldflow='{ "class": "text-primary" }'>Primaire</li>
		<li data-wb-fieldflow='{ "class": "text-success" }'>Succès</li>
		<li data-wb-fieldflow='{ "class": "text-info" }'>Renseignement</li>
		<li data-wb-fieldflow='{ "class": "text-warning" }'>Avertissement</li>
		<li data-wb-fieldflow='{ "class": "text-danger" }'>Danger</li>
	</ul>
</div>

Redéfinir les comportement par défault lors d'une configuration simple

Change le comportement par défaut lors de la configuration de la liste des items.

Changer la couleur du paragraphe suivant:

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#definebaseExample-fr", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph3-fr", "live": true },
		"actionData" : { "source":"#defineDefaultExample-fr" },
		"action": "addClass",
		"prop": "class"
	}'>
	<p>Changer la couleur du paragraphe suivant:</p>
	<ul>
		<li data-wb-fieldflow="text-muted">Sourde</li>
		<li data-wb-fieldflow="text-primary">Primaire</li>
		<li data-wb-fieldflow="text-success">Succès</li>
		<li data-wb-fieldflow="text-info">Renseignement</li>
		<li data-wb-fieldflow="text-warning">Avertissement</li>
		<li data-wb-fieldflow="text-danger">Danger</li>
	</ul>
</div>

Interrogation et intégration aux formulaires

Permet de définir le nom et la value d'un champs lorsque le formulaire doit être soumis et évaluer par le serveur.

Ceci montre comment utiliser l'action query. Les configurations suivante doivent être présent également:

name
Défini le nom du contrôle à utiliser.
value
Définie la valeur du contrôle.

La configuration noForm lorsque définie pour la configuration de <div class="wb-fieldflow"></div> indique que le plugiciel ne doit pas envelopper le contrôle d'un formulaire mais à la place d'utiliser celui qui existe déjà. Dans ce mode, le bouton de soumission dois être codé manuellement. Il est aussi assumé que le formulaire est utilise le plugiciel wb-frmvld.

Quelques remarque concernant l'exemple suivant

  • Il se soumet à lui-même, donc après la soumission du formulaire, le paramètre animal sera présent dans l'URL de la page courante.
  • Tel quel, ce formulaire n'est pas utilisable si le javascript est déactivé, donc:
    • C'est pourquoi une version alternative statique a été ajouter après le formulaire.
    • Le formulaire est caché par défaut.
    • Le formulaire est affiché après l'initialistion du plugiciel car l'option de configuration unhideelm contient un sélecteur qui identifie ledit formulaire.
Version alternative permettant d'obtenir la même information que le formulaire précédent.

Chien:

Chat:

Poisson:

Serpent:

<div id="myformid" class="wb-frmvld hidden">
<form action="advanced-fr.html" class="col-md-12">

	<fieldset>
		<legend><span class="field-name">Mes animeaux favories</span></legend>
		<div class="checkbox">
			<label for="animal5"><input type="checkbox" name="animal" value="Chien" id="animal5" /> Chien</label>
		</div>
		<div class="checkbox">
			<label for="animal6"><input type="checkbox" name="animal" value="Chat" id="animal6" /> Chat</label>
		</div>
		<div class="checkbox">
			<label for="animal7"><input type="checkbox" name="animal" value="Poisson" id="animal7" /> Poisson</label>
		</div>
		<div class="checkbox">
			<label for="animal8"><input type="checkbox" name="animal" value="Serpent" id="animal8" /> Serpent</label>
		</div>
	</fieldset>


	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true, "unhideelm": "#myformid"}'>
		<p>Vous désirez plus de renseignement à propos?</p>
		<ul>
			<li>L'habitat
				<div class="wb-fieldflow-sub">
					<p>Quel type d'habitat vous vous intéresser?</p>
					<ul>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"sauvage"}'>Sauvage</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"HabRecommendé"}'>Recommendé</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"intérieur"}'>À l'intérieur</li>
						<li data-wb-fieldflow='[
							{"action": "query", "name":"moreinfo", "value":"extérieur"},
							{"action": "redir", "url": "https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html"}
						]'>à l'éxtérieur</li>
					</ul>
				</div>
			</li>
			<li>La nouriture
				<div class="wb-fieldflow-sub">
					<p>Quel type de nourriture vous vous intéresser?</p>
					<ul>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"santé"}'>Santé</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"nouRecommendé"}'>Recommandé</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"éviter"}'>à éviter</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"tendance"}'>Tendance</li>
					</ul>
				</div>
			</li>

		</ul>
	</div>


	<input class="mrgn-bttm-lg" type="submit" value="Soummetez et regardé l'URL de la page de résultat" />
</form></div>

<details id="myformidAlternate">
	<summary>Version alternative permettant d'obtenir la même informatio que le formulaire précédent.</summary>

	<p>Chien:</p>
	<ul>
		<li><a href="advanced-fr.html?animal=Chien&amp;moreinfo=sauvage">Habitation sauvage</a></li>
		<li><a href="advanced-fr.html?animal=Chien&amp;moreinfo=HabRecommendé">Habitation recommendé</a></li>
		<li><a href="advanced-fr.html?animal=Chien&amp;moreinfo=intérieur">Habitation à l'intérieur</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html?animal=Chien&amp;moreinfo=extérieur">Habitation à l'extérieur</a></li>
		<li><a href="advanced-fr.html?animal=Chien&amp;moreinfo=santé">Nouriture santé</a></li>
		<li><a href="advanced-fr.html?animal=Chien&amp;moreinfo=nouRecommendé">Nouriture recommendé</a></li>
		<li><a href="advanced-fr.html?animal=Chien&amp;moreinfo=éviter">Nouriture à éviter</a></li>
		<li><a href="advanced-fr.html?animal=Chien&amp;moreinfo=tendance">Nouriture tendance</a></li>
	</ul>
	<p>Chat:</p>
	<ul>
		<li><a href="advanced-fr.html?animal=Chat&amp;moreinfo=sauvage">Habitation sauvage</a></li>
		<li><a href="advanced-fr.html?animal=Chat&amp;moreinfo=HabRecommendé">Habitation recommendé</a></li>
		<li><a href="advanced-fr.html?animal=Chat&amp;moreinfo=intérieur">Habitation à l'intérieur</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html?animal=Chat&amp;moreinfo=extérieur">Habitation à l'extérieur</a></li>
		<li><a href="advanced-fr.html?animal=Chat&amp;moreinfo=santé">Nouriture santé</a></li>
		<li><a href="advanced-fr.html?animal=Chat&amp;moreinfo=nouRecommendé">Nouriture recommendé</a></li>
		<li><a href="advanced-fr.html?animal=Chat&amp;moreinfo=éviter">Nouriture à éviter</a></li>
		<li><a href="advanced-fr.html?animal=Chat&amp;moreinfo=tendance">Nouriture tendance</a></li>
	</ul>
	<p>Poisson:</p>
	<ul>
		<li><a href="advanced-fr.html?animal=Poisson&amp;moreinfo=sauvage">Habitation sauvage</a></li>
		<li><a href="advanced-fr.html?animal=Poisson&amp;moreinfo=HabRecommendé">Habitation recommendé</a></li>
		<li><a href="advanced-fr.html?animal=Poisson&amp;moreinfo=intérieur">Habitation à l'intérieur</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html?animal=Poisson&amp;moreinfo=extérieur">Habitation à l'extérieur</a></li>
		<li><a href="advanced-fr.html?animal=Poisson&amp;moreinfo=santé">Nouriture santé</a></li>
		<li><a href="advanced-fr.html?animal=Poisson&amp;moreinfo=nouRecommendé">Nouriture recommendé</a></li>
		<li><a href="advanced-fr.html?animal=Poisson&amp;moreinfo=éviter">Nouriture à éviter</a></li>
		<li><a href="advanced-fr.html?animal=Poisson&amp;moreinfo=tendance">Nouriture tendance</a></li>
	</ul>
	<p>Serpent:</p>
	<ul>
		<li><a href="advanced-fr.html?animal=Serpent&amp;moreinfo=sauvage">Habitation sauvage</a></li>
		<li><a href="advanced-fr.html?animal=Serpent&amp;moreinfo=HabRecommendé">Habitation recommendé</a></li>
		<li><a href="advanced-fr.html?animal=Serpent&amp;moreinfo=intérieur">Habitation à l'intérieur</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html?animal=Serpent&amp;moreinfo=extérieur">Habitation à l'extérieur</a></li>
		<li><a href="advanced-fr.html?animal=Serpent&amp;moreinfo=santé">Nouriture santé</a></li>
		<li><a href="advanced-fr.html?animal=Serpent&amp;moreinfo=nouRecommendé">Nouriture recommendé</a></li>
		<li><a href="advanced-fr.html?animal=Serpent&amp;moreinfo=éviter">Nouriture à éviter</a></li>
		<li><a href="advanced-fr.html?animal=Serpent&amp;moreinfo=tendance">Nouriture tendance</a></li>
	</ul>
</details>

Basculer

Toute les options tel que définie par le plugiciel basculer peuvent être utilisé par l'entremise du paramètre toggle lors de la configuration de l'item data-wb-fieldflow.

Ces configurations sont équivalentes:

Si aucune options n'est spécifier, le plugiciel de bascule sera configuré avec les options suivantes:

toggle: {
	stateOn: "visible",
	stateOff: "hidden"
}

Choisissez un contenu à basculer?

<div class="wb-fieldflow">
	<p>Choisissez un contenu à basculer?</p>
	<ul>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-premier"}'>Basculer le premier</li>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-second"}'>Basculer le second</li>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-premier, #basculer-second"}'>Basculer les deux</li>
	</ul>
</div>

<div id="basculer-premier" class="well hidden">
	<p>Ceci est le premier <code>@id=basculer-premier</code></p>
</div>

<div id="basculer-second" class="jumbotron hidden">
	<p>Ceci est le second <code>@id=basculer-second</code></p>
</div>

Sans bouton de soumission

Choisissez un contenu à basculer?

  • Basculer le troisième
  • Basculer le quatrième
  • Basculer les deux
<div class="wb-frmvld"><form method="get">
	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true}'>
		<p>Choisissez un contenu à basculer?</p>
		<ul>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-troisieme", "live": true}' data-wb-toggle='{"stateOn": "visible", "stateOff":"hidden"}'>Basculer le troisième</li>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-quatrieme", "live": true}'>Basculer le quatrième</li>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-troisieme, #basculer-quatrieme", "live": true}'>Basculer les deux</li>
		</ul>
	</div>

	<div id="basculer-troisieme" class="well hidden">
		<p>Ceci est le troisième <code>@id=basculer-troisieme</code></p>
	</div>

	<div id="basculer-quatrieme" class="jumbotron hidden">
		<p>Ceci est le quatrième <code>@id=basculer-quatrieme</code></p>
	</div>

</form></div>

Filtrage de tableaux

Le contenu pour l'example de filtrage de tableaux suivant a été tiré de l'exemple pratique du plugiciel des tableaux Considerant que celui n'a pas été traduit entièrement en français, c'est pour cette raison que le contenu des examples suivants sont traduit que partiellement en français.

Titre Date de publication Résumé Sujets
Biomass Program Continues to Support Transition to Renewable Energy in Manitoba 2016-07-29 12:07:00

The governments of Canada and Manitoba are supporting a greener, more sustainable economy through the $1 million Biomass Energy Support Program, Federal Agriculture Minister Lawrence MacAulay and Manitoba Agriculture Minister Ralph Eichler announced today.

For:

  • Media
  • Farmers
  • General Public
  • Agriculture
MP Rodger Cuzner to make announcement in Broad Cove 2016-07-29 12:07:00

Rodger Cuzner, Member of Parliament for Cape Breton – Canso, on behalf of the Honourable Navdeep Bains, Minister of Innovation, Science and Economic Development and Minister responsible for the Atlantic Canada Opportunities Agency, will make a funding announcement at the Broad Cove Scottish Concert..

For:

  • Media
  • Rural Community
  • Travellers
  • Visitors
  • General Public
  • Society and Culture
  • Arts
  • Music
  • Literature
An Exhibition Dedicated to the Caribou and Other Animals Like It 2016-07-29 11:07:00

The Government of Canada supports the Musée du Fjord.

For:

  • General Public
  • Arts
  • Music
  • Literature
Backgrounder: Government of Canada delivers $109 million to Alberta for community infrastructure projects 2016-07-29 11:07:00

The Government of Canada delivered the first of two federal Gas Tax Fund installments for 2016-17 to all the provinces and territories benefitting 364 municipalities in Alberta..

For:

  • Media
  • General Public
  • Transport
Government of Canada delivers $109 million to Alberta for community infrastructure projects 2016-07-29 11:07:00

Modern and up-to-date community infrastructure helps ensure that Canadians live the quality of life that they want and expect. Community infrastructure helps connect people to jobs and provides access to better community services, attracts new businesses and creates economic growth opportunities..

For:

  • Media
  • General Public
  • Transport
Minister Carr to Make an Announcement About the Winnipeg Art Gallery 2016-07-29 11:07:00

WINNIPEG – The Honourable Jim Carr, Minister of Natural Resources....

For:

  • General Public
  • Arts
  • Music
  • Literature
Post-Secondary Institutions Strategic Investment Fund Announcement at the University of Toronto 2016-07-29 10:07:00

What an honour to be at the University of Toronto-my alma mater-for this tremendous announcement..

For:

  • Business
  • General Public
  • Economics and Industry
Post-Secondary Institutions Strategic Investment Fund Announcement at the University of Toronto 2016-07-29 10:07:00

Thank you, Meric [Meric S. Gertler, President, University of Toronto]. And thank you to the University of Toronto for being such great hosts today. I'm delighted to be here with my friend and colleague Kirsty Duncan, Minister of Science..

For:

  • General Public
  • Economics and Industry
 
<div class="wb-frmvld"><form method="get">
<div class="wb-fieldflow" data-wb-fieldflow='
		{
			"srctype": "tblfilter",
			"noForm": true,
			"source": "#table-filtering-example",
			"fltrseq": [
				{"column": 2},
				{"column": 3}
			],
			"limit": 3
		}'></div>
</form></div>

<table id="table-filtering-example" class="wb-tables table table-striped table-hover">
	<thead>
		<tr>
			<th>Titre</th>
			<th>Date de publication</th>
			<th>Résumé</th>
			<th>Sujets</th>
		</tr>
	</thead>
	<tbody lang="en">
		<tr>
			<th><a href="https://news.gc.ca/web/index-en.do">Biomass Program Continues to Support Transition to Renewable Energy in Manitoba</a></th>
			<td>2016-07-29 12:07:00</td>
			<td>
				<p>The governments of Canada and Manitoba are supporting a greener, more sustainable economy through the $1 million Biomass Energy Support Program, Federal Agriculture Minister Lawrence MacAulay and Manitoba Agriculture Minister Ralph Eichler announced today.</p>
				<p>For:</p>
				<ul>
					<li>Media</li>
					<li>Farmers</li>
					<li>General Public</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>Agriculture</li>
				</ul>
			</td>
		</tr>

		[...]

	</tbody>
</table>

Filtrage avec une interface personalisé Filtrage de tableaux

Titre Date de publication Résumé Sujets
Biomass Program Continues to Support Transition to Renewable Energy in Manitoba 2016-07-29 12:07:00

The governments of Canada and Manitoba are supporting a greener, more sustainable economy through the $1 million Biomass Energy Support Program, Federal Agriculture Minister Lawrence MacAulay and Manitoba Agriculture Minister Ralph Eichler announced today.

For:

  • Media
  • Farmers
  • General Public
  • Agriculture
MP Rodger Cuzner to make announcement in Broad Cove 2016-07-29 12:07:00

Rodger Cuzner, Member of Parliament for Cape Breton – Canso, on behalf of the Honourable Navdeep Bains, Minister of Innovation, Science and Economic Development and Minister responsible for the Atlantic Canada Opportunities Agency, will make a funding announcement at the Broad Cove Scottish Concert..

For:

  • Media
  • Rural Community
  • Travellers
  • Visitors
  • General Public
  • Society and Culture
  • Arts
  • Music
  • Literature
An Exhibition Dedicated to the Caribou and Other Animals Like It 2016-07-29 11:07:00

The Government of Canada supports the Musée du Fjord.

For:

  • General Public
  • Arts
  • Music
  • Literature
Backgrounder: Government of Canada delivers $109 million to Alberta for community infrastructure projects 2016-07-29 11:07:00

The Government of Canada delivered the first of two federal Gas Tax Fund installments for 2016-17 to all the provinces and territories benefitting 364 municipalities in Alberta..

For:

  • Media
  • General Public
  • Transport
Government of Canada delivers $109 million to Alberta for community infrastructure projects 2016-07-29 11:07:00

Modern and up-to-date community infrastructure helps ensure that Canadians live the quality of life that they want and expect. Community infrastructure helps connect people to jobs and provides access to better community services, attracts new businesses and creates economic growth opportunities..

For:

  • Media
  • General Public
  • Transport
Minister Carr to Make an Announcement About the Winnipeg Art Gallery 2016-07-29 11:07:00

WINNIPEG – The Honourable Jim Carr, Minister of Natural Resources....

For:

  • General Public
  • Arts
  • Music
  • Literature
Post-Secondary Institutions Strategic Investment Fund Announcement at the University of Toronto 2016-07-29 10:07:00

What an honour to be at the University of Toronto-my alma mater-for this tremendous announcement..

For:

  • Business
  • General Public
  • Economics and Industry
Post-Secondary Institutions Strategic Investment Fund Announcement at the University of Toronto 2016-07-29 10:07:00

Thank you, Meric [Meric S. Gertler, President, University of Toronto]. And thank you to the University of Toronto for being such great hosts today. I'm delighted to be here with my friend and colleague Kirsty Duncan, Minister of Science..

For:

  • General Public
  • Economics and Industry
 
<div id="table-filtering-example2-form" class="wb-frmvld hidden">
	<form>
		<div class="wb-fieldflow" data-wb-fieldflow='{ "noForm": true, "isoptional": true, "unhideelm": "#table-filtering-example2-form" }'>
			<p>Filter par sujet:</p>
			<ul>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Agriculture"
				}'>Agriculture</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Society"
				}'>Society and Culture</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "table#-filtering-example2",
					"column": 3,
					"value": "Arts"
				}'>Arts</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Music"
				}'>Music</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Literature"
				}'>Literature</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Transport"
				}'>Transport</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Economics"
				}'>Economics and Industry</li>
			</ul>
		</div>
		<div class="wb-fieldflow" data-wb-fieldflow='{ "noForm": true, "isoptional": true }'>
			<p>Filter par audience:</p>
			<ul>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Business"
				}'>Business</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Farmers"
				}'>Farmers</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Public"
				}'>General Public</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Media"
				}'>Media</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2
					"value": "Rural"
				}'>Rural Community</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Travellers"
				}'>Travellers</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Visitors"
				}'>Visitors</li>
			</ul>
		</div>
	</form>
</div>

<table id="table-filtering-example2" class="wb-tables table table-striped table-hover">
	<thead>
		<tr>
			<th>Titre</th>
			<th>Date de publication</th>
			<th>Résumé</th>
			<th>Sujets</th>
		</tr>
	</thead>
	<tbody lang="en">
		<tr>
			<th><a href="https://news.gc.ca/web/index-en.do">Biomass Program Continues to Support Transition to Renewable Energy in Manitoba</a></th>
			<td>2016-07-29 12:07:00</td>
			<td>
				<p>The governments of Canada and Manitoba are supporting a greener, more sustainable economy through the $1 million Biomass Energy Support Program, Federal Agriculture Minister Lawrence MacAulay and Manitoba Agriculture Minister Ralph Eichler announced today.</p>
				<p>For:</p>
				<ul>
					<li>Media</li>
					<li>Farmers</li>
					<li>General Public</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>Agriculture</li>
				</ul>
			</td>
		</tr>

		[...]

	</tbody>
</table>

Un autre example de filtrage de tableau

Options de filtrage

Titre Date de publication Département Type de nouvelle Résumé Endroit Pour Sujets Ministère 
<div class="row">
	<div class="col-md-3">
		<section>
			<h4 class="wb-inv">Options de filtrage</h4>
			<div class="wb-frmvld"><form>
					<div class="wb-fieldflow" data-wb-fieldflow='
							{
								"srctype": "tblfilter",
								"noForm": true,
								"source": "#dataset-filter",
								"fltrseq": [
									{"column": 3, "csvextract": true, "defaultselectedlabel": "Toutes les type de nouvelle", "label":"Type de nouvelle"},
									{"column": 2, "csvextract": true, "defaultselectedlabel": "De tous les département", "label":"Département"},
									{"column": 8, "csvextract": true, "defaultselectedlabel": "Relative à tous les ministère", "label":"Ministère"},
									{"column": 6, "csvextract": true, "defaultselectedlabel": "Tous le mondes", "label":"Pour"},
									{"column": 5, "csvextract": true, "defaultselectedlabel": "Partout", "label":"Endroit"}
								]
							}'></div>
			</form></div>
		</section>
	</div>
	<div class="col-md-9">
		<table class="wb-tables table table-striped table-hover" id="dataset-filter" aria-live="polite" data-wb-tables='{
					"bDeferRender": true,
					"ajaxSource": "https://wet-boew.github.io/wet-boew/demos/tables/ajax/datasource.json",
					"order": [5, "desc"],
					"columns": [
						{ "data": "TITLE", "className": "nws-tbl-ttl h4" },
						{ "data": "PUBDATE", "className": "nws-tbl-date" },
						{ "data": "DEPT", "className": "nws-tbl-dept" },
						{ "data": "TYPE", "className": "nws-tbl-type" },
						{ "data": "TEASER",  "className": "nws-tbl-desc" },
						{ "data": "LOCATION",  "visible": false },
						{ "data": "AUDIENCE",  "visible": false },
						{ "data": "SUBJECT", "visible": false },
						{ "data": "MINISTER", "visible": false }
					]}'>
			<thead>
				<tr>
					<th>Titre</th>
					<th>Date de publication</th>
					<th>Département</th>
					<th>Type de nouvelle</th>
					<th>Résumé</th>
					<th>Endroit</th>
					<th>Pour</th>
					<th>Sujets</th>
					<th>Ministère</th>
				</tr>
			</thead>
		</table>
	</div>
</div>

Détails de la page

Date de modification :