Ce livre sur jQuery UI détaille les possibilités offertes aux développeurs pour améliorer grandement l’interface visuelle de leurs applications web. Les nombreux widgets proposés par jQuery UI sont utilisables facilement et personnalisables avec un système d’options de configuration. Leurs méthodes et événements spécifiques peuvent également être exploités pour l’enrichissement de l’interface.
Présentation
L’auteur effectue un bref récapitulatif sur HTML5. Puis il présente les différentes API JavaScript traitées dans cet ouvrage ainsi que les API en cours de développement.
L’auteur termine cette présentation avec des outils conseillés comme des éditeurs de code et des logiciels de debug.
Introduction à jQuery UI
L’auteur commence par une introduction au Framework JavaScript jQuery UI.
jQuery UI (UI pour User Interface) propose de nombreux widgets pour enrichir l’interface de vos pages ou applications HTML comme :
les fenêtres de dialogue
les infobulles
les menus en accordéon
les menus avec onglets
les boutons
le glisser et le déposer (drag / drop)
le redimensionnement
la réorganisation des éléments
Et en plus, jQuery UI intègre également les nouvelles balises du HTML5 avec :
les curseurs
les calendriers
les barres de progression
les compteurs numériques
les formulaires avec suggestion
À tout cela, s’ajoute une multitude d’animations jQuery, des plus simples comme le glissement ou l’apparition progressive, aux plus complexes, comme par exemple l’explosion en plusieurs parties d’un élément.
jQuery UI est une extension du framework jQuery dédiée à l’interface de vos applications web. Puis l’auteur vous explique comme installer le Framework jQuery UI soit par un CDN pour hébergé sur votre site web.
Ensuite, vous avez un paragraphe avec un aperçu des différents thèmes jQuery UI : UI lightness, UI darkness, Smoothness, Redmond, Sunny, Overcast, Le Frog, Flick, Pepper Grinder, Eggplant, Dark Hive, Cupertino, South Street, Blitzer, Humanity, Hot Sneaks, Excite Bike, Vader, Dot Luv, Mint Choc, Black Tie, Trontastic, Swanky Purse.
Puis très simplement, vous allez créer votre première application avec jQuery UI. jQuery UI propose également plusieurs icônes pour les widgets widgets.
Les essentiels de jQuery
L’auteur vous montre comment installer rapidement jQuery UI dans vos applications web.
Et ensuite, c’est parti pour apprendre les bases de l’utilisation de jQuery UI avec un rappel sur le framework jQuery.
Puis, vous allez découvrir un des aspects le plus important du framework jQuery : les sélecteurs. Vous apprendrez ensuite à manipuler les attributs, manipuler les feuilles de style CSS.
L’auteur passe en revue les événements jQuery UI. Le framework jQuery fournit aux développeurs des gestionnaires d’événements proche du JavaScript : click(), dblclick(), focus(), blur(), scroll(), mouseup(), mousedown(), mousemove(), mouseover(), mouseout(), mouseenter(), mouseleave(), hover(), submit(), change(), resize(), select(), load(), unload(), etc.
jQuery propose aussi des effets et animations qui, apportent un vrai plus à vos applications web.
jQuery reprend la navigation dans la structure du DOM avec le système d’éléments parent, enfant, frère, etc.
Plusieurs méthodes permettent de trouver les enfants (children()), le parent direct (parent()), tous les parents (parents()), tous les frères (siblings()), le frère précédent (prev()), les frères précédents (prevAll()), le frère suivant (next()), les frères suivants (nextAll()), le contenu d’un nœud (content()). Avec jQuery UI, vous saurez manipuler facilement les éléments du DOM.
Et enfin, jQuery a énormément simplifié l’utilisation de Ajax. XMLHttpRequest.
Le menu avec onglets
Dans cette partie, l’auteur vous apprend comment créer et utiliser dans les moindres détails le menu à onglets.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Redimensionner les onglets
Définir l’onglet par défaut
Désactiver un onglet
Refermer le contenu des onglets
Ajuster la hauteur du contenu
Ouvrir un onglet au survol de la souris
Gérer les événements
Charger un contenu par un fichier externe via AJAX
Animer un onglet
Personnaliser le style des onglets
Le menu en accordéon
Dans cette partie, l’auteur vous apprend comment créer et utiliser le menu accordéon et accordion !
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Modifier la taille des caractères
Présenter l’accordéon en position refermée
Modifier l’item ouvert par défaut
Personnaliser les icônes
Changer la hauteur allouée par défaut au contenu
Ouvrir un item au survol de la souris
Gérer les événements
Charger le contenu des items via Ajax
Animer l’accordéon
Personnaliser le style des boutons accordéons
Les calendriers
Dans cette partie, l’auteur vous donne toutes les clés pour utiliser et personnaliser le widget calendrier.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Modifier la taille du calendrier
Convertir le calendrier dans une autre langue
Ajouter une barre de boutons
Afficher les jours des autres mois
Afficher plusieurs mois
Présenter un calendrier statique
Afficher le calendrier dans une fenêtre de dialogue
Ouvrir le calendrier par une icône
Afficher les mois et années sous forme de menu
Choisir le format de date
Limiter les dates sélectionnables (minimum et maximum)
Présélectionner une date par défaut
Fixer une date de début et une date de fin
Exclure certaines dates
Ajouter les semaines de l’année
Associer le calendrier avec Ajax
Animer les calendriers
Personnaliser le style des calendriers
Les fenêtres de dialogue
Dans cette partie, l’auteur vous donne tout ce dont vous avez besoin avec le widget Pop Up ou la création de boite de dialogue : les alert() 2.0 !
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Modifier la barre de titre
Positionner la fenêtre de dialogue
Dimensionner la fenêtre de dialogue
Ajouter des boutons
Bloquer la page sous-jacente à l’affichage
Confirmer la fermeture
Afficher à partir d’un bouton
Gérer les événements
Ajouter une image à la fenêtre de dialogue
Insérer du contenu avec Ajax
Animer les fenêtres de dialogue
Personnaliser le style des fenêtres de dialogue.
Les boutons
Cette fois, l’auteur vous apprend comment utiliser un élément indispensable et présent tous les sites web : les boutons.
Les boutons font partis des éléments les plus facilement modifiables par CSS3, avec les bords ronds, les dégradés et d’ombre. Mais CSS3 n’est pas encore reconnu par tous les navigateurs web.
jQuery UI rend vos boutons compatibles avec la très grande majorité des navigateurs web et ils possèdent les mêmes propriétés de style.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Modifier la taille des boutons
Ajouter des icônes aux boutons
Afficher de nouveaux boutons radio
Afficher de nouveaux boutons checkbox
Sélectionner/désélectionner tous les boutons
Personnaliser le style des boutons
Les infobulles
Dans cette partie, l’auteur vous apprend comment utiliser les infosbulles.
Une bulles d’informations apporte simplement un complément d’information très appréciable pour l’internaute.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Ajuster la taille des infobulles
Positionner les infobulles
Personnaliser le contenu avec du HTML
Laisser l’infobulle suivre le curseur de la souris
Gérer les événements
Charger le contenu avec Ajax
Animer les infobulles
Personnaliser le style des infobulles
Les curseurs
Dans cette partie, l’auteur vous apprend comment utiliser les fameux curseurs.
Les curseurs, nouveauté HTML5 (<input type= »range »>), permettent à l’utilisateur de déterminer une valeur numérique de façon très intuitive.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Déterminer une valeur par défaut
Afficher la valeur associée au curseur
Déterminer une valeur minimale et une valeur maximale
Fixer un pas de progression pour le curseur
Afficher un double curseur
Afficher un curseur vertical
Ajuster l’opacité d’une image avec un curseur
Ajuster la taille des caractères avec un curseur
Gérer les événements
Personnaliser le style des curseurs
La barre de progression
Dans cette partie, l’auteur vous apprend comment ajouter des barres de progression type « chargement en cours… » dans vos applications web. Très utile pendant le chargement de contenu via la technologie AJAX par exemple.
La barre de progression permet à l’internaute de visualiser l’état d’avancement d’une tâche comme le transfert d’un fichier ou l’installation d’un logiciel. Il s’agit d’un excellent retour visuel pour l’utilisateur.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Définir une valeur par défaut
Incrémenter une barre de progression
Afficher la valeur de la progression
Déclencher une action à la fin de la progression
Personnaliser le style des barres de progression
Le formulaire auto suggest
Dans cette partie, l’auteur vous apprend comment créer des formulaires avec des propositions de suggestions, comme le moteur de recherche Google 😉
Ce type de formulaires fournit des suggestions dès que l’utilisateur tape une ou plusieurs lettres. L’utilisateur n’a plus qu’à choisir la suggestion au lieu d’écrire le mot entièrement.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Permettre l’encodage de plusieurs lettres d’appel
Trier les suggestions par ordre alphabétique
Positionner la liste de suggestions
Afficher la liste des suggestions à l’ouverture de la page
Afficher la liste des suggestions au focus
Présenter les suggestions sous forme déroulante
Fixer une largeur de la liste de sélection
Gérer des événements liés à la liste de sélection
Charger les suggestions sous forme de fichier externe
Animer la liste de suggestions
Personnaliser le style des formulaires auto-suggest
Les compteurs numériques
Dans cette partie, l’auteur vous apprend comment utiliser simplement les compteurs numériques.
Les compteurs numériques font également partis des nouveautés HTML5 avec la balise <input type= »number »>.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Fixer une valeur maximale et une valeur minimale
Utiliser la roulette de la souris
Fixer une valeur de départ
Récupérer la valeur retenue
Traiter les chiffres avec une décimale
Ajouter le signe des devises aux valeurs
Appliquer les compteurs à Google Maps
Personnaliser le style des compteurs numériques
Les éléments redimensionnables
Dans cette partie, l’auteur vous apprend comment rendre rapidement des éléments HTML redimensionnables par l’utilisateur.
Avec jQuery UI, le redimensionnement peut s’appliquer à la plupart des éléments du HTML : <div>, <p>, <textarea>, <img>, etc.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Redimensionner simultanément deux éléments
Limiter le redimensionnement
Créer un guide durant le redimensionnement
Agrandir de façon proportionnelle
Redimensionner les zones de texte
Animer le redimensionnement
Personnaliser le style du redimensionnement
Le glisser du glisser/déposer
Dans cette partie, l’auteur vous apprend comment utiliser tout le potentiel du glisser / déposer.
Le drag/drop est présent partout dans les pages web :par exemple les sites ecommerce où vous pouvez déplacer avec la souris l’image de l’article choisi pour la transférer dans le panier de la commande.
jQuery UI sépare ces opérations avec une librairie pour le mouvement de l’objet (draggable) et une autre pour le dépôt de l’item déplacé (droppable).
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Personnaliser le curseur
Visualiser l’élément durant le déplacement
Dupliquer l’élément déplaçable
Glissement horizontal ou vertical
Faire revenir l’élément à sa position initiale
Prévoir des assistants pour le déplacement
Gérer les événements
Le déposer du glisser/déposer
Et voici la suite de la partie précédente sur le glisser / déposer.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Modifier l’aspect de la zone de dépôt
Confirmer le dépôt d’un élément
Sélectionner les éléments déposables
Prévoir une tolérance pour le dépôt
Faire revenir l’élément déposé à sa position initiale
Gérer les événements
Appliquer le glisser/déposer à une boutique en ligne
La réorganisation d’éléments
Dans cette partie complète à merveille le glisser / déposer avec l’organisation des éléments.
Le déplacement des éléments pour les insérer ailleurs dans la page est largement présent dans les applications web modernes. jQuery UI reprend des fonctionnalités du déplacement d’éléments et du glisser/déposer pour les améliorer et les simplifier.
Vous découvrirez les options, les méthodes et les événements associés.
Vous saurez entre autres :
Améliorer l’aspect des éléments ré-organisables
Suggérer la réorganisation par une icône
Appliquer quelques options
Mettre en évidence l’item déplacé
Prévoir une zone pour déposer un item
Exclure des éléments de la réorganisation
Réorganiser entre plusieurs listes
Gérer les événements
Retrouver la nouvelle position d’un élément
Retrouver le nouvel ordre de la liste
Personnaliser le style des éléments ré-organisables
Les animations et effets visuels
Dans cette partie, l’auteur vous détaille la liste des animations jQuery UI et comment les implémenter dans vos applications web.
Le framework jQuery possède énormément d’animations riches et variées, comme :
fadeIn
fadeOut
fadeTo
fadeToggle
hide
show
slideDown
slideToggle
slideUp
toggle
Le framework jQuery UI apporte des animations spécifiques encore plus élaborées, comme :
blind
bounce
clip
drop
explode
fade
fold
highlight
puff
pulsate
scale
shake
size
slide
transfer
L’easing détermine le déroulement de l’animation.
Plusieurs scénarios existent pour une animation :
Se dérouler de façon linéaire avec une vitesse constante du début à la fin.
Démarrer lentement pour se terminer à toute allure.
Débuter lentement, prendre de la vitesse avant de terminer tout en douceur.
Aller de plus en plus rapidement.
Démarrer avec un effet d’élastique.
Rebondir plusieurs fois à la fin de son déplacement.
jQuery UI vous permet aussi de modifier les classes CSS, d’animer les propriétés de couleur des éléments et de réaliser des transitions entre les pages web.
Personnaliser le graphisme de jQuery UI
Dans la dernière partie, vous aurez en main toutes les ressources nécessaires pour personnaliser complètement le graphisme de jQuery UI.
Ce livre conviendra parfaitement aux développeurs confirmés en développement HTML5 / JavaScript qui souhaitent créer des applications web possédant des interfaces visuelles très sympas.
Les différentes fonctionnalités de jQuery UI sont très détaillées avec de nombreux exemples de code. Ce livre très complet, vous permet d’aller droit au but pour utiliser rapidement le potentiel de jQuery UI.
De plus, tous les exemples cités dans le livre sont en téléchargement sur le site www.editions-eni.fr.
Cependant, certains exemples de code sont obsolètes et ne fonctionnent plus, ce qui est vraiment dommage.
