Sélection de la langue

English en

/ Government of Canada

Recherche

Correspondance d'URL - Sélectionner un champ de saisie

Sélectionnez des champs de saisie par défaut selon la correspondance des paramètres de l'URL.

Exemple avec `source`

Source code

<div data-wb-urlmapping='{
	"f=b": {
		"action": "selectInput",
		"source": "#fruitsOptions",
		"value": "Bananes"
	}
}'></div>

<form id="fruitsOptions">
	<label for="fruitsSelect">Sélectionner un fruit (<code><select></code>)</label>
	<select name="fruitsSelect" id="fruitsSelect" class="form-control mrgn-bttm-lg">
		<option value="all">Tous</option>
		<option value="Bananes">Bananes</option>
		<option value="Oranges">Oranges</option>
		<option value="Pommes">Pommes</option>
	</select>

	<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg">
		<legend>Choisissez un fruit (<code><input type="checkbox"></code>)</legend>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="BananesCheckbox" value="Bananes"><label for="BananesCheckbox">Bananes</label>
		</div>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="OrangesCheckbox" value="Oranges"><label for="OrangesCheckbox">Oranges</label>
		</div>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="PommesCheckbox" value="Pommes"><label for="PommesCheckbox">Pommes</label>
		</div>
	</fieldset>

	<fieldset class="gc-chckbxrdio form-inline">
		<legend>Choisissez un fruit (<code><input type="radio"></code>)</legend>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="BananesRadio" value="Bananes"><label for="BananesRadio">Bananes</label>
		</div>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="OrangesRadio" value="Oranges"><label for="OrangesRadio">Oranges</label>
		</div>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="PommesRadio" value="Pommes"><label for="PommesRadio">Pommes</label>
		</div>
	</fieldset>
</form>

Exemple sans `source`

Sélectionnez un fruit (<select>)

Choisissez un fruit (<input type="checkbox">)

Bananes

Oranges

Raisins

Choisissez un fruit (<input type="radio">)

Bananes

Oranges

Raisins

Source code

<label for="fruitsSelect2">Sélectionnez un fruit (<code><select></code>)</label>
<select id="fruitsSelect2" class="form-control" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Raisins"
	}
}'>
	<option value="Tous">Tous</option>
	<option value="Oranges">Oranges</option>
	<option value="Pommes">Pommes</option>
	<option value="Raisins">Raisins</option>
</select>

<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Raisins"
	}
}'>
	<legend>Choisissez un fruit (<code><input type="checkbox"></code>)</legend>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="BananesCheckbox2" value="Bananes"><label for="BananesCheckbox2">Bananes</label>
	</div>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="OrangesCheckbox2" value="Oranges"><label for="OrangesCheckbox2">Oranges</label>
	</div>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="RaisinsCheckbox2" value="Raisins"><label for="RaisinsCheckbox2">Raisins</label>
	</div>
</fieldset>

<fieldset class="gc-chckbxrdio form-inline" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Raisins"
	}
}'>
	<legend>Choisissez un fruit (<code><input type="radio"></code>)</legend>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="BananesRadio2" value="Bananes"><label for="BananesRadio2">Bananes</label>
	</div>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="OrangesRadio2" value="Oranges"><label for="OrangesRadio2">Oranges</label>
	</div>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="RaisinsRadio2" value="Raisins"><label for="RaisinsRadio2">Raisins</label>
	</div>
</fieldset>

Exemple avec le composant de filtres de balise

Ajoutez le paramètre suivant dans l’URL :

lng=fr pour le français
lng=eng pour l’anglais
loc=mtl pour Montréal
loc=otw pour Ottawa
loc=tor pour Toronto

résultats sur

Recherche

Options de filtrage

Langue

Toutes
Français
Anglais

Lieu de l’événement

Montréal
Ottawa
Toronto

Posez vos questions au PAC !

Lieu : Montréal, Langue : Anglais, Français
Soumissionner sur les possibilités

Lieu : Vancouver, Langue : Anglais
Faire affaire avec le gouvernement du Canada (Webinaire)

Lieu : Ottawa, Langue : Anglais
Posez vos questions au PAC !

Lieu : Toronto, Langue : Anglais
Soumissionner sur les possibilités (Webinaire)

Lieu : Ottawa, Langue : Anglais

Aucun élément ne correspond à cette combinaison de filtres.

Source code

