toggle-fr.hbs

---
{
	"title": "Basculer",
	"language": "fr",
	"category": "Plugiciel",
	"description": "Plugiciel qui permet un lien à basculer des éléments entre les états activé et désactivé.",
	"tag": "toggle",
	"parentdir": "toggle",
	"altLangPrefix": "toggle",
	"css": ["demo/toggle"],
	"dateModified": "2014-02-19"
}
---
<section>
	<h2>Intention</h2>
	<p>Plugiciel qui permet un lien à basculer des éléments entre les états activé et désactivé.</p>
</section>

<div class="row">

	<div class="col-md-3">
		<div class="list-group">
			<a href="#simple" class="list-group-item">Exemple simple</a>
			<a href="#details" class="list-group-item">Details</a>
			<a href="#grouped" class="list-group-item">Basculer groupe</a>
			<a href="#accordion" class="list-group-item">Accordion</a>
			<a href="#persist" class="list-group-item">Conserver l'état de bascule</a>
		</div>
	</div>

	<div class="col-md-9">
		<section>
			<h2 id="simple" class="mrgn-tp-0">Exemple simple</h2>

			<div class="btn-group">
				<button type="button" class="btn btn-primary wb-toggle" data-toggle='{"selector": ".box"}'>Basculer</button>
				<button type="button" class="btn btn-default wb-toggle" data-toggle='{"selector": ".box", "type": "on"}'>Activer</button>
				<button type="button" class="btn btn-default wb-toggle" data-toggle='{"selector": ".box", "type": "off"}'>Désactiver</button>
			</div>

			<div class="mrgn-tp-lg mrgn-bttm-lg">
				<span class="box"></span>
				<span class="box"></span>
				<span class="box"></span>
				<span class="box"></span>
				<span class="box"></span>
				<span class="box wb-toggle"></span>
			</div>

		</section>

		<section id="details-elements">
			<h2 id="details">Details</h2>

			<div class="btn-group">
				<button type="button" class="btn btn-primary wb-toggle" data-toggle='{"selector": "details", "parent": "#details-elements", "print": "on"}'>Basculer</button>
				<button type="button" class="btn btn-default wb-toggle" data-toggle='{"selector": "details", "parent": "#details-elements", "type": "on"}'>Activer</button>
				<button type="button" class="btn btn-default wb-toggle" data-toggle='{"selector": "details", "parent": "#details-elements", "type": "off"}'>Désactiver</button>
			</div>

			<div class="row">
				<details class="col-sm-4">
					<summary>Exemple 1</summary>
					<p>Le contenu d'exemple qui fournit plus de détails.</p>
					<table>
						<caption>Tasses de café bues par chaque député</caption>
						<thead>
						<tr>
							<th scope="col">Nom</th>
							<th scope="col">Tasses</th>
							<th scope="col">Type de café</th>
							<th scope="col">Sucre?</th>
						</tr>
						</thead>
						<tbody>
							<tr>
								<td>T. Sexton</td>
								<td>10</td>
								<td>Expresso</td>
								<td>Non</td>
							</tr>
							<tr>
								<td>J. Dinnen</td>
								<td>5</td>
								<td>Déca</td>
								<td>Oui</td>
							</tr>
						</tbody>
					</table>
				</details>

				<details class="col-sm-4">
					<summary>Exemple 2</summary>
					<p>Le contenu d'exemple qui fournit plus de détails.</p>
					<table>
						<caption>Tasses de café bues par chaque député</caption>
						<thead>
						<tr>
							<th scope="col">Nom</th>
							<th scope="col">Tasses</th>
							<th scope="col">Type de café</th>
							<th scope="col">Sucre?</th>
						</tr>
						</thead>
						<tbody>
							<tr>
								<td>T. Sexton</td>
								<td>10</td>
								<td>Expresso</td>
								<td>Non</td>
							</tr>
							<tr>
								<td>J. Dinnen</td>
								<td>5</td>
								<td>Déca</td>
								<td>Oui</td>
							</tr>
						</tbody>
					</table>
				</details>

				<details class="col-sm-4">
					<summary>Exemple 3</summary>
					<p>Le contenu d'exemple qui fournit plus de détails.</p>
					<table>
						<caption>Tasses de café bues par chaque député</caption>
						<thead>
						<tr>
							<th scope="col">Nom</th>
							<th scope="col">Tasses</th>
							<th scope="col">Type de café</th>
							<th scope="col">Sucre?</th>
						</tr>
						</thead>
						<tbody>
							<tr>
								<td>T. Sexton</td>
								<td>10</td>
								<td>Expresso</td>
								<td>Non</td>
							</tr>
							<tr>
								<td>J. Dinnen</td>
								<td>5</td>
								<td>Déca</td>
								<td>Oui</td>
							</tr>
						</tbody>
					</table>
				</details>
			</div>

		</section>
		<section>
			<h2 id="grouped">Basculer groupe</h2>
			<p>
				Cette paramètre <code> group </code> restreint bascule groupées d'avoir un seul des éléments actifs à un moment un peu comme le comportement de case à cocher groupées.
			</p>
			
			<div class="btn-group">
				<button type="button" class="btn btn-default wb-toggle" data-toggle='{"selector": "#toggle1", "group": ".grouped", "type": "on" }'>Exemple 1</button>
				<button type="button" class="btn btn-default wb-toggle" data-toggle='{"selector": "#toggle2", "group": ".grouped", "type": "on" }'>Exemple 2</button>
				<button type="button" class="btn btn-default wb-toggle" data-toggle='{"selector": "#toggle3", "group": ".grouped", "type": "on" }'>Exemple 3</button>
			</div>			

			<div class="row">
				<details id="toggle1" class="col-sm-4 grouped">
					<summary>Exemple 1</summary>
					<p>Le contenu d'exemple qui fournit plus de détails.</p>
					<table>
						<caption>Tasses de café bues par chaque député</caption>
						<thead>
						<tr>
							<th scope="col">Nom</th>
							<th scope="col">Tasses</th>
							<th scope="col">Type de café</th>
							<th scope="col">Sucre?</th>
						</tr>
						</thead>
						<tbody>
							<tr>
								<td>T. Sexton</td>
								<td>10</td>
								<td>Expresso</td>
								<td>Non</td>
							</tr>
							<tr>
								<td>J. Dinnen</td>
								<td>5</td>
								<td>Déca</td>
								<td>Oui</td>
							</tr>
						</tbody>
					</table>
				</details>

				<details id="toggle2" class="col-sm-4 grouped">
					<summary>Exemple 2</summary>
					<p>Le contenu d'exemple qui fournit plus de détails.</p>
					<table>
						<caption>Tasses de café bues par chaque député</caption>
						<thead>
						<tr>
							<th scope="col">Nom</th>
							<th scope="col">Tasses</th>
							<th scope="col">Type de café</th>
							<th scope="col">Sucre?</th>
						</tr>
						</thead>
						<tbody>
							<tr>
								<td>T. Sexton</td>
								<td>10</td>
								<td>Expresso</td>
								<td>Non</td>
							</tr>
							<tr>
								<td>J. Dinnen</td>
								<td>5</td>
								<td>Déca</td>
								<td>Oui</td>
							</tr>
						</tbody>
					</table>
				</details>

				<details id="toggle3" class="col-sm-4 grouped">
					<summary>Exemple 3</summary>
					<p>Le contenu d'exemple qui fournit plus de détails.</p>
					<table>
						<caption>Tasses de café bues par chaque député</caption>
						<thead>
						<tr>
							<th scope="col">Nom</th>
							<th scope="col">Tasses</th>
							<th scope="col">Type de café</th>
							<th scope="col">Sucre?</th>
						</tr>
						</thead>
						<tbody>
							<tr>
								<td>T. Sexton</td>
								<td>10</td>
								<td>Expresso</td>
								<td>Non</td>
							</tr>
							<tr>
								<td>J. Dinnen</td>
								<td>5</td>
								<td>Déca</td>
								<td>Oui</td>
							</tr>
						</tbody>
					</table>
				</details>
			</div>
			
		</section>

		<section>
			<h2 id="accordion">Accordéon</h2>
			<p>La fonction de basculement de groupe du plugin peut également être utilisé pour créer un accordéon:</p>

			<div class="accordion">

				<details class="acc-group">
					<summary class="wb-toggle tgl-tab" data-toggle='{"parent": ".accordion", "group": ".acc-group"}'>Example 1</summary>
					<div class="tgl-panel">
						<p>Le contenu d'exemple qui fournit plus de détails.</p>
						<table>
							<caption>Tasses de café bues par chaque député</caption>
							<thead>
							<tr>
								<th scope="col">Nom</th>
								<th scope="col">Tasses</th>
								<th scope="col">Type de café</th>
								<th scope="col">Sucre?</th>
							</tr>
							</thead>
							<tbody>
								<tr>
									<td>T. Sexton</td>
									<td>10</td>
									<td>Expresso</td>
									<td>Non</td>
								</tr>
								<tr>
									<td>J. Dinnen</td>
									<td>5</td>
									<td>Déca</td>
									<td>Oui</td>
								</tr>
							</tbody>
						</table>
					</div>
				</details>

				<details class="acc-group">
					<summary class="wb-toggle tgl-tab" data-toggle='{"parent": ".accordion", "group": ".acc-group"}'>Example 2</summary>
					<div class="tgl-panel">
						<p>Le contenu d'exemple qui fournit plus de détails.</p>
						<table>
							<caption>Tasses de café bues par chaque député</caption>
							<thead>
							<tr>
								<th scope="col">Nom</th>
								<th scope="col">Tasses</th>
								<th scope="col">Type de café</th>
								<th scope="col">Sucre?</th>
							</tr>
							</thead>
							<tbody>
								<tr>
									<td>T. Sexton</td>
									<td>10</td>
									<td>Expresso</td>
									<td>Non</td>
								</tr>
								<tr>
									<td>J. Dinnen</td>
									<td>5</td>
									<td>Déca</td>
									<td>Oui</td>
								</tr>
							</tbody>
						</table>
					</div>
				</details>

				<details class="acc-group">
					<summary class="wb-toggle tgl-tab" data-toggle='{"parent": ".accordion", "group": ".acc-group"}'>Exemple 3</summary>
					<div class="tgl-panel">
						<p>Le contenu d'exemple qui fournit plus de détails.</p>
						<table>
							<caption>Tasses de café bues par chaque député</caption>
							<thead>
							<tr>
								<th scope="col">Nom</th>
								<th scope="col">Tasses</th>
								<th scope="col">Type de café</th>
								<th scope="col">Sucre?</th>
							</tr>
							</thead>
							<tbody>
								<tr>
									<td>T. Sexton</td>
									<td>10</td>
									<td>Expresso</td>
									<td>Non</td>
								</tr>
								<tr>
									<td>J. Dinnen</td>
									<td>5</td>
									<td>Déca</td>
									<td>Oui</td>
								</tr>
							</tbody>
						</table>
					</div>
				</details>

			</div>

		</section>
		
		<section>
			<h2 id="persist">Conserver l'état de bascule</h2>
			<p>L'état de bascule de l'élément <code>details</code> ci-desous persistra tant que le fureteur (ou onglet) demeure ouvert.</p>
			<details>
				<summary class="wb-toggle" data-toggle='{"persist": "session"}'>Exemple 1</summary>
				<p>Le contenu d'exemple qui fournit plus de détails.</p>
				<table>
					<caption>Tasses de café bues par chaque député</caption>
					<thead>
					<tr>
						<th scope="col">Nom</th>
						<th scope="col">Tasses</th>
						<th scope="col">Type de café</th>
						<th scope="col">Sucre?</th>
					</tr>
					</thead>
					<tbody>
						<tr>
							<td>T. Sexton</td>
							<td>10</td>
							<td>Expresso</td>
							<td>Non</td>
						</tr>
						<tr>
							<td>J. Dinnen</td>
							<td>5</td>
							<td>Déca</td>
							<td>Oui</td>
						</tr>
					</tbody>
				</table>
			</details>			
		</section>		
	</div>
</div>