ajout exemples jquery

Author: ms-studio

430-jquery.md

@@ -90,4 +90,47 @@ for (var links = document.links, i = 0, a; a = links[i]; i++) {
     a.target = '_blank';
   }
 }
-```
+```
+
+### Afficher et masquer un menu
+
+Voici un code jQuery faisant usage de "toggle":
+
+```javascript
+$( ".mobile-title"  ).click(function() {
+  $("#styleinfos").toggle();
+});
+```
+
+Dans certaines situations, il est utile de vérifier l'état du menu avant de procéder à l'action afficher / masquer:
+
+```javascript
+/* 
+ * 2.
+ * Mobile Menu
+ ****************************************************
+ * Show/hide the menu when clicking on .mobile-menu
+ */
+
+$( ".mobile-menu"  ).on("click", function(){
+  var state = $("#menu").data( "toggle" );
+  if ( state == "open") {
+    $("#menu").hide().data( "toggle", "closed" );
+  } else {
+    $("#menu").show().data( "toggle", "open" );
+  }
+});
+
+```
+
+Ce script utilise les méthodes suivantes:
+
+* `$( ".mobile-menu"  )` : C'est le sélecteur qui définit l'objet cliquable, qui va déclencher L'action afficher / masquer.
+* `.on("click", function()` : la méthode `on()` est l'une des plus importantes dans jQuery. Elle permet de déclencher une suite d'opérations après un événement. Ici nous avons choisi "click".
+*  `var state = $("#menu").data( "toggle" )`: On définit une variable nommée "state", pour détecter l'état actuel de notre menu – est-il ouvert ou fermé? Le sélecteur `$("#styleinfos")` correspond à notre menu. La méthode `data()` permet de lire un attribut "data" (un attribut HTML, qui peut être appliqué sur tout élément comme une classe CSS, mais sert uniquement à stoquer une donnée utilisable en JavaScript).
+* `if ( state == "open") {` : Nous vérifions si l'état (c.à.d. la valeur de notre attribut data-toggle) est "open", ou non.
+* `$("#menu").hide()` : Le menu étant ouvert, notre action consiste à le masquer, avec la méthode jQuery `hide()`...
+* `.data( "toggle", "closed" )` : En plus de le fermer, nous redéfinissons l'attribut "data-toggle" et lui donnons la valeur "closed".
+* `} else {` : Si le menu n'est pas ouvert... 
+* `$("#menu").show()`: Avec la méthode `hide()` on affiche le menu...
+* `.data( "toggle", "open" )` : ...et on redéfinit l'attribut "data-toggle", sa valeur est désormais "open".

480-offline.md

@@ -4,11 +4,11 @@ title: Offline
 permalink: /js/offline
 ---
 
-<h3>Technologies pour fonctionnement hors-ligne</h3>
+### Technologies pour fonctionnement hors-ligne
 
 Il existe des technologies récentes qui permettent au navigateur de garder les données d'un site en cache, et de le faire fonctionner hors-ligne.
 
-<h3>Documentation:</h3>
+### Documentation
 
 * Un aperçu bref, [Service workers explained](https://github.com/w3c/ServiceWorker/blob/master/explainer.md), par le W3C
 * [Un exemple basique](https://googlechrome.github.io/samples/service-worker/basic/index.html), par l'équipe Google Chrome