Data JSON
Insertion de contenu extrait d'un fichier JSON
Donnée JSON utilisé pour les examples suivantes
Fichier: demo/data-fr.json
{
"frais": {
"ABC": "20$"
},
"produit": "Bonjour le monde",
"produits": [
"Mon nouveau produit",
"Mon deuxième produit",
"Mon produit numéro 3"
],
"etats": "text-muted",
"jesuisvrai": true,
"jesuisfaux": false,
"jour":"2016-11-05T01:42:31Z",
"unTableau": [
{ "nom": "Item 1", "prop": "rouge" },
{ "nom": "Item 2", "prop": "bleu" },
{ "nom": "Item 3", "prop": "jaune" },
{ "nom": "Item 4", "prop": "violet" }
],
"bureaux": [
{ "nom": "Jean Edmonds, Tour nord", "num": 300, "rue": "Slater", "ville": "Ottawa", "css": "bg-success" },
{ "nom": "Place du portage, Phase I", "num": 50, "rue": "Victoria", "ville": "Gatineau", "css": "bg-danger" }
]
}Example
Mon produit ABC coûte (consulter notre liste de frais)
Vous consultez le produits "Bonjour le monde" "Inconnue"
This is a paragraph.
Code source
<p>Mon produit ABC coûte <a data-json-replacewith="demo/data-fr.json#/frais/ABC" href="#">(consulter notre liste de frais)</a></p>
<p class="mrgn-tp-md">Vous consultez le produits "Bonjour le monde" "<span data-json-replace="demo/data-fr.json#/produit">Inconnue</span>"</p>
<p class="mrgn-tp-md" data-wb-json='[
{
"url": "demo/data-fr.json#/produit",
"type": "replace"
},
{
"url": "demo/data-fr.json#/etats",
"type": "addclass"
}
]'>This is a paragraph.</p>Insertion de contenu...
after)Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus ut turpis a elit laoreet pharetra.
append)Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus ut turpis a elit laoreet pharetra.
before)Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus ut turpis a elit laoreet pharetra.
prepend)Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus ut turpis a elit laoreet pharetra.
Code source
<div class="col-md-6">
<figure>
<figcaption class="h3">Après l'élément (<code>after</code>)</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-after="demo/data-fr.json#/produit">elit.</strong></p>
<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "after" }'>pharetra.</strong></p>
</figure>
</div>
<div class="col-md-6">
<figure>
<figcaption class="h3">À la fin de l'élément (<code>append</code>)</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-append="demo/data-fr.json#/produit">elit.</strong></p>
<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "append" }'>pharetra.</strong></p>
</figure>
</div>
<div class="col-md-6">
<figure>
<figcaption class="h3">Avant l'élément (<code>before</code>)</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-before="demo/data-fr.json#/produit">elit.</strong></p>
<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "before" }'>pharetra.</strong></p>
</figure>
</div>
<div class="col-md-6">
<figure>
<figcaption class="h3">Au début de l'élément (<code>prepend</code>)</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-prepend="demo/data-fr.json#/produit">elit.</strong></p>
<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "prepend" }'>pharetra.</strong></p>
</figure>
</div>Remplacement...
replace)Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus ut turpis a elit laoreet pharetra.
replacewith)Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus ut turpis a elit laoreet pharetra.
Source code
<div class="col-md-6">
<figure>
<figcaption class="h3">Contenu de l'élément (<code>replace</code>)</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-replace="demo/data-fr.json#/produit">elit.</strong></p>
<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "replace" }'>pharetra.</strong></p>
</figure>
</div>
<div class="col-md-6">
<figure>
<figcaption class="h3">L'élément (<code>replacewith</code>)</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-replacewith="demo/data-fr.json#/produit">elit.</strong></p>
<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "replacewith" }'>pharetra.</strong></p>
</figure>
</div>Manipulation des classes CSS
addclass)Lorem ipsum dolor sit amet, consectetur adipiscing elit.
removeclass)Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Source code
<div class="col-md-6">
<figure>
<figcaption class="h3">Ajout d'une classe (<code>addclass</code>)</figcaption>
<p data-wb-json='{ "url": "demo/data-fr.json#/etats", "type": "addclass" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</figure>
</div>
<div class="col-md-6">
<figure>
<figcaption class="h3">Enlever une classe (<code>removeclass</code>)</figcaption>
<p class="text-muted" data-wb-json='{ "url": "demo/data-fr.json#/etats", "type": "removeclass" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</figure>
</div>Mettre à jour des propriétés et des valeurs
prop)val)Code source
<div class="col-md-6">
<figure>
<figcaption class="h3">Propriété (<code>prop</code>)</figcaption>
<div class="checkbox">
<label><input type="checkbox" value="" data-wb-json='{ "url": "demo/data-fr.json#/jesuisvrai", "type": "prop", "prop": "checked" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<label><input type="checkbox" value="" checked="checked" data-wb-json='{ "url": "demo/data-fr.json#/jesuisfaux", "type": "prop", "prop": "checked" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
</div>
</figure>
</div>
<div class="col-md-6">
<figure>
<figcaption class="h3">Valeur (<code>val</code>)</figcaption>
<div class="form-group">
<label class="col-sm-4 control-label" for="label-3">Lorem ipsum</label>
<div class="col-md-8">
<input id="label-3" type="text" class="form-control" data-wb-json='{ "url": "demo/data-fr.json#/etats", "type": "val" }' />
</div>
</div>
</figure>
</div>Exemple d'essaie spéciale
Consulter la page d'exemple d'essaie spéciale
Détails de la page
- Date de modification :