Aller au contenu

Découvrez le potentiel du Framework JavaScript jQuery UI

Voici une nouvelle série de cours dans lesquels je vous propose d’apprendre à utiliser le potentiel du Framework JavaScript jQuery UI.

jQuery est un framework JavaScript libre et Open Source, installé côté client. jQuery UI (UI pour User Interface) est un plugin complémentaire à jQuery.

Query UI propose de nombreux widgets pour enrichir l’interface de vos 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.

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 est dans la formation ci-dessous :

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Découvrez le potentiel du Framework JavaScript jQuery UI

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours, dans cette nouvelle série vous allez apprendre à utiliser le Framework jQuery UI, qu’est-ce que c’est que ce Framework ?
Enfaite, c’est tout simplement un plug-in, extension du Framework jQuery donc, rappelez-vous dans les cours précédents, vous avez appris à utiliser le Framework jQuery, vous en connaissez pas mal, sur ce Framework.

Présentation

Là on va aller un peu plus loin, vous allez apprendre à créer des interfaces pour votre site Internet, mais en quelques lignes de code seulement, qui soient très interactives avec vos utilisateurs et en même temps très joli graphiquement. Donc vous savez ce que c’est jQuery, c’est un Framework JavaScript libre et open source, installé côté client, donc côté internaute, et jQuery UI c’est un plugg-in complémentaire. JQuery UI propose de nombreux widgets comme les fenêtres de dialogue, les infos bulles, les boutons, des calendriers, des menus avec onglets, et le glisser déposer comme drag and drop, le redimensionnement, la réorganisation des éléments, etc.
Et jQuery UI intègre les nouvelles balises HTML 5 et l’avantage de ce Framework, c’est qu’il est compatible avec la majorité des navigateurs que ce soit sur tablette, Smartphone, ordinateur portable, ordinateur tout court. Il y a également des curseurs, des calendriers, des barres de progressions, des compteurs numériques, des formulaires d’autosuggestions etc.

Et jQuery UI intègre également une multitude d’animations, ça va être très facile de faire des animations avec des rebondissements, des déplacements, des explosions, il y a tout un tas d’apparitions progressives fadeIn, fadeOut, une disparition progressive, tout un tas d’animations très sympas, que vous allez découvrir avec le Framework jQuery UI.

Installation

Comment on l’installe ?
Vous vous rendez sur le site Internet jqueryui.com, vous avez l’URL ici, sur votre écran, vous ajoutez ce code dans votre page HTML, le Framework jQuery et le Framework jQuery UI, ou c’est ce que je vous conseille, c’est d’utiliser un PDN ou les Google Hosted Librairies, ça permet un changement plus rapide, plus optimisé, si d’autres sites ont déjà chargé cette librairie, l’internaute qui vient sur votre site aura déjà la librairie dans le cache de son navigateur, c’est vraiment très pratique, là je vous ai mis les URL à utiliser pour utiliser l’API Google qui est chargée beaucoup plus rapidement. Le Framework jQuery, Framework jQuery UI et le thème du Framework jQuery UI, vous avez tout ici sur le côté.

Utilisation

Comment s’utilise jQuery UI ?
C’est comme jQuery il suffit d’utiliser le signe $ avant les éléments et vous pouvez ainsi accéder directement à vos éléments, pour charger les éléments du DOM dès qu’ils sont disponibles, bien avant le chargement de la page, vous utilisez document.ready, comme vous allez voir dans les différents exemples.

Exemple d’application

Je vais vous montrer un exemple de code source, c’est vraiment pour que vous puissiez voir toutes les possibilités du Framework jQuery UI, après dans les cours suivants on va rentrer beaucoup plus dans le détail. C’est parti !
Alors, le code source comme je vous l’ai expliqué, ici, moi je le charge en local parce que c’est plus simple pour vous faire les démonstrations en vidéo, donc chargement local du thème de jQuery et de jQuery UI, en fait on appelle $ la balise donc l’Id, il doit y avoir un Id accordion quelque part, ici, une balise qui s’appelle accordion avec le contenu des différents onglets si on peut dire, dans un accordion et voilà .accordion, on appelle la méthode .accordion pour créer un menu accordion comme vous connaissez sûrement. Et c’est pareil pour tout le reste, vous pouvez créer des listes et les compléter entièrement avec le code JavaScript, c’est vraiment génial, si vous souhaitez devenir développeur professionnel pour créer des applications performantes c’est très pratique de rendre votre code entièrement dynamique et de remplir les éléments soit avec le JavaScript, soit en appelant un fichier PHP, et jQuery le permet.
Là vous avez tout un tas, c’est la page de démonstration de toutes les possibilités d’un thème jQuery, je ne vais pas rentrer dans le détail tout de suite, je vous montre juste un peu à quoi ça ressemble, comme ça, vous pourrez vous faire une idée de ce que vous allez pouvoir faire avec le Framework jQuery. L’accordion, l’auto complète, voilà, ça va vous afficher des possibilités en fonction des touches que vous tapez sur votre clavier, un bouton, des choix, soit checkbox radio bouton, que vous pouvez utiliser, système d’onglets, très pratique pour afficher plusieurs informations de manière utiles et qui prennent pas beaucoup de place à votre utilisateur, une boîte de dialogue, ça remplace la fameuse alerte JavaScript, elle est beaucoup plus jolie, vous pouvez la déplacer également, l’effet shadow, masquer l’arrière-plan lorsque vous ouvrez une pop-up dans une page, les différentes icônes disponibles avec ce thème-là, le fameux calendrier, les barres de sélection, les barres de progression, et les différentes d’erreurs.

Le Framework jQuery, vous vous rendez sur le site jqueryui.com, et vous téléchargez la dernière version, la table ou vous pouvez vous faire un téléchargement personnalisé avec moins d’effets, vous choisissez les effets dont vous avez besoin, comme ça il sera beaucoup plus léger à charger et là vous avez les différents thèmes, avec une galerie, ça vous permet de voir à quoi ressemble les différents thèmes et cela ou vous allez pouvoir personnaliser le thème aux couleurs de votre site, il suffit de changer ici, de prendre des éléments, et de changer la couleur pour voir en direct votre thème, le créer.
Voilà tous les éléments une fois que vous avez créé votre thème, vous le téléchargez, voilà, vous avez ici, download, vous pouvez lui donner un nom, là ça va être thème de formation et vous le téléchargez. Et vous avez l’API qui est malheureusement tout en anglais, mais je vais vous donner plusieurs cours sur jQuery UI pour voir tout en détail.

Votre plan d’actions !

Maintenant c’est parti, c’est à vous de jouer pour améliorer le rendu graphique de votre site Internet HTML5, grâce à jQuery UI, vous allez voir, une fois qu’on a compris son principe de fonctionnement il est très simple à utiliser, je vous dis à très bientôt dans le prochain cours sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple jQuery UI

Et voici le code source commenté du cours.

Téléchargement du code source Les widgets jQuery UI

Cliquez ici pour télécharger le code source Les widgets jQuery UI

Voici plusieurs liens complémentaires :

Montrez-moi vos sites jQuery UI

Utilisez les commentaires pour partager vos applications web conçues avec jQuery UI.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>