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é

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