présentation de jquery ui
DESCRIPTION
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éTRANSCRIPT
Présentation de jQuery UI
Fabien Baligand
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
2
Dans jQuery UI, il y a jQuery
� jQuery est une bibliothèque javascript open-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é
� Sa communauté
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
3
jQuery UI : définition
jQuery UI est principalement une biblioth èque de widgets JS, utilisable avec votre propre charte graphique
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
4
jQuery UI : widgets
� Onglets
� Accordéon
� Bouton
� Calendrier
� Dialogue
� Auto-complétion
� Barre de progression
� Curseur
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
5
jQuery UI : widgets
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
6
� Code HTML :<input value="submit" type="submit">
� Code JAVASCRIPT :
$("input:submit").button();
jQuery UI : exemple (bouton )
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
7
jQuery UI : exemple (bouton )
� Résultat :
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
8
� 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();
jQuery UI : exemple (onglets )
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
9
� Résultat :
jQuery UI : exemple (onglets )
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
10
jQuery UI : th èmes
� 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
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
11
jQuery UI : définir son th ème
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
12
jQuery UI : interactions
� Plusieurs comportements peuvent être définis sur un composant HTML :
� Drag & Drop
� Redimensionnement
� Sélection (dans une liste de composants)
� Tri (dans une liste de composants)
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
13
jQuery UI : interactions (drag&drop )
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
14
jQuery UI : avantages
� 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