Présentation de jQuery UI
-
Upload
fabien-baligand -
Category
Technology
-
view
4.040 -
download
7
description
Transcript of Présentation de jQuery UI
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