Présentation de jQuery UI

4 275 vues

Publié le

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é

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
4 275
Sur SlideShare
0
Issues des intégrations
0
Intégrations
22
Actions
Partages
0
Téléchargements
50
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×