<section id="filteredEventsList3" class="wb-filter wb-tagfilter wb-paginate provisional" data-wb-filter='{
	"selector": "li",
	"section": ".events-list3",
	"uiTemplate": "#searchFilter3"
}' data-wb-paginate='{
	"itemsPerPage": 5,
	"section": ".events-list3",
	"selector": "li",
	"uiTarget": "#filteredEventsListPagination3"
}'>
	<h2>Exemple avec le composant de filtre de balise</h2>
	<p>Ajoutez le paramètre suivant dans l’URL :</p>
	<ul>
		<li><code>lng=fr</code> pour le français ou </li>
		<li><code>lng=eng</code> pour l’anglais </li>
		<li><code>loc=mtl</code> pour Montréal</li>
		<li><code>loc=otw</code> pour Ottawa</li>
		<li><code>loc=tor</code> pour Toronto</li>
	</ul>
	<div id="searchFilter3" class="row mrgn-tp-lg">
		<div class="col-xs-12">
			<p class="h3 wb-fltr-info mrgn-tp-0"><span data-nbitem></span> résultats sur <span data-total></span></p>
			<div class="form-group">
				<label for="customSearchUI">Recherche</label>
				<input type="search" class="form-control full-width" id="customSearchUI">
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12 col-sm-4 col-lg-3">

			<details open>
				<summary>
					<h3>Options de filtrage</h3>
				</summary>

				<div class="form-group mrgn-bttm-0">
					<fieldset data-wb-urlmapping='{
							"lng=fr": {
								"action": "selectInput",
								"value": "lng__french"
								},
							"lng=eng": {
								"action": "selectInput",
								"value": "lng__english"
							} }'>
						<legend class="h5 mrgn-tp-0"><span class="field-name">Langue</span></legend>
						<ul class="list-unstyled">
							<li class="radio">
								<label>
									<input type="radio" name="lng" class="wb-tagfilter-ctrl" value="" checked> Toutes
								</label>
							</li>
							<li class="radio">
								<label>
									<input type="radio" name="lng" class="wb-tagfilter-ctrl" value="lng__french"> Français
								</label>
							</li>
							<li class="radio">
								<label>
									<input type="radio" name="lng" class="wb-tagfilter-ctrl" value="lng__english"> Anglais
								</label>
							</li>
						</ul>
					</fieldset>
				</div>

				<div class="form-group mrgn-bttm-0">
					<fieldset data-wb-urlmapping='{
							"loc=mtl": {
								"action": "selectInput",
								"value": "location__montreal"
								},
							"loc=otw": {
								"action": "selectInput",
								"value": "location__ottawa"
							},
							"loc=tor": {
								"action": "selectInput",
								"value": "location__toronto"
							}}'>
						<legend class="h5 mrgn-tp-0"><span class="field-name">Lieu de l’événement</span></legend>
						<ul class="list-unstyled">
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location3" class="wb-tagfilter-ctrl" value="location__montreal"> Montréal
								</label>
							</li>
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location3" class="wb-tagfilter-ctrl" value="location__ottawa"> Ottawa
								</label>
							</li>
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location3" class="wb-tagfilter-ctrl" value="location__toronto"> Toronto
								</label>
							</li>
						</ul>
					</fieldset>
				</div>
			</details>
		</div>

		<div class="col-xs-12 col-sm-8 col-lg-9">
			<ul class="list-unstyled events-list3 wb-tagfilter-items">
				<li data-wb-tags="lng__english lng__french location__montreal">
					<h3>Posez vos questions au PAC !</h3>
					<p><strong>Lieu :</strong> <span class="event-location">Montréal</span>, <strong>Langue :</strong> <span class="event-language">Anglais, Français</span></p>
				</li>

				<li data-wb-tags="lng__english location__vancouver">
					<h3>Soumissionner sur les possibilités</h3>
					<p><strong>Lieu :</strong> <span class="event-location">Vancouver</span>, <strong>Langue :</strong> <span class="event-language">Anglais</span></p>
				</li>

				<li data-wb-tags="lng__english location__ottawa">
					<h3>Faire affaire avec le gouvernement du Canada (Webinaire)</h3>
					<p><strong>Lieu :</strong> <span class="event-location">Ottawa</span>, <strong>Langue :</strong> <span class="event-language">Anglais</span></p>
				</li>

				<li data-wb-tags="lng__english location__toronto">
					<h3>Posez vos questions au PAC !</h3>
					<p><strong>Lieu :</strong> <span class="event-location">Toronto</span>, <strong>Langue :</strong> <span class="event-language">Anglais</span></p>
				</li>

				<li data-wb-tags="lng__english location__ottawa">
					<h3>Soumissionner sur les possibilités (Webinaire)</h3>
					<p><strong>Lieu :</strong> <span class="event-location">Ottawa</span>, <strong>Langue :</strong> <span class="event-language">Anglais</span></p>
				</li>
			</ul>

			<div class="wb-tagfilter-noresult">
				<p>Aucun élément ne correspond à cette combinaison de filtres.</p>
			</div>

			<div id="filteredEventsListPagination3"></div>
		</div>
	</div>
</section>

Détails de la page

Date de modification :: 2023-10-24