Enviar pesquisa
Carregar
Javascript et JQuery
•
0 gostou
•
1,648 visualizações
Jean-Marie Renouard
Seguir
Présentation de JQuery et Javascript
Leia menos
Leia mais
Engenharia
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 53
Baixar agora
Baixar para ler offline
Recomendados
Syntaxe du langage PHP
Syntaxe du langage PHP
Jean-Marie Renouard
SQL et MySQL
SQL et MySQL
Jean-Marie Renouard
Le client HTTP PHP5
Le client HTTP PHP5
Jean-Marie Renouard
PHP5 et les fichiers
PHP5 et les fichiers
Jean-Marie Renouard
Email et PHP5
Email et PHP5
Jean-Marie Renouard
PHP 5 et la programmation objet
PHP 5 et la programmation objet
Jean-Marie Renouard
MVC / Frameworks PHP
MVC / Frameworks PHP
Jean-Marie Renouard
Gestion de formulaires en PHP
Gestion de formulaires en PHP
Jean-Marie Renouard
Recomendados
Syntaxe du langage PHP
Syntaxe du langage PHP
Jean-Marie Renouard
SQL et MySQL
SQL et MySQL
Jean-Marie Renouard
Le client HTTP PHP5
Le client HTTP PHP5
Jean-Marie Renouard
PHP5 et les fichiers
PHP5 et les fichiers
Jean-Marie Renouard
Email et PHP5
Email et PHP5
Jean-Marie Renouard
PHP 5 et la programmation objet
PHP 5 et la programmation objet
Jean-Marie Renouard
MVC / Frameworks PHP
MVC / Frameworks PHP
Jean-Marie Renouard
Gestion de formulaires en PHP
Gestion de formulaires en PHP
Jean-Marie Renouard
Fichier XML et PHP5
Fichier XML et PHP5
Jean-Marie Renouard
Client base de données en PHP5
Client base de données en PHP5
Jean-Marie Renouard
Les structures de données PHP5
Les structures de données PHP5
Jean-Marie Renouard
Sécurité et Quaité de code PHP
Sécurité et Quaité de code PHP
Jean-Marie Renouard
Le client FTP de PHP5
Le client FTP de PHP5
Jean-Marie Renouard
Configuration PHP5
Configuration PHP5
Jean-Marie Renouard
Présentation de PHP
Présentation de PHP
Jean-Marie Renouard
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
Pierre Faure
php2 : formulaire-session-PDO
php2 : formulaire-session-PDO
Abdoulaye Dieng
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
Php & My Sql
Php & My Sql
guest6c050e
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
kadzaki
Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5
Kristen Le Liboux
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
kadzaki
Formation PHP
Formation PHP
kemenaran
Introduction au Jquery
Introduction au Jquery
Abdoulaye Dieng
Php mysql cours
Php mysql cours
zan
Introduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
Manuel de sécurisation d'un serveur Linux
Manuel de sécurisation d'un serveur Linux
Jean-Marie Renouard
Ssh cookbook
Ssh cookbook
Jean-Marie Renouard
Mais conteúdo relacionado
Mais procurados
Fichier XML et PHP5
Fichier XML et PHP5
Jean-Marie Renouard
Client base de données en PHP5
Client base de données en PHP5
Jean-Marie Renouard
Les structures de données PHP5
Les structures de données PHP5
Jean-Marie Renouard
Sécurité et Quaité de code PHP
Sécurité et Quaité de code PHP
Jean-Marie Renouard
Le client FTP de PHP5
Le client FTP de PHP5
Jean-Marie Renouard
Configuration PHP5
Configuration PHP5
Jean-Marie Renouard
Présentation de PHP
Présentation de PHP
Jean-Marie Renouard
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
Pierre Faure
php2 : formulaire-session-PDO
php2 : formulaire-session-PDO
Abdoulaye Dieng
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
Php & My Sql
Php & My Sql
guest6c050e
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
kadzaki
Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5
Kristen Le Liboux
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
kadzaki
Formation PHP
Formation PHP
kemenaran
Introduction au Jquery
Introduction au Jquery
Abdoulaye Dieng
Php mysql cours
Php mysql cours
zan
Introduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
Mais procurados
(20)
Fichier XML et PHP5
Fichier XML et PHP5
Client base de données en PHP5
Client base de données en PHP5
Les structures de données PHP5
Les structures de données PHP5
Sécurité et Quaité de code PHP
Sécurité et Quaité de code PHP
Le client FTP de PHP5
Le client FTP de PHP5
Configuration PHP5
Configuration PHP5
Présentation de PHP
Présentation de PHP
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
php2 : formulaire-session-PDO
php2 : formulaire-session-PDO
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Php & My Sql
Php & My Sql
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
Formation PHP
Formation PHP
Introduction au Jquery
Introduction au Jquery
Php mysql cours
Php mysql cours
Introduction à Symfony
Introduction à Symfony
Destaque
Manuel de sécurisation d'un serveur Linux
Manuel de sécurisation d'un serveur Linux
Jean-Marie Renouard
Ssh cookbook
Ssh cookbook
Jean-Marie Renouard
Structure de données en PHP
Structure de données en PHP
Jean-Marie Renouard
OWASP TOP 10 Proactive
OWASP TOP 10 Proactive
Abdessamad TEMMAR
Geneva Application Security Forum: Vers une authentification plus forte dans ...
Geneva Application Security Forum: Vers une authentification plus forte dans ...
Sylvain Maret
Owasp top 10 security threats
Owasp top 10 security threats
Vishal Kumar
Introduction à JPA (Java Persistence API )
Introduction à JPA (Java Persistence API )
Daniel Rene FOUOMENE PEWO
[Wroclaw #5] OWASP Projects: beyond Top 10
[Wroclaw #5] OWASP Projects: beyond Top 10
OWASP
Présentation de Node.js
Présentation de Node.js
Mickael Couzinet
Alphorm.com Support de la formation JavaScript les fondamentaux
Alphorm.com Support de la formation JavaScript les fondamentaux
Alphorm
Alphorm.com Support de la formation Hacking & Sécurité, Expert - Vulnérabilit...
Alphorm.com Support de la formation Hacking & Sécurité, Expert - Vulnérabilit...
Alphorm
Jquery mobile
Jquery mobile
Voyelle Voyelle
Alphorm.com Formation Java,avancé OCP (1Z0-804)
Alphorm.com Formation Java,avancé OCP (1Z0-804)
Alphorm
Alphorm.com Formation Java, les fondamentaux
Alphorm.com Formation Java, les fondamentaux
Alphorm
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
Alphorm
Destaque
(15)
Manuel de sécurisation d'un serveur Linux
Manuel de sécurisation d'un serveur Linux
Ssh cookbook
Ssh cookbook
Structure de données en PHP
Structure de données en PHP
OWASP TOP 10 Proactive
OWASP TOP 10 Proactive
Geneva Application Security Forum: Vers une authentification plus forte dans ...
Geneva Application Security Forum: Vers une authentification plus forte dans ...
Owasp top 10 security threats
Owasp top 10 security threats
Introduction à JPA (Java Persistence API )
Introduction à JPA (Java Persistence API )
[Wroclaw #5] OWASP Projects: beyond Top 10
[Wroclaw #5] OWASP Projects: beyond Top 10
Présentation de Node.js
Présentation de Node.js
Alphorm.com Support de la formation JavaScript les fondamentaux
Alphorm.com Support de la formation JavaScript les fondamentaux
Alphorm.com Support de la formation Hacking & Sécurité, Expert - Vulnérabilit...
Alphorm.com Support de la formation Hacking & Sécurité, Expert - Vulnérabilit...
Jquery mobile
Jquery mobile
Alphorm.com Formation Java,avancé OCP (1Z0-804)
Alphorm.com Formation Java,avancé OCP (1Z0-804)
Alphorm.com Formation Java, les fondamentaux
Alphorm.com Formation Java, les fondamentaux
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
Semelhante a Javascript et JQuery
Apprenez le jQuery
Apprenez le jQuery
Club Scientifique de l'ESI - CSE
Introduction a jQuery
Introduction a jQuery
Clément Delmas
JQuery
JQuery
Zakaria SMAHI
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
Vincent Composieux
Présentation jQuery pour débutant
Présentation jQuery pour débutant
Stanislas Chollet
Cours yeoman backbone box2d
Cours yeoman backbone box2d
hugomallet
Cours j query-id1575
Cours j query-id1575
kate2013
Open close principle, on a dit étendre, pas extends !
Open close principle, on a dit étendre, pas extends !
Engineor
HTML5 en projet
HTML5 en projet
Normandy JUG
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Ghilas BELHADJ
Création de themes WordPress
Création de themes WordPress
Chi Nacim
Programmation Android - 09 - Web services
Programmation Android - 09 - Web services
Yann Caron
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
Mickael Perraud
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
démonstration code source site web ecole.docx
démonstration code source site web ecole.docx
VincentBweka
201211 drupagora hostingdrupal
201211 drupagora hostingdrupal
Oxalide
Introduction à Angularjs
Introduction à Angularjs
Rossi Oddet
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
kadzaki
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
Semelhante a Javascript et JQuery
(20)
Apprenez le jQuery
Apprenez le jQuery
Introduction a jQuery
Introduction a jQuery
JQuery
JQuery
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
Présentation jQuery pour débutant
Présentation jQuery pour débutant
Cours yeoman backbone box2d
Cours yeoman backbone box2d
Cours j query-id1575
Cours j query-id1575
Open close principle, on a dit étendre, pas extends !
Open close principle, on a dit étendre, pas extends !
HTML5 en projet
HTML5 en projet
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de themes WordPress
Création de themes WordPress
Programmation Android - 09 - Web services
Programmation Android - 09 - Web services
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
démonstration code source site web ecole.docx
démonstration code source site web ecole.docx
201211 drupagora hostingdrupal
201211 drupagora hostingdrupal
Introduction à Angularjs
Introduction à Angularjs
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Javascript et JQuery
1.
Jean-Marie Renouard LightPath
2014©
2.
Le logo PHP
est du domaine public http://commons.wikimedia.org/wiki/File:PHP-logo.svg Ce document est licencié sous licence ◦Attribution-NonCommercial-ShareAlike ◦CC BY-NC-SA Plus de détails: http://creativecommons.org/licenses/by-nc-sa/3.0/fr/ LightPath 2014© - http://www.jmrenouard.fr 2
3.
Présentation de l’éco
système Javascript Bases de Jquery Jouer avec les données avec JQuery Gestion des évenements Démarrage avec JQuery Chaînage d’opérations Ajax et JQuery Animations en JQuery Création de plugins LightPath 2014© - http://www.jmrenouard.fr 3
4.
Onglets et menus
en Jquery Selecteur de date Jquery Champs d’autocompletion Boite de dialogue Barre de progression Barre de selection Drag and drop en JQuery Selection, redimensionnement et tri LightPath 2014© - http://www.jmrenouard.fr 4
5.
LightPath 2014© -
http://www.jmrenouard.fr 5
6.
Un langage de
programmation Intégration dans les navigateurs Web Standard Restriction sur certains opérations de l’écriture et de lecture. LightPath 2014© - http://www.jmrenouard.fr 6
7.
Javascript version 2.0
Basé sur ECMAScript 5 Format d’échange de données : JSON Support de l’AJAX Autre implémentation: ActionScript LightPath 2014© - http://www.jmrenouard.fr 7
8.
Un framework ou
plûtôt une librairie Il en existe d’autres Concept simple Multi-navigateur Communauté active Paradigme conducteur: trouver/faire LightPath 2014© - http://www.jmrenouard.fr 8
9.
Prototype : petit,
simple et élégant YUI: La librairie JS de Yahoo Dojo: une librairie JS complète mooTools: Idem LightPath 2014© - http://www.jmrenouard.fr 9
10.
Léger Simple Apprentissage
rapide Pas complexe Taille réduite Intégration facile avec divers composants LightPath 2014© - http://www.jmrenouard.fr 10
11.
LightPath 2014© -
http://www.jmrenouard.fr 11
12.
Focalisation sur l’interaction
HTML / Javascript 2 opérations de base: ◦Trouver quelque chose ◦Faire quelque chose avec LightPath 2014© - http://www.jmrenouard.fr 12
13.
Jquery: une seule
fonction jQuery est LA fonction de jQuery. Cette fonction à un raccourci: $ Préservation de conflit: jQuery.noConflict() LightPath 2014© - http://www.jmrenouard.fr 13
14.
Recherche d’un div
avec id « titre » ◦jQuery(‘div#titre’) ◦jQuery(‘#titre’) Recherche de tous les liens a ◦jQuery(‘a’) Recherche des élements de classe label ◦jQuery(‘.label’) Recherche des champs input ◦jQuery(‘:input’) LightPath 2014© - http://www.jmrenouard.fr 14
15.
Recherche d’un div
avec id « titre » ◦$(‘div#titre’) ◦$(‘#titre’) Recherche de tous les liens a ◦$(‘a’) Recherche des élements de classe label ◦$(‘.label’) Recherche des champs input ◦$(‘:input’) LightPath 2014© - http://www.jmrenouard.fr 15
16.
Récupération d’un collection
◦$(‘div’) retourne une collection de tous les div Taille de la collection: ◦$(‘div’).length ◦$(‘div’).size() Récupération du premier élement: ◦$(‘div’)[0] Récupération du dernier élément: ◦$(‘div’)[$(‘div’).length-1] LightPath 2014© - http://www.jmrenouard.fr 16
17.
Méthode each Cacher
toutes les div $(‘div’).each( function() { this.hide(); } Affichage avec index $(‘div’).each( function(i) { console.log( i+’ ) ‘+this); } LightPath 2014© - http://www.jmrenouard.fr 17
18.
LightPath 2014© -
http://www.jmrenouard.fr 18
19.
Manipulation de texte
◦$(‘div’).text(« contenu de la div »); Manipulation de contenu html ◦$(‘div’).html(«<p>contenu de la div</p> »); LightPath 2014© - http://www.jmrenouard.fr 19
20.
Manipulation de valeur
d’un champ input ◦$(‘:input#nom’).attr(«value », « Pierre »); ◦$(‘:input#nom’).attr( {«value »: « Pierre », « id »: « nom »} ); Récupération de la valeur de l’attribut ◦$(‘#nom’).attr(‘value’) Retrait d’attribut ◦$(‘div’).removeAttr (« id »); LightPath 2014© - http://www.jmrenouard.fr 20
21.
Ajout de classe
CSS ◦$(‘:input#nom’).addClass(«label»); Retrait de classe CSS ◦$(‘div’).removeClass(« label »); Désactivation/activation de classe CSS ◦$(‘div’).toggleClass(« label »); Ajout de style CSS à la volée ◦$(‘p’).css({‘color’: ‘red’, ‘font-size’: ‘20px’}); LightPath 2014© - http://www.jmrenouard.fr 21
22.
LightPath 2014© -
http://www.jmrenouard.fr 22
23.
Jquery permet de
créer un framework evenementiel simple. 3 opérations de base: ◦Branchement ◦Débranchement ◦Envoi d’événement LightPath 2014© - http://www.jmrenouard.fr 23
24.
Connexion d’un événement
click ◦$(‘div#label’).click(function(evt) { this.hide(); } Envoi d’un événement click ◦$(‘div#label’).click(); LightPath 2014© - http://www.jmrenouard.fr 24
25.
Débranchement d’un gestionnaire
◦$(‘div#label’).unbind(‘monEvenement’); Branchement d’un gestionnaire ◦$(‘div#label’).bind(‘monEvenement’, function() { console.log(‘monEvenement’); ◦}); Lancement de l’événement ◦$(‘div#label’).trigger(‘monEvenement’); LightPath 2014© - http://www.jmrenouard.fr 25
26.
LightPath 2014© -
http://www.jmrenouard.fr 26
27.
Dés que le
document est chargé: ◦$(document).ready(function() { // Le code JS/Jquery de démarrage } Dés que je découvre l’élément racine $(function() { // Le code JS/Jquery de démarrage }); LightPath 2014© - http://www.jmrenouard.fr 27
28.
LightPath 2014© -
http://www.jmrenouard.fr 28
29.
Il est possible
de chaîner des opérations ◦$(‘div#label’).html(‘<p>cool</p>’).css({‘color: ‘red’}).show(); ◦Affectation du contenu ◦Changement de style CSS ◦Afficahge du contenu LightPath 2014© - http://www.jmrenouard.fr 29
30.
LightPath 2014© -
http://www.jmrenouard.fr 30
31.
Chargement du contenu
dans une div ◦$(‘div#main).load(‘contenuDiv.php?id=main »); Effectuer une requête GET ◦$.get(url, params, callback); ◦$.getJSON(url, params, callback); Effectuer une requête POST ◦$.post(url, params, callback); ◦$.postJSON(url, params, callback); Chargement de script JS ◦$.getScript(url, params, callback); LightPath 2014© - http://www.jmrenouard.fr 31
32.
LightPath 2014© -
http://www.jmrenouard.fr 32
33.
Cacher/afficher ◦$(‘div#label’).hide(); ◦$(‘div#label’).show();
Cacher/afficher avec effet ◦$(‘div#label’).hide(‘slow’); ◦$(‘div#label’).show(‘slow’); Animation d’apparition ◦$(‘div#label’).slideDown(‘fast’); ◦$(‘div#label’).fadeOut(2000); Chaînage ◦$(‘div#label’).fadeOut(2000).slideDown(‘fast’); LightPath 2014© - http://www.jmrenouard.fr 33
34.
LightPath 2014© -
http://www.jmrenouard.fr 34
35.
Défintion d’un fonction
Attachement de la fonction à un élément HTML Appel de la fonction sur l’élément HTML LightPath 2014© - http://www.jmrenouard.fr 35
36.
$.fn.hideA=fuction() { This.find.element(‘a’).hide();
} jQuery.fn.hideA=fuction() { This.find.element(‘a’).hide(); } LightPath 2014© - http://www.jmrenouard.fr 36
37.
$(‘div#header’).hideA(); LightPath 2014©
- http://www.jmrenouard.fr 37
38.
LightPath 2014© -
http://www.jmrenouard.fr 38
39.
Jquery ◦$(document).ready(function() {
$("#tabs").tabs(); }); HTML ◦<div id="tabs"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>Active par défaut</p> </div> <div id="fragment-2"> ………………. </div> <div id="fragment-3"> blabla</div> </div> LightPath 2014© - http://www.jmrenouard.fr 39
40.
$('#tabs').tabs({ load: function(event,
ui) { $('a',ui.panel).click( function() { $(ui.panel).load(this.href); return false; }); } }); Ajout de cache via option ◦ cache: true LightPath 2014© - http://www.jmrenouard.fr 40
41.
◦<div id="tabs"> <ul>
<li><a href="tab1.php"><span>One</span></a></li> <li><a href="tab2.php"><span>Two</span></a></li> <li><a href="tab3.php"><span>Three</span></a></li> </ul> </div> LightPath 2014© - http://www.jmrenouard.fr 41
42.
◦HTML <input type=«
test » name=« date »/> ◦JQuery $("#date").datepicker(); LightPath 2014© - http://www.jmrenouard.fr 42
43.
◦HTML <input type=«
test » name=« langage »/> ◦JQuery sur liste $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); LightPath 2014© - http://www.jmrenouard.fr 43
44.
◦HTML <input type=«
test » name=« langage »/> ◦JQuery $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); (); LightPath 2014© - http://www.jmrenouard.fr 44
45.
function setupZipCodeCityAutocomplete(zipCodeInput) {
zipCodeInput.autocomplete({ source: function(request, response){ $.get(« /code?term=« +request.term, response); this.options.highlightRegExp = initHighlighting(request.term); }, select: function(event, ui) { zipCodeInput.attr("value", ui.item.code); cityInput.attr("value", ui.item.town); return false; }, renderLabel: function(item) { return item.code + " " + item.town; } }); } LightPath 2014© - http://www.jmrenouard.fr 45
46.
HTML ◦<div id="dialog"
title=« Titre">contenu</div> JQuery ◦$("#dialog").dialog(); LightPath 2014© - http://www.jmrenouard.fr 46
47.
HTML ◦<div id="progressbar"></div>
JQuery ◦$("#progressbar").progressbar({ value: 37 }); LightPath 2014© - http://www.jmrenouard.fr 47
48.
HTML ◦<div id="droppable">Drop
here</div> ◦<div id="draggable">Drag me</div> JQuery $(document).ready(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { alert('dropped'); } }); }); LightPath 2014© - http://www.jmrenouard.fr 48
49.
HTML ◦<ul id="selectable">
◦<li>Item 1</li> <li>Item 2</li> ◦<li>Item 3</li> <li>Item 4</li> ◦<li>Item 5</li> ◦</ul> JQuery ◦$("#selectable").selectable({ selected: function(event, ui) { alert(‘selectionné’); } } ); LightPath 2014© - http://www.jmrenouard.fr 49
50.
HTML ◦<div id=«
redim"></div> JQuery ◦$("# redim ").resizable(); LightPath 2014© - http://www.jmrenouard.fr 50
51.
HTML ◦<ul id=«
tri"> ◦<li>Item 1</li> <li>Item 2</li> ◦<li>Item 3</li> <li>Item 4</li> ◦<li>Item 5</li> ◦</ul> JQuery ◦$("#tri").sortable(); Liste triée: ◦$("#tri").sortable(« toArray »); LightPath 2014© - http://www.jmrenouard.fr 51
52.
Documentation de Jquery
http://www.jquery.com LightPath 2014© - http://www.jmrenouard.fr 52
53.
LightPath: ◦Société de
conseil et d’ingénierie ◦Formations, Conseil, Audit et mise en oeuvre ◦jmrenouard@lightpath.fr Jean-Marie RENOUARD ◦jmrenouard@gmail.com ◦Twitter: @jmrenouard ◦http://www.jmrenouard.fr LightPath 2014© - http://www.jmrenouard.fr 53
Baixar agora