Présentation de jQuery UI
0 j'aime2,886 vues
jQuery UI est une bibliothèque de widgets JavaScript qui permet d'améliorer l'interaction utilisateur avec des éléments HTML, en offrant des widgets tels que des onglets, des boutons et des curseurs. Elle se distingue par sa compatibilité avec tous les navigateurs et sa facilité d'utilisation, tout en permettant des thèmes personnalisés. Les différentes interactions possibles incluent le drag & drop, le redimensionnement et le tri des composants.
Présentation de jQuery UI
- 1. Présentation de jQuery UI Fabien Baligand
- 2. Cliquez jQuery UI, il y a jQuery Dans pour ajouter un titre • Cliquez pour ajouter un plan javascript open- jQuery est une bibliothèque source très populaire qui permet : De manipuler le DOM HTML De réaliser des effets DHTML Ses forces : Une API simple à comprendre et à utiliser Ses sélecteurs puissants basés sur CSS Une bibliothèque compatible tous navigateurs Ses plugins à profusion, dont beaucoup de qualité 2 Sa communauté
- 3. Cliquez pour ajouter un titre jQuery UI : définition • Cliquez pour ajouter un plan jQuery UI est principalement une bibliothèque de widgets JS, utilisable avec votre propre charte graphique 3
- 4. Cliquez pour ajouter un titre jQuery UI : widgets • Cliquez pour ajouter un plan Onglets Accordéon Bouton Calendrier Dialogue Auto-complétion Barre de progression 4 Curseur
- 5. Cliquez pour ajouter un titre jQuery UI : widgets • Cliquez pour ajouter un plan 5
- 6. Cliquez pour ajouter un titre jQuery UI : exemple (bouton) • Cliquez pour ajouter un plan Code HTML : <input value="submit" type="submit"> Code JAVASCRIPT : $("input:submit").button(); 6
- 7. Cliquez pour ajouter un titre jQuery UI : exemple (bouton) • Cliquez pour ajouter un plan Résultat : 7
- 8. Cliquez pour ajouter un titre jQuery UI : exemple (onglets) • Cliquez pour ajouter un plan Code HTML : <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> </ul> <div id="tabs-1">contenu 1</div> <div id="tabs-2">contenu 2</div> <div id="tabs-3">contenu 3</div> </div> Code JAVASCRIPT : $("#tabs").tabs(); 8
- 9. Cliquez pour ajouter un titre jQuery UI : exemple (onglets) • Cliquez pour ajouter un plan Résultat : 9
- 10. Cliquez pour ajouter un titre jQuery UI : thèmes • Cliquez pour ajouter un plan 24 thèmes fournis Possibilité de définition rapide et facile d’un thème complètement personnalisé : Couleurs des fonds, bordures, textes et icônes Texture des fonds Polices Corner Radius Ombres portées 10
- 11. Cliquez pour ajouterthème jQuery UI : définir son un titre • Cliquez pour ajouter un plan 11
- 12. Cliquez pour ajouter un titre jQuery UI : interactions • Cliquez pour ajouter un planpeuvent être Plusieurs comportements définis sur un composant HTML : Drag & Drop Redimensionnement Sélection (dans une liste de composants) Tri (dans une liste de composants) 12
- 13. Cliquez pour ajouter un titre jQuery UI : interactions (drag&drop) • Cliquez pour ajouter un plan 13
- 14. Cliquez pour ajouter un titre jQuery UI : avantages • Cliquez pour ajouter un plan Code HTML simple Code Javascript simple Nombreuses possibilités de paramétrage Résultat visuel agréable et sobre Documentation complète avec de nombreux exemples Thèmes personnalisables facilement 14