Aléatoire

Choisi un des éléments enfant aléatoirement.

Afficher une image aléatoire

Cet example affiche une image parmi trois aléatoirement. Les probabilité est de 33% qu'une image différente soit affiché lors du prochain rafraichissement de la page web. Le nom de la classe qui bascule est hide dans l'un des trois img elements suivant.

Investir dans le future Volez dans le ciel Protéger l'environment
Source code 
<div class="mrgn-bttm-md"" data-wb-randomize='{ "shuffle": true, "selector": "img", "toggle": "hide" }'>
	<img class="full-width hide"
		src="../../demos/tabs/img/investinourfuture.jpg" alt="Investir dans le future" />
	<img class="full-width hide"
		src="../../demos/tabs/img/flytheskies.jpg" alt="Volez dans le ciel" />
	<img class="full-width hide"
		src="../../demos/tabs/img/protect-environment.jpg" alt="Protéger l'environment" />
</div>

Changer aléatoirement des lignes de tableaux

Les cinq (5) ligne de tableaux sera réorganisé aléatoirement au rafraichissement de la page.

Échantillion de donnée
Colonne A Colonne B
Ligne 1, colonne A Ligne 1, colonne B
Ligne 2, colonne A Ligne 2, colonne B
Ligne 3, colonne A Ligne 3, colonne B
Ligne 4, colonne A Ligne 4, colonne B
Ligne 5, colonne A Ligne 5, colonne B
Code source 
<table class="table table-bordered">
	<caption>Échantillion de donnée</caption>
	<thead>
		<tr>
			<th>Colonne A</th>
			<th>Colonne B</th>
		</tr>
	</thead>
	<tbody data-wb-randomize='{ "shuffle": true }'>
		<tr>
			<td>Ligne 1, colonne A</td>
			<td>Ligne 1, colonne B</td>
		</tr>
		<tr>
			<td>Ligne 2, colonne A</td>
			<td>Ligne 2, colonne B</td>
		</tr>
		<tr>
			<td>Ligne 3, colonne A</td>
			<td>Ligne 3, colonne B</td>
		</tr>
		<tr>
			<td>Ligne 4, colonne A</td>
			<td>Ligne 4, colonne B</td>
		</tr>
		<tr>
			<td>Ligne 5, colonne A</td>
			<td>Ligne 5, colonne B</td>
		</tr>
	</tbody>
</table>

Changer aléatoirement les lignes de tableaux et identifier 2 ligne

Les cinq (5) ligne de tableaux sera réorganisé aléatoirement et 2 lignes sera sélectionner.

Échantillion de donnée
Colonne A Colonne B
Ligne 1, colonne A Ligne 1, colonne B
Ligne 2, colonne A Ligne 2, colonne B
Ligne 3, colonne A Ligne 3, colonne B
Ligne 4, colonne A Ligne 4, colonne B
Ligne 5, colonne A Ligne 5, colonne B
Code source 
<table class="table table-bordered">
	<caption>Échantillion de donnée</caption>
	<thead>
		<tr>
			<th>Colonne A</th>
			<th>Colonne B</th>
		</tr>
	</thead>
	<tbody data-wb-randomize='{ "shuffle": true, "toggle": "warning", "number": 2 }'>
		<tr>
			<td>Ligne 1, colonne A</td>
			<td>Ligne 1, colonne B</td>
		</tr>
		<tr>
			<td>Ligne 2, colonne A</td>
			<td>Ligne 2, colonne B</td>
		</tr>
		<tr>
			<td>Ligne 3, colonne A</td>
			<td>Ligne 3, colonne B</td>
		</tr>
		<tr>
			<td>Ligne 4, colonne A</td>
			<td>Ligne 4, colonne B</td>
		</tr>
		<tr>
			<td>Ligne 5, colonne A</td>
			<td>Ligne 5, colonne B</td>
		</tr>
	</tbody>
</table>

Choisir aléatoirement une valeur d'attribut

Sélectionnez une option aléatoire dans une liste d'options et ajoutez-la comme valeur à l'attribut défini.

Exemple 1

Titre

Paragraphe

Code source 
<div class="bg-cover well"
	data-wb-randomize='{
		"attribute": "data-bgimg-srcset",
		"values": [
			"https://placehold.co/1920x300/blue/white.jpg 1920w, https://placehold.co/1200x300/blue/white.jpg 1200w, https://placehold.co/992x300/blue/white.jpg 992w, https://placehold.co/768x300/blue/white.jpg 768w",
			"https://placehold.co/1920x300/green/white.jpg 1920w, https://placehold.co/1200x300/green/white.jpg 1200w, https://placehold.co/992x300/green/white.jpg 992w, https://placehold.co/768x300/green/white.jpg 768w",
			"https://placehold.co/1920x300/orange/white.jpg 1920w, https://placehold.co/1200x300/orange/white.jpg 1200w, https://placehold.co/992x300/orange/white.jpg 992w, https://placehold.co/768x300/orange/white.jpg 768w",
			"https://placehold.co/1920x300/purple/white.jpg 1920w, https://placehold.co/1200x300/purple/white.jpg 1200w, https://placehold.co/992x300/purple/white.jpg 992w, https://placehold.co/768x300/purple/white.jpg 768w"
		]
	}'>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h4 class="mrgn-tp-md">Titre</h4>
		<p>Paragraphe</p>
	</div>
</div>

Exemple 2

Code source 
<div data-wb-randomize='{
	"attribute": "data-ajax-replace",
	"values": [
		"../data-ajax/ajax/data-ajax-extra-fr.html",
		"../data-ajax/ajax/data-ajax-extra-2-fr.html",
		"../data-ajax/ajax/data-ajax-filter-fr.html#filter-id"
	]
}'></div>

Exemple 3

Nom du produit :

Code source 
<p>
	Nom du produit : <span data-wb-randomize='{
		"attribute": "data-wb-json",
		"values": [
			"{ \"url\": \"../wb-data-json/demo/data-fr.json#/produits/0\", \"type\": \"replacewith\" }",
			"{ \"url\": \"../wb-data-json/demo/data-fr.json#/produits/1\", \"type\": \"replacewith\" }",
			"{ \"url\": \"../wb-data-json/demo/data-fr.json#/produits/2\", \"type\": \"replacewith\" }"
		]
	}'></span>
</p>
Date de modification :