jQuery UI (User Interface) est une librairie de composants prêt à l'emploi permettant aux développeurs d'ajouter des effets visuels, des interactions et des widgets en quelques lignes.
jQuery UI est développé par la communauté. Il fait partie du projet jQuery.org.
Les widgets sont conçus pour être paramétrables au niveau du style et du comportement. Ils peuvent être installés indépendamment les uns des autres.
Un des grands avantages de jQuery UI est qu'il fonctionne de la même manière sur tous les navigateurs.
| Fonction | Description |
|---|---|
| Draggable | Autorise les éléments devant être déplacés à l'aide de la souris |
| Droppable | Crée des cibles pour Draggable |
| Resizable | Modifie la taille d'un élément à l'aide de la souris |
| Selectable | Utilise la souris pour sélectionner les éléments individuellement ou en groupe |
| Sortable | Réorganise les éléments d'une liste ou d'une grille à l'aide de la souris |
| Fonction | Description |
|---|---|
| Accordion | Plie/déplie des éléments de contenu pour la présentation d'informations dans un espace limité |
| Autocomplete | Permet aux utilisateurs de choisir parmi une liste pré-remplie de valeurs en s'appuyant sur la recherche et le filtrage |
| Button | Améliore l'aspect visuel et ajoute des classes suivant les états |
| Datepicker | Permet d'afficher un calendrier et de sélectionner une date |
| Dialog | Affiche une boite de dialogue 'popin' |
| Menu | Menu avec des interactions à la souris et au clavier |
| Progressbar | Affiche une progress-bar |
| Selectmenu | Affiche un élément select avec des options avancées |
| Slider | Afficher un élément similaire à un input range |
| Spinner | Améliore le champ input text en lui ajoutant des boutons permettant d'ajouter ou de diminuer une valeur |
| Tabs | Affiche une zone de contenu unique, avec un menu filtrant la partie du contenu à afficher |
| Tooltip | Affiche des info-bulles personnalisables |
| Fonction | Description |
|---|---|
| Class | Ajoute des classes en animant le contenu |
| Color Animation | Anime le changement de couleur |
| Easing | Ajoute de l'accélération aux animations |
| Effect | Ajoute de nouvelles animations |
| Hide | Cache les éléments avec une animation |
| Remove Class | Supprime des classes en animant le contenu, et ajoute une autre classe |
| Show | Affiche les éléments avec une animation |
| Switch Class | Ajoute/supprime des classes en animant le contenu |
| Toggle | Affiche/cache les éléments avec une animation |
| Toggle Class | Ajoute/supprime des classes en animant le contenu |
| Fonction | Description |
|---|---|
| Position | Positionne un élément par rapport à la fenêtre, le document, un autre élément ou le curseur. |
| Widget Factory | Créer des plugins jQuery avec état utilisant la même abstraction que tous les widgets jQuery UI. |
Url : http://jqueryui.com/themeroller/
À la différence de jQuery, jQuery UI propose des éléments d'interface ayant besoin d'une couche graphique. Cet aspect visuel est pris en compte à travers un thème CSS paramétrable et personnalisable.