Présentation:
jQuery UI (User Interface) est un framework UI basé sur jQuery. jQuery UI facilite la construction d'interfaces utilisateurs, il comprend une collection composants UI comme des panneaux à onglets, des accordéons...
DataTables est un plugin jQuery qui permet de construire rapidement des tableaux de données (DataGrid), tableaux statiques ou dynamiques avec chargement possible des données en AJAX.
Cette formation permet aux participants d'acquérir les bases de jQuery UI pour définir l'interfaces utilisateur d'une application web, de découvrir le plugin Datatables pour construire des tableaux de données.
Objectifs:
Savoir construire une application Web avec jQuery UI et Datatable.
- Savoir échanger en Ajax avec jQuery
- Savoir construire une interface utilisateur avec jQuery UI
- Savoir construire un tableau de données avec Datatable
Prérequis:
Pratiquer HTML et CSS, avoir une première expérience en JavaScript, notions de jQuery (non obligatoire)
Public:
Webmasters, webdesigners, personnes impliquées dans un projet Application Web Personne en charge de la réalisation d'une application Web
Durée:
4 jours
Programme:
Présentation
- Organisation des pages Web
- JavaScript et jQuery dans le contexte du Web
Rappels jQuery
Les bases de jQuery
- Principe de jQuery
- Les sélecteurs, les méthodes
- Parcourir et manipuler le DOM
- Manipuler le CSS
- Gérer les évenements
Echanger avec jQuery
- Comment communiquer avec le serveur ?
- Principe Ajax : XMLHttpRequest et Asynchronous JavaScript And XML
- Les principales méthodes, les principaux paramètres
- Les échanges simplifiés
- Regrouper plusieurs requêtes avec l'objet Deferred
jQuery UI
Introduction
- Présentation de jQuery UI
- Télécharger et installer jQuery UI, Les CDNs
- Les interactions, les widgets, les effets
- Les thèmes
Créer une interface utilisateur
- Définir un thème (aspect des widgets) avec ThemeRoller
- Définir une mise en page
Insérer des widgets dans une interface utilisateur
- Présentation de quelques widgets
- Insérer des widgets "Tabs" et "Accordeon"
- Insérer des boutons aves icônes
- Insérer un effet tooltip
- Insérer une fenêtre "Boîte de dialogue"
Définir des interactions dans une interface utilisateur
- Insérer un effet Drag 'n Drop
- Sélectionner et réordonner une liste, les lignes d'un tableau
Plugin Datatable (Tableaux de données - DataGrid)
Introduction
- Présentation de Datatable - API 2014
- Télécharger et installer jQuery UI, Les CDNs
- Les ressources, les outils
Construire des tableaux de données
- Principe
- Définir les options
Placer les différents éléments
Installer un thème jQuery UI
Configurer les colonnes (largeur, classe, visible...)
Configurer la langue
Configurer la pagination
Charger des données en Ajax
- Les échanges avec le serveur
- Charger des données (PHP)
- Les fonctions de rappels
- Ajouter dynamiquement des boutons à chaque ligne
(Modifer, Supprimer)
Créer une application Web avec un DataGrid
- Définir l'organisation du projet
- Créer le layout du projet
- Créer un tableau de données avec Datatable (Datagrid)
associé à un formulaire pour ajouter/modifier des données - Créer un tableau de données HTML
avec la possibilité de réordonner les données