màj de l'exemple 1

css/styles.css

@@ -6,7 +6,7 @@
  * Grosse font pour le vidéo-proj
  */
 body {
-  font-size: 120%;
+  font-size: 130%;
 }
 #left-panel,
 #right-panel {
@@ -55,7 +55,7 @@ button.active {
  * Styles pour l'éditeur Ace
  */
 #editor {
-  /*font-size: 90%;*/
+  font-size: 90%;
   position: absolute;
   top: 110px;
   right: 0;
@@ -66,7 +66,7 @@ button.active {
 }
 
 .container {
-  margin: 150px auto;
+  margin: 50px auto;
 	background: #fff;
 	border: 1px solid #ddd;
 	padding: 30px;
@@ -98,7 +98,6 @@ input {
   border-radius: 3px;
 }
 a,
-span,
 button {
   margin: 5px;
   box-sizing: border-box;
@@ -107,3 +106,10 @@ button {
   border: 2px solid red;
 }
 
+/**
+ * Styles communs pour les différents exemples
+ */
+a.active {
+  font-weight: bold;
+  color: #48c;
+}

exemples/selecteurs-base/contenu.html

@@ -1 +1,12 @@
-<button id="button1">Cliquez moi !</button>
+<h5>Sélection par id et toggleClass</h5>
+<button id="ex1-button1">Ajouter/enlever la classe "red"</button>
+
+<p>Cliquer sur un de ces boutons lui ajoutera/enlèvera la classe "blue"</p>
+<button class="ex1-buttons">Gris</button>
+<button class="ex1-buttons">Gris</button>
+<button class="ex1-buttons">Gris</button>
+
+<p>Cliquer sur un de ces liens lui ajoutera la classe "active" et l'enlèvera aux autres</p>
+<a href="#">Lien 1</a> |
+<a href="#">Lien 2</a> |
+<a href="#">Lien 3</a>

exemples/selecteurs-base/script.js

@@ -1,4 +1,15 @@
-$('#button1').click(function() {
-  $(this).html('Click me');
-  console.log('click');
+// Sélection par id
+$('#ex1-button1').click(function() {
+  $(this).toggleClass('red');
+});
+
+// Sélection par classe
+$('.ex1-buttons').click(function() {
+  $(this).toggleClass('blue');
+});
+
+$('a').click(function(e) {
+  e.preventDefault();
+  $('a').removeClass('active');
+  $(this).addClass('active');
 });

js/editor.js

@@ -34,7 +34,7 @@ $(document).ready(function() {
     // editor.setSession(newSession)
     initEditor(which);
     console.log(ed[0].innerHTML)
-    editor.getSession().setValue('<button id="pouet">Click me</button>'); //ed[0].innerHTML);
+    editor.getSession().setValue(ed[0].innerHTML);
   }
 
   $('#tabs button').click(function() {