Présentation de jQuery UI

  • 3,425 views
Uploaded 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é

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é

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,425
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
32
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Présentation de jQuery UIFabien 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 graphique3
  • 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. Cliquez pour ajouter un titre jQuery UI : widgets • Cliquez pour ajouter un plan5
  • 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ées10
  • 11. Cliquez pour ajouterthème jQuery UI : définir son un titre • Cliquez pour ajouter un plan11
  • 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 plan13
  • 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