|
|
@@ -1,135 +1,42 @@
|
|
|
-<!doctype html>
|
|
|
-<html class="no-js" lang="">
|
|
|
- <head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
|
- <title>Formation jQuery</title>
|
|
|
- <meta name="description" content="">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
-
|
|
|
- <link rel="manifest" href="site.webmanifest">
|
|
|
- <link rel="apple-touch-icon" href="icon.png">
|
|
|
- <!-- Place favicon.ico in the root directory -->
|
|
|
-
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+<title>Formation jQuery</title>
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
|
<link rel="stylesheet" href="css/main.css">
|
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
|
- <style>
|
|
|
- a,
|
|
|
- span,
|
|
|
- button {
|
|
|
- margin: 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .bordure-flashy {
|
|
|
- border: 2px solid red;
|
|
|
- }
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <!--[if lte IE 9]>
|
|
|
- <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
|
|
- <![endif]-->
|
|
|
-
|
|
|
- <!-- Add your site or application content here -->
|
|
|
- <div class="container">
|
|
|
- <!-- <a href="#" class="main">lien 1</a> <a href="#">lien 2</a> -->
|
|
|
-
|
|
|
- <h2>jQuery</h2>
|
|
|
- <form id="formNouveauProduit">
|
|
|
- <input id="nomProduit" name="nomProduit" type="text" />
|
|
|
- <input type="submit" class="blue" value="Ajouter" />
|
|
|
- </form>
|
|
|
-
|
|
|
- <div id="produits">
|
|
|
- <div>
|
|
|
- <span>Produit 2a</span><button class="red" id="monBouton2a">Supprimer</button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>Produit 2b</span><button class="red" id="monBouton2b">Supprimer</button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>Produit 2c</span><button class="red" id="monBouton2c">Supprimer</button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>Produit 2d</span><button class="red" id="monBouton2d">Supprimer</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <script src="js/vendor/modernizr-3.5.0.min.js"></script>
|
|
|
- <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
|
|
- <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
|
|
|
- <script src="js/plugins.js"></script>
|
|
|
- <script src="js/main.js"></script>
|
|
|
-
|
|
|
- <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
|
|
- <script>
|
|
|
- window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
|
|
|
- ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
|
|
|
- </script>
|
|
|
- <script src="https://www.google-analytics.com/analytics.js" async defer></script>
|
|
|
- <script>
|
|
|
- "use strict";
|
|
|
- $(document).ready(function() {
|
|
|
-
|
|
|
- // var button1 = document.getElementById('monBouton1');
|
|
|
- // button1.innerHTML = 'Click me (DOM)';
|
|
|
-
|
|
|
- // var button2 = $('#monBouton2');
|
|
|
- // button2.html('Click me (jQuery)');
|
|
|
-
|
|
|
- // var buttons1 = document.getElementsByClassName('blue');
|
|
|
- // for(var i = 0 ; i < buttons1.length ; i++) {
|
|
|
- // buttons1[i].innerHTML = 'Remove';
|
|
|
- // }
|
|
|
-
|
|
|
- $('.red')
|
|
|
- .html('Remove')
|
|
|
- .removeClass('red')
|
|
|
- .addClass('green');
|
|
|
-
|
|
|
- $('button')
|
|
|
- .click(
|
|
|
- function(event) {
|
|
|
- var button = $(this);
|
|
|
- var row = button.parent();
|
|
|
- row.remove();
|
|
|
- }
|
|
|
- )
|
|
|
-
|
|
|
- $('#formNouveauProduit')
|
|
|
- .submit(
|
|
|
- function(event) {
|
|
|
- event.preventDefault();
|
|
|
- var nomProduit = $('#nomProduit').val();
|
|
|
- var ligneProduit = $('<div><span>' + nomProduit + '</span><button class="red">Supprimer</button></div>');
|
|
|
- ligneProduit.appendTo('#produits');
|
|
|
-
|
|
|
- }
|
|
|
- )
|
|
|
-
|
|
|
- // $('a')
|
|
|
- // .find('.main')
|
|
|
- // .css({
|
|
|
- // 'text-decoration': 'none',
|
|
|
- // color: 'green'
|
|
|
- // });
|
|
|
-
|
|
|
- });
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+<style type="text/css" media="screen">
|
|
|
+
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div id="left-panel">
|
|
|
+ <nav>
|
|
|
+ <ul>
|
|
|
+ <li><a href="#">Sélecteurs</a></li>
|
|
|
+ <li><a href="#">Evenements</a></li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ <div id="editor">function foo(items) {
|
|
|
+ var x = "All this is syntax highlighted";
|
|
|
+ return x;
|
|
|
+}</div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script src="js/vendor/modernizr-3.5.0.min.js"></script>
|
|
|
+<script src="js/vendor/jquery-3.2.1.min.js" ></script>
|
|
|
+<script src="js/plugins.js"></script>
|
|
|
+<script src="js/main.js"></script>
|
|
|
+<script src="ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+<script>
|
|
|
+ var editor = ace.edit("editor");
|
|
|
+ editor.setTheme("ace/theme/eclipse");
|
|
|
+ editor.getSession().setMode("ace/mode/javascript");
|
|
|
+ editor.getSession().setUseWrapMode(true);
|
|
|
+ editor.getSession().on('change', function() {
|
|
|
+ console.log(arguments)
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
