Merge exemples branches master et validation-forms

exemples/onglets/contenu.html

@@ -0,0 +1,20 @@
+<ul id="onglets">
+    <li style="display:inline;">
+        <a data-panneau-id="panneau1" id="onglet1" class="active" href="#onglet1">Onglet 1</a>
+    </li>
+    <li style="display:inline;">
+        <a data-panneau-id="panneau2" id="onglet2" href="#onglet2">Onglet 2</a>
+    </li>
+    <li style="display:inline;">
+        <a data-panneau-id="panneau3" id="onglet3" href="#onglet3">Onglet 3</a>
+    </li>
+</ul>
+<div class="panneau" id="panneau1">
+    <h2>Panneau 1</h2>
+</div>
+<div class="panneau" id="panneau2" style="display:none">
+    <h2>Panneau 2</h2>
+</div>
+<div class="panneau" id="panneau3" style="display:none">
+    <h2>Panneau 3</h2>
+</div>

exemples/onglets/script.js

@@ -0,0 +1,10 @@
+var onglets = $('#onglets li a');
+
+onglets.click(function(e) {
+    var link = $(this);
+    onglets.removeClass('active');
+    link.addClass('active');
+    var idPanneau = link.data('panneau-id');
+    $('.panneau').hide();
+    $('#' + idPanneau).show();
+});

exemples/validation-de-formulaires-bootstrap/contenu.html

@@ -1,22 +1,38 @@
-<form>
-  <div class="form-group">
-    <label for="exampleInputUsername1">Username</label>
-    <input type="text" class="form-control" id="exampleInputUsername1" aria-describedby="usernameHelp" placeholder="Enter username" />
-  </div>
-  <div class="form-group">
-    <label for="exampleInputEmail1">Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
-  </div>
-  <div class="form-group">
-    <label for="exampleInputPassword1">Password</label>
-    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-  </div>
-  <div class="form-check">
-    <label class="form-check-label">
-      <input type="checkbox" class="form-check-input">
-      Check me out
-    </label>
-  </div>
-  <button type="submit" class="btn btn-primary">Submit</button>
-</form>
+<ul id="onglets">
+    <li style="display:inline;">
+        <a data-tab-id="tab-login" id="onglet1" class="active" href="#">Login</a>
+    </li>
+    <li style="display:inline;">
+        <a data-tab-id="tab-register" id="onglet2" href="#">Register</a>
+    </li>
+
+</ul>
+<div class="tab" id="tab-login">
+    <h2>Panneau 1</h2>
+</div>
+<div class="tab" id="tab-register" style="display:none">
+    <h2>Register</h2>
+    <form>
+      <div class="form-group">
+        <label for="exampleInputUsername1">Username</label>
+        <input type="text" class="form-control" id="exampleInputUsername1" aria-describedby="usernameHelp" placeholder="Enter username" />
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail1">Email address</label>
+        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1">Password</label>
+        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+      </div>
+      <div class="form-check">
+        <label class="form-check-label">
+          <input type="checkbox" class="form-check-input">
+          Check me out
+        </label>
+      </div>
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+</div>
+

exemples/validation-de-formulaires-bootstrap/script.js

@@ -16,4 +16,15 @@ $('#exampleInputUsername1')
     }
     
     
-})
+})
+
+var onglets = $('#onglets li a');
+
+onglets.click(function(e) {
+    var link = $(this);
+    onglets.removeClass('active');
+    link.addClass('active');
+    var idPanneau = link.data('tab-id');
+    $('.tab').hide();
+    $('#' + idPanneau).show();
+});

index.html

@@ -7,6 +7,7 @@
 <!--     <link rel="stylesheet" href="css/qunit-2.4.1.css"> -->
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
 <style type="text/css" media="screen">
 
 </style>