Présentation de jQuery UI

4,316 views

Published on

Une présentation de la bibliothèque de widgets JavaScript jQuery UI, permettant de réaliser facilement des applications RIA avec un thème personnalisé

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,316
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Présentation de jQuery UI

  1. 1. Présentation de jQuery UIFabien Baligand
  2. 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. 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 graphique3
  4. 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 progression4 Curseur
  5. 5. Cliquez pour ajouter un titre jQuery UI : widgets • Cliquez pour ajouter un plan5
  6. 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. 7. Cliquez pour ajouter un titre jQuery UI : exemple (bouton) • Cliquez pour ajouter un plan Résultat :7
  8. 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. 9. Cliquez pour ajouter un titre jQuery UI : exemple (onglets) • Cliquez pour ajouter un plan Résultat :9
  10. 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ées10
  11. 11. Cliquez pour ajouterthème jQuery UI : définir son un titre • Cliquez pour ajouter un plan11
  12. 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. 13. Cliquez pour ajouter un titre jQuery UI : interactions (drag&drop) • Cliquez pour ajouter un plan13
  14. 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 facilement14

×