results out of
+<section id="filteredEventsList" class="wb-tagfilter wb-paginate provisional" data-wb-paginate='{
+ <section id="filteredEventsList" class="wb-filter wb-tagfilter wb-paginate provisional" data-wb-filter='{
+ "selector": "li",
+ "section": ".events-list",
+ "uiTemplate": "#searchFilter"
+}' data-wb-paginate='{
"itemsPerPage": 5,
"section": ".events-list",
"selector": "li",
"uiTarget": "#filteredEventsListPagination"
-}'>
- <h2>Example 1 - Events list</h2>
- <div class="row">
- <div class="col-xs-12 col-sm-4 col-lg-3">
- <details open>
- <summary>
- <h3>Filter options</h3>
- </summary>
- <div class="form-group mrgn-bttm-0">
- <fieldset>
- <legend class="h5 mrgn-tp-0"><span class="field-name">Language</span></legend>
- <ul class="list-unstyled">
- <li class="radio">
- <label>
- <input type="radio" name="language" class="wb-tagfilter-ctrl" value="" checked> All
- </label>
- </li>
- <li class="radio">
- <label>
- <input type="radio" name="language" class="wb-tagfilter-ctrl" value="language__french"> French
- </label>
- </li>
- <li class="radio">
- <label>
- <input type="radio" name="language" class="wb-tagfilter-ctrl" value="language__english"> English
- </label>
- </li>
- </ul>
- </fieldset>
- </div>
- <div class="form-group mrgn-bttm-0">
- <fieldset>
- <legend class="h5 mrgn-tp-0"><span class="field-name">Event location</span></legend>
- <ul class="list-unstyled">
- <li class="checkbox">
- <label>
- <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__montreal"> Montreal
- </label>
- </li>
- <li class="checkbox">
- <label>
- <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__online"> Online
- </label>
- </li>
- <li class="checkbox">
- <label>
- <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__ottawa"> Ottawa
- </label>
- </li>
- <li class="checkbox">
- <label>
- <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__toronto"> Toronto
- </label>
- </li>
- <li class="checkbox">
- <label>
- <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__vancouver"> Vancouver
- </label>
- </li>
- </ul>
- </fieldset>
- </div>
- <div class="form-group mrgn-bttm-0">
- <label for="dayList">Day of the week</label>
- <select id="dayList" name="dayOTW" class="form-control full-width wb-tagfilter-ctrl">
- <option value="">All</option>
- <option value="dayOTW_monday">Monday</option>
- <option value="dayOTW_tuesday">Tuesday</option>
- <option value="dayOTW_wednesday">Wednedsday</option>
- <option value="dayOTW_thursday">Thursday</option>
- <option value="dayOTW_friday">Friday</option>
- <option value="dayOTW_saturday">Saturday</option>
- <option value="dayOTW_sunday">Sunday</option>
- </select>
- </div>
- </details>
- </div>
- <div class="col-xs-12 col-sm-8 col-lg-9">
+}'>
+ <h2>Example 1 - Events list with text filter, pagination and data-json</h2>
+ <div id="searchFilter" class="row mrgn-tp-lg">
+ <div class="col-xs-12">
+ <p class="h3 wb-fltr-info mrgn-tp-0"><span data-nbitem></span> results out of <span data-total></span></p>
+ <div class="form-group">
+ <label for="customSearchUI">Search</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>Filter options</h3>
+ </summary>
+ <div class="form-group mrgn-bttm-0">
+ <fieldset>
+ <legend class="h5 mrgn-tp-0"><span class="field-name">Language</span></legend>
+ <ul class="list-unstyled">
+ <li class="radio">
+ <label>
+ <input type="radio" name="language" class="wb-tagfilter-ctrl" value="" checked> All
+ </label>
+ </li>
+ <li class="radio">
+ <label>
+ <input type="radio" name="language" class="wb-tagfilter-ctrl" value="language__french"> French
+ </label>
+ </li>
+ <li class="radio">
+ <label>
+ <input type="radio" name="language" class="wb-tagfilter-ctrl" value="language__english"> English
+ </label>
+ </li>
+ </ul>
+ </fieldset>
+ </div>
+ <div class="form-group mrgn-bttm-0">
+ <fieldset>
+ <legend class="h5 mrgn-tp-0"><span class="field-name">Event location</span></legend>
+ <ul class="list-unstyled">
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__montreal"> Montreal
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__online"> Online
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__ottawa"> Ottawa
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__toronto"> Toronto
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__vancouver"> Vancouver
+ </label>
+ </li>
+ </ul>
+ </fieldset>
+ </div>
+ <div class="form-group mrgn-bttm-0">
+ <label for="dayList">Day of the week</label>
+ <select id="dayList" name="dayOTW" class="form-control full-width wb-tagfilter-ctrl">
+ <option value="">All</option>
+ <option value="dayOTW_monday">Monday</option>
+ <option value="dayOTW_tuesday">Tuesday</option>
+ <option value="dayOTW_wednesday">Wednedsday</option>
+ <option value="dayOTW_thursday">Thursday</option>
+ <option value="dayOTW_friday">Friday</option>
+ <option value="dayOTW_saturday">Saturday</option>
+ <option value="dayOTW_sunday">Sunday</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_en.json#/events",
"mapping": [
@@ -222,20 +249,547 @@
{ "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>Location:</strong> <span class="event-location"></span>, <strong>Language</strong>: <span class="event-language"></span></p>
- </li>
- </template>
- </ul>
- <div class="wb-tagfilter-noresult">
- <p>No item match this combination of filters.</p>
- </div>
- <div id="filteredEventsListPagination"></div>
- </div>
- </div>
-</section>
+ }'>
+ <template>
+ <li data-wb-tags="">
+ <h3></h3>
+ <p><span class="event-date"></span> | <span class="event-time"></span></p>
+ <p><strong>Location:</strong> <span class="event-location"></span>, <strong>Language</strong>: <span class="event-language"></span></p>
+ </li>
+ </template>
+ </ul>
+ <div class="wb-tagfilter-noresult">
+ <p>No item match this combination of filters.</p>
+ </div>
+ <div id="filteredEventsListPagination"></div>
+ </div>
+ </div>
+</section>results out of
+iOS Android
+Use ArriveCAN to provide mandatory travel information on and after your entry into Canada.
+Android
+The Auto$mart mobile application helps drivers track their fuel consumption, learn how to be more fuel-efficient and save money.
+iOS Android Blackberry
+B.C. RCMP connects you to information for the latest news, missing and wanted persons, how to report a crime and more.
+iOS Android
+Developed by Fisheries and Oceans Canada, The Baitfish Primer mobile app is a guide that allows users identify and protect Ontario’s baitfishes wherever they go!
+iOS
+BARCODE is a simple and fun documentary app that gives voice to the objects around you.
+iOS Android
+Your mobile business partner. A simplified all-access point for businesses to find essential information, directly interact with government resources and use tools to build your business.
+iOS Android
+The app will support you to track your symptoms, receive the latest updates, and access trusted resources.
+iOS Android
+A new look for 2021! Get the latest updates from CAF leadership, access CANFORGENS, browse social media feeds, view Defence imagery and discover a variety of resources such as health, pay and pension
+iOS Android
+If you are a health professional, you will want to download our new Canadian Guidelines on Sexually Transmitted Infections mobile app.
+iOS Android Amazon Blackberry
+The CanBorder app provides estimated wait times at select ports of entry in Canada and the United States. In addition to current wait times listed by port, you’ll also find forecasted wait times, based on historical data, trends and patterns.
+iOS Android
+Easy-to-use app for controlling cereal aphids
+iOS Android BlackBerry
+CRA Business Tax Reminders lets business users create custom reminders and alerts for key CRA due dates related to instalment payments, returns, and remittances.
+iOS Android BlackBerry
+Looking for a better border experience? Download the eDeclaration mobile app to save time upon arrival in Canada. Using eDeclaration is quick, simple and secure.
+iOS Android Blackberry
+How much do you know about Canada? Test your knowledge with the official Immigration, Refugees and Citizenship Canada application aptly named ‘How Canadian are you, Eh?’
+iOS Android
+The HR GO App provides critical HR information to public service managers and staff including; articles, contacts, walkthroughs, links to online resources and calculators.
+iOS Android
+Job search made easy with Job Bank. Search for work and find a job in Canada.
+iOS Android
+Enhance your experience visiting Fortress of Louisbourg National Historic Site with the self-guided tour app!
+iOS
+Guided by Ludovic, a lovable teddy bear, children can learn about the passage of time by participating in simple, creative and educational activities.
+iOS
+A free iPad app that provides access to 51 works by animation pioneer Norman McLaren and lets users create their own films, exploring three animation techniques made famous by McLaren.
+iOS Android
+The Canadian Armed Forces Transition app has been designed to assist all military members in their transition to civilian life and the civilian workforce.
+iOS Android Blackberry
+My Tree provides a list of selected trees of Canada and their hardiness zones to allow Canadians to choose a suitable tree for their environment.
+iOS Android Blackberry Windows
+Watch over 2,000 documentaries, animations and feature films for free.
+iOS Android Blackberry
+OSI Connect is a free mental health learning and self-management mobile app developed to help OSI patients and their families understand the nature of operational stress injuries (OSIs).
+iOS Blackberry
+The ourlanguages.gc.ca on the go! mobile application lets users search TERMIUM Plus®, the Government of Canada's terminology and linguistic data bank, and quickly find equivalents for nearly 4 million English and French terms in various fields.
+iOS Android Amazon
+Mobile version of PMRA's Label Search. Search and download registered pesticide labels.
+iOS Android
+PTSD Coach Canada can help you learn about and manage symptoms that can occur after trauma.
+iOS Android Blackberry
+Get Government of Canada Recalls and Safety Alerts on the go!
+iOS Android
+The Reconciliation: A Starting Point app is a reference tool for learning about First Nations, Inuit and Métis Peoples, including key historical events and reconciliation initiatives.
+iOS Android BlackBerry
+The Respect in the Canadian Armed Forces app provides support and guidance to victims of sexual misconduct, bystanders, and those in a position of leadership.
+iOS Android
+Enhance your experience visiting Restigouche National Historic Site with the self-guided tour app!
+iOS Android
+The Road to Mental Readiness (R2MR) Mobile Application is a mobile training tool developed to improve short-term performance and long-term mental health outcomes.
+iOS Android
+Take and send your photo for your secure status card for free
+iOS Android
+StatsCAN: Data for a better Canada! Explore the stories behind the numbers with facts, visuals and our latest Eh Sayers podcasts.
+iOS Android
+The first made-for-tablet story that challenges the conventions of the tablet reading experience.
+iOS Android
+Travel smarter with the Government of Canada’s Travel Smart app, your one-stop-shop for international travel information and advice.
+iOS Android
+Veterans Matter will help you find information about remembrance and the services and benefits offered to Veterans and their families.
+iOS Android
+This interactive graphic novel follows a fictional family from Upper Canada that is torn apart by the conflict with the United States.
+iOS Android
+Available on Apple and Android smartphones, WeatherCAN draws its weather data and information directly from Environment and Climate Change Canada, the official source for Canadian weather alerts.
+No item match this combination of filters.
+<section id="filteredAppsList" class="wb-filter wb-tagfilter wb-paginate provisional" data-wb-filter='{
+ "selector": "div[data-wb-tags]",
+ "section": ".wb-tagfilter-items",
+ "uiTemplate": "#searchFilter2"
+}' data-wb-paginate='{
+ "itemsPerPage": 3,
+ "section": ".wb-tagfilter-items",
+ "selector": "div[data-wb-tags]",
+ "uiTarget": "#filteredEventsListPagination2"
+}'>
+ <h2>Example 2 - Applications list with text filter and pagination</h2>
+ <div id="searchFilter2" class="row mrgn-tp-lg">
+ <div class="col-sm-12">
+ <p class="h3 wb-fltr-info mrgn-tp-0"><span data-nbitem></span> results out of <span data-total></span></p>
+ </div>
+ <div class="col-sm-12">
+ <div class="form-group">
+ <label for="customSearchUI2">Search</label>
+ <input type="search" class="form-control full-width" id="customSearchUI2">
+ </div>
+ </div>
+ <div class="col-sm-4 col-md-5 col-lg-6">
+ <div class="form-group">
+ <fieldset>
+ <legend class="h5 mrgn-tp-0"><span class="field-name">Institution</span></legend>
+ <select id="institutionList" name="institution" class="full-width form-control wb-tagfilter-ctrl">
+ <option value="">All</option>
+ <option value="inst__EDC">Science and Economic Development Canada</option>
+ <option value="inst__AAFC">Agriculture and Agri-Food Canada</option>
+ <option value="inst__CBSA">Canada Border Services Agency</option>
+ <option value="inst__CBSAandPHAC">Canada Border Services Agency and Public Health Agency of Canada</option>
+ <option value="inst__CRA">Canada Revenue Agency</option>
+ <option value="inst__CSPS">Canada School of Public Service</option>
+ <option value="inst__ESDC">Employment and Social Development Canada</option>
+ <option value="inst__ECCC">Environment and Climate Change Canada</option>
+ <option value="inst__FOC">Fisheries and Oceans Canada</option>
+ <option value="inst__GAC">Global Affairs Canada</option>
+ <option value="inst__HC">Health Canada</option>
+ <option value="inst__IRCC">Immigration, Refugees and Citizenship Canada</option>
+ <option value="inst__ISC">Indigenous Services Canada</option>
+ <option value="inst__Innovation">Innovation</option>
+ <option value="inst__NDandCAF">National Defence and the Canadian Armed Forces</option>
+ <option value="inst__NFBC">National Film Board of Canada</option>
+ <option value="inst__NRC">Natural Resources Canada</option>
+ <option value="inst__PC">Parks Canada</option>
+ <option value="inst__PHAC">Public Health Agency of Canada</option>
+ <option value="inst__PSPC">Public Services and Procurement Canada</option>
+ <option value="inst__RCMP">Royal Canadian Mounted Police</option>
+ <option value="inst__SC">Statistics Canada</option>
+ <option value="inst__VAC">Veterans Affairs Canada</option>
+ </select>
+ </fieldset>
+ </div>
+ </div>
+ <div class="col-sm-8 col-md-7 col-lg-6">
+ <div class="form-group mrgn-bttm-0">
+ <fieldset>
+ <legend class="h5 mrgn-tp-0"><span class="field-name">Platform</span></legend>
+ <ul class="list-unstyled list-inline">
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__ios"> iOS
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__android"> Android
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__bb"> Blackberry
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__amazon"> Amazon
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__windows"> Windows
+ </label>
+ </li>
+ </ul>
+ </fieldset>
+ </div>
+ </div>
+ </div>
+ <div class="row wb-eqht-grd wb-tagfilter-items">
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__CBSA inst__CBSAandPHAC inst__HC inst__PHAC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">ArriveCAN</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">Use ArriveCAN to provide mandatory travel information on and after your entry into Canada.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags=" plat__android inst__NRC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Auto$mart</h3>
+ <p><span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">The Auto$mart mobile application helps drivers track their fuel consumption, learn how to be more fuel-efficient and save money.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android plat__bb inst__RCMP">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">B.C. RCMP</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span> <span class="label label-primary">Blackberry</span></p>
+ <p class="mrgn-bttm-0">B.C. RCMP connects you to information for the latest news, missing and wanted persons, how to report a crime and more.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__FOC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Baitfish Primer</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">Developed by Fisheries and Oceans Canada, The Baitfish Primer mobile app is a guide that allows users identify and protect Ontario’s baitfishes wherever they go!</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios inst__NFBC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">BarCode.tv</h3>
+ <p><span class="label label-default">iOS</span></p>
+ <p class="mrgn-bttm-0">BARCODE is a simple and fun documentary app that gives voice to the objects around you.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__EDC inst__Innovation">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Canada Business</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">Your mobile business partner. A simplified all-access point for businesses to find essential information, directly interact with government resources and use tools to build your business.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__HC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Canada COVID-19</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">The app will support you to track your symptoms, receive the latest updates, and access trusted resources.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__NDandCAF">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Canadian Armed Forces App</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">A new look for 2021! Get the latest updates from CAF leadership, access CANFORGENS, browse social media feeds, view Defence imagery and discover a variety of resources such as health, pay and pension</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__HC inst__PHAC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Canadian Guidelines on Sexually Transmitted Infections</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">If you are a health professional, you will want to download our new Canadian Guidelines on Sexually Transmitted Infections mobile app.</p>
+ </div>
+ </div>
+ ...
+ </div>
+ <div class="wb-tagfilter-noresult">
+ <p>No item match this combination of filters.</p>
+ </div>
+ <div id="filteredEventsListPagination2"></div>
+</section>résultats sur
+<section id="filteredEventsList" class="wb-tagfilter wb-paginate provisional" data-wb-paginate='{
+ <section id="filteredEventsList" class="wb-filter wb-tagfilter wb-paginate provisional" data-wb-filter='{
+ "selector": "li",
+ "section": ".events-list",
+ "uiTemplate": "#searchFilter"
+}' 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">
+}'>
+ <h2>Exemple 1 - liste d'événements avec filtre de texte, pagination et data-json</h2>
+ <div id="searchFilter" 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">Rechercher</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 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": [
@@ -222,20 +249,547 @@
{ "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>
+ }'>
+ <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>résultats sur
+iOS Android
+Use ArriveCAN to provide mandatory travel information on and after your entry into Canada.
+Android
+The Auto$mart mobile application helps drivers track their fuel consumption, learn how to be more fuel-efficient and save money.
+iOS Android Blackberry
+B.C. RCMP connects you to information for the latest news, missing and wanted persons, how to report a crime and more.
+iOS Android
+Developed by Fisheries and Oceans Canada, The Baitfish Primer mobile app is a guide that allows users identify and protect Ontario’s baitfishes wherever they go!
+iOS
+BARCODE is a simple and fun documentary app that gives voice to the objects around you.
+iOS Android
+Your mobile business partner. A simplified all-access point for businesses to find essential information, directly interact with government resources and use tools to build your business.
+iOS Android
+The app will support you to track your symptoms, receive the latest updates, and access trusted resources.
+iOS Android
+A new look for 2021! Get the latest updates from CAF leadership, access CANFORGENS, browse social media feeds, view Defence imagery and discover a variety of resources such as health, pay and pension
+iOS Android
+If you are a health professional, you will want to download our new Canadian Guidelines on Sexually Transmitted Infections mobile app.
+iOS Android Amazon Blackberry
+The CanBorder app provides estimated wait times at select ports of entry in Canada and the United States. In addition to current wait times listed by port, you’ll also find forecasted wait times, based on historical data, trends and patterns.
+iOS Android
+Easy-to-use app for controlling cereal aphids
+iOS Android BlackBerry
+CRA Business Tax Reminders lets business users create custom reminders and alerts for key CRA due dates related to instalment payments, returns, and remittances.
+iOS Android BlackBerry
+Looking for a better border experience? Download the eDeclaration mobile app to save time upon arrival in Canada. Using eDeclaration is quick, simple and secure.
+iOS Android Blackberry
+How much do you know about Canada? Test your knowledge with the official Immigration, Refugees and Citizenship Canada application aptly named ‘How Canadian are you, Eh?’
+iOS Android
+The HR GO App provides critical HR information to public service managers and staff including; articles, contacts, walkthroughs, links to En ligne resources and calculators.
+iOS Android
+Job search made easy with Job Bank. Search for work and find a job in Canada.
+iOS Android
+Enhance your experience visiting Fortress of Louisbourg National Historic Site with the self-guided tour app!
+iOS
+Guided by Ludovic, a lovable teddy bear, children can learn about the passage of time by participating in simple, creative and educational activities.
+iOS
+A free iPad app that provides access to 51 works by animation pioneer Norman McLaren and lets users create their own films, exploring three animation techniques made famous by McLaren.
+iOS Android
+The Canadian Armed Forces Transition app has been designed to assist all military members in their transition to civilian life and the civilian workforce.
+iOS Android Blackberry
+My Tree provides a list of selected trees of Canada and their hardiness zones to allow Canadians to choose a suitable tree for their environment.
+iOS Android Blackberry Windows
+Watch over 2,000 documentaries, animations and feature films for free.
+iOS Android Blackberry
+OSI Connect is a free mental health learning and self-management mobile app developed to help OSI patients and their families understand the nature of operational stress injuries (OSIs).
+iOS Blackberry
+The ourlangues.gc.ca on the go! mobile application lets users search TERMIUM Plus®, the Government of Canada's terminology and linguistic data bank, and quickly find equivalents for nearly 4 million Anglais and Français terms in various fields.
+iOS Android Amazon
+Mobile version of PMRA's Label Search. Search and download registered pesticide labels.
+iOS Android
+PTSD Coach Canada can help you learn about and manage symptoms that can occur after trauma.
+iOS Android Blackberry
+Get Government of Canada Recalls and Safety Alerts on the go!
+iOS Android
+The Reconciliation: A Starting Point app is a reference tool for learning about First Nations, Inuit and Métis Peoples, including key historical events and reconciliation initiatives.
+iOS Android BlackBerry
+The Respect in the Canadian Armed Forces app provides support and guidance to victims of sexual misconduct, bystanders, and those in a position of leadership.
+iOS Android
+Enhance your experience visiting Restigouche National Historic Site with the self-guided tour app!
+iOS Android
+The Road to Mental Readiness (R2MR) Mobile Application is a mobile training tool developed to improve short-term performance and long-term mental health outcomes.
+iOS Android
+Take and send your photo for your secure status card for free
+iOS Android
+StatsCAN: Data for a better Canada! Explore the stories behind the numbers with facts, visuals and our latest Eh Sayers podcasts.
+iOS Android
+The first made-for-tablet story that challenges the conventions of the tablet reading experience.
+iOS Android
+Travel smarter with the Government of Canada’s Travel Smart app, your one-stop-shop for international travel information and advice.
+iOS Android
+Veterans Matter will help you find information about remembrance and the services and benefits offered to Veterans and their families.
+iOS Android
+This interactive graphic novel follows a fictional family from Upper Canada that is torn apart by the conflict with the United States.
+iOS Android
+Available on Apple and Android smartphones, WeatherCAN draws its weather data and information directly from Environment and Climate Change Canada, the official source for Canadian weather alerts.
+Aucun item ne correspond à cette combinaison de filtres.
+<section id="filteredAppsList" class="wb-filter wb-tagfilter wb-paginate provisional" data-wb-filter='{
+ "selector": "div[data-wb-tags]",
+ "section": ".wb-tagfilter-items",
+ "uiTemplate": "#searchFilter2"
+}' data-wb-paginate='{
+ "itemsPerPage": 3,
+ "section": ".wb-tagfilter-items",
+ "selector": "div[data-wb-tags]",
+ "uiTarget": "#filteredEventsListPagination2"
+}'>
+ <h2>Exemple 2 - liste d'applications avec filtre de texte et pagination</h2>
+ <div id="searchFilter2" class="row mrgn-tp-lg">
+ <div class="col-sm-12">
+ <p class="h3 wb-fltr-info mrgn-tp-0"><span data-nbitem></span> résultats sur <span data-total></span></p>
+ </div>
+ <div class="col-sm-12">
+ <div class="form-group">
+ <label for="customSearchUI2">Rechercher</label>
+ <input type="search" class="form-control full-width" id="customSearchUI2">
+ </div>
+ </div>
+ <div class="col-sm-4 col-md-5 col-lg-6">
+ <div class="form-group">
+ <fieldset>
+ <legend class="h5 mrgn-tp-0"><span class="field-name">Institution</span></legend>
+ <select id="institutionListe" name="institution" class="full-width form-control wb-tagfilter-ctrl">
+ <option value="">Toutes</option>
+ <option value="inst__EDC">Sciences et Développement économique Canada</option>
+ <option value="inst__AAFC">Agriculture et Agroalimentaire Canada</option>
+ <option value="inst__CBSA">Agence des services frontaliers du Canada</option>
+ <option value="inst__CBSAandPHAC">Agence des services frontaliers du Canada et Agence de la santé publique du Canada</option>
+ <option value="inst__CRA">Agence du revenu du Canada</option>
+ <option value="inst__CSPS">École de la fonction publique du Canada</option>
+ <option value="inst__ESDC">Emploi et Développement social Canada</option>
+ <option value="inst__ECCC">Environnement et Changement climatique Canada</option>
+ <option value="inst__FOC">Pêches et Océans Canada</option>
+ <option value="inst__GAC">Affaires mondiales Canada</option>
+ <option value="inst__HC">Santé Canada</option>
+ <option value="inst__IRCC">Immigration, Réfugiés, et Citoyenneté Canada</option>
+ <option value="inst__ISC">Services aux Autochtones Canada</option>
+ <option value="inst__Innovation">Innovation</option>
+ <option value="inst__NDandCAF">Défense nationale et les Forces armées canadiennes</option>
+ <option value="inst__NFBC">Office national du film du Canada</option>
+ <option value="inst__NRC">Ressources Naturelles Canada</option>
+ <option value="inst__PC">Parcs Canada</option>
+ <option value="inst__PHAC">Agence de la santé publique du Canada</option>
+ <option value="inst__PSPC">Services publics et Approvisionnement Canada</option>
+ <option value="inst__RCMP">Gendarmerie royale du Canada</option>
+ <option value="inst__SC">Statistique Canada</option>
+ <option value="inst__VAC">Anciens Combattants Canada</option>
+ </select>
+ </fieldset>
+ </div>
+ </div>
+ <div class="col-sm-8 col-md-7 col-lg-6">
+ <div class="form-group mrgn-bttm-0">
+ <fieldset>
+ <legend class="h5 mrgn-tp-0"><span class="field-name">Plateforme</span></legend>
+ <ul class="list-unstyled list-inline">
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__ios"> iOS
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__android"> Android
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__bb"> Blackberry
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__amazon"> Amazon
+ </label>
+ </li>
+ <li class="checkbox">
+ <label>
+ <input type="checkbox" name="platform" class="wb-tagfilter-ctrl" value="plat__windows"> Windows
+ </label>
+ </li>
+ </ul>
+ </fieldset>
+ </div>
+ </div>
+ </div>
+ <div class="row wb-eqht-grd wb-tagfilter-items" lang="en">
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__CBSA inst__CBSAandPHAC inst__HC inst__PHAC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">ArriveCAN</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">Use ArriveCAN to provide mandatory travel information on and after your entry into Canada.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags=" plat__android inst__NRC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Auto$mart</h3>
+ <p><span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">The Auto$mart mobile application helps drivers track their fuel consumption, learn how to be more fuel-efficient and save money.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android plat__bb inst__RCMP">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">B.C. RCMP</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span> <span class="label label-primary">Blackberry</span></p>
+ <p class="mrgn-bttm-0">B.C. RCMP connects you to information for the latest news, missing and wanted persons, how to report a crime and more.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__FOC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Baitfish Primer</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">Developed by Fisheries and Oceans Canada, The Baitfish Primer mobile app is a guide that allows users identify and protect Ontario’s baitfishes wherever they go!</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios inst__NFBC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">BarCode.tv</h3>
+ <p><span class="label label-default">iOS</span></p>
+ <p class="mrgn-bttm-0">BARCODE is a simple and fun documentary app that gives voice to the objects around you.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__EDC inst__Innovation">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Canada Business</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">Your mobile business partner. A simplified all-access point for businesses to find essential information, directly interact with government resources and use tools to build your business.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__HC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Canada COVID-19</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">The app will support you to track your symptoms, receive the latest updates, and access trusted resources.</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__NDandCAF">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Canadian Armed Forces App</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">A new look for 2021! Get the latest updates from CAF leadership, access CANFORGENS, browse social media feeds, view Defence imagery and discover a variety of resources such as health, pay and pension</p>
+ </div>
+ </div>
+ <div class="col-sm-6 col-lg-4" data-wb-tags="plat__ios plat__android inst__HC inst__PHAC">
+ <div class="well h-100">
+ <h3 class="mrgn-tp-0">Canadian Guidelines on Sexually Transmitted Infections</h3>
+ <p><span class="label label-default">iOS</span> <span class="label label-success">Android</span></p>
+ <p class="mrgn-bttm-0">If you are a health professional, you will want to download our new Canadian Guidelines on Sexually Transmitted Infections mobile app.</p>
+ </div>
+ </div>
+ ...
+ </div>
+ <div class="wb-tagfilter-noresult">
+ <p>Aucun item ne correspond à cette combinaison de filtres.</p>
+ </div>
+ <div id="filteredEventsListPagination2"></div>
+</section>