Cas particuliers de filtre de balise
Sur cette page:
Exemple 1 - Liste d'événements
Options de filtre
-
|
Emplacement: , Langue:
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>
- Date de modification :