Recherche


Cas particuliers de filtre de balise

Sur cette page:

Exemple 1 - Liste d'événements

Options de filtre

Langue
Emplacement

Aucun item ne correspond à cette combinaison de filtres.

Code source
<section id="filteredEventsList" class="wb-tagfilter wb-paginate provisional" data-wb-paginate='{
	"itemsPerPage": 5,
	"section": ".events-list",
	"selector": "li",
	"uiTarget": "#filteredEventsListPagination"
}'>
	<h2>Exemple 1 - Liste d'événements</h2>
	<div class="row">
		<div class="col-xs-12 col-sm-4 col-lg-3">
			<details open>
				<summary>
					<h3>Options de filtre</h3>
				</summary>
				<div class="form-group mrgn-bttm-0">
					<fieldset>
						<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="langue" class="wb-tagfilter-ctrl" value="" checked> Toutes
								</label>
							</li>
							<li class="radio">
								<label>
									<input type="radio" name="langue" class="wb-tagfilter-ctrl" value="language__french"> Français
								</label>
							</li>
							<li class="radio">
								<label>
									<input type="radio" name="langue" class="wb-tagfilter-ctrl" value="language__english"> Anglais
								</label>
							</li>
						</ul>
					</fieldset>
				</div>
				<div class="form-group mrgn-bttm-0">
					<fieldset>
						<legend class="h5 mrgn-tp-0"><span class="field-name">Emplacement</span></legend>
						<ul class="list-unstyled">
							<li class="checkbox">
								<label for="location__montreal">
									<input type="checkbox" name="location" id="location__montreal" class="wb-tagfilter-ctrl" value="location__montreal"> Montréal
								</label>
							</li>
							<li class="checkbox">
								<label for="location__online">
									<input type="checkbox" name="location" id="location__online" class="wb-tagfilter-ctrl" value="location__online"> En ligne
								</label>
							</li>
							<li class="checkbox">
								<label for="location__ottawa">
									<input type="checkbox" name="location" id="location__ottawa" class="wb-tagfilter-ctrl" value="location__ottawa"> Ottawa
								</label>
							</li>
							<li class="checkbox">
								<label for="location__toronto">
									<input type="checkbox" name="location" id="location__toronto" class="wb-tagfilter-ctrl" value="location__toronto"> Toronto
								</label>
							</li>
							<li class="checkbox">
								<label for="location__vancouver">
									<input type="checkbox" name="location" id="location__vancouver" class="wb-tagfilter-ctrl" value="location__vancouver"> Vancouver
								</label>
							</li>
						</ul>
					</fieldset>
				</div>
				<div class="form-group mrgn-bttm-0">
					<label for="jourListe">Jour de la semaine</label>
					<select id="jourListe" name="jour" class="form-control full-width wb-tagfilter-ctrl">
						<option value="">Tous</option>
						<option value="dayOTW_monday">Lundi</option>
						<option value="dayOTW_tuesday">Mardi</option>
						<option value="dayOTW_wednesday">Mercredi</option>
						<option value="dayOTW_thursday">Jeudi</option>
						<option value="dayOTW_friday">Vendredi</option>
						<option value="dayOTW_saturday">Samedi</option>
						<option value="dayOTW_sunday">Dimanche</option>
					</select>
				</div>
			</details>
		</div>
		<div class="col-xs-12 col-sm-8 col-lg-9">
			<ul class="list-unstyled events-list wb-tagfilter-items" data-wb-json='{
				"url": "data_fr.json#/events",
				"mapping": [
					{ "selector": "li", "attr": "data-wb-tags", "value": "/tags" },
					{ "selector": "h3", "value": "/title" },
					{ "selector": ".event-date", "value": "/date" },
					{ "selector": ".event-time", "value": "/time" },
					{ "selector": ".event-location", "value": "/location" },
					{ "selector": ".event-language", "value": "/language" }
				]
			}'>
				<template>
					<li data-wb-tags="">
						<h3></h3>
						<p><span class="event-date"></span> | <span class="event-time"></span></p>
						<p><strong>Emplacement:</strong> <span class="event-location"></span>, <strong>Langue</strong>: <span class="event-language"></span></p>
					</li>
				</template>
			</ul>
			<div class="wb-tagfilter-noresult">
				<p>Aucun item ne correspond à cette combinaison de filtres.</p>
			</div>
			<div id="filteredEventsListPagination"></div>
		</div>
	</div>
</section>

Détails de la page

Date de modification :