Présentation de jQuery UI
-
Upload
fabien-baligand -
Category
Technology
-
view
4.045 -
download
7
description
Transcript of Présentation de jQuery UI
![Page 1: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/1.jpg)
Présentation de jQuery UI
Fabien Baligand
![Page 2: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/2.jpg)
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é
![Page 3: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/3.jpg)
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
![Page 4: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/4.jpg)
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
![Page 5: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/5.jpg)
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
5
jQuery UI : widgets
![Page 6: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/6.jpg)
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 )
![Page 7: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/7.jpg)
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
7
jQuery UI : exemple (bouton )
� Résultat :
![Page 8: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/8.jpg)
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 )
![Page 9: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/9.jpg)
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
9
� Résultat :
jQuery UI : exemple (onglets )
![Page 10: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/10.jpg)
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
![Page 11: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/11.jpg)
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
11
jQuery UI : définir son th ème
![Page 12: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/12.jpg)
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)
![Page 13: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/13.jpg)
Cliquez pour ajouter un titre
• Cliquez pour ajouter un plan
13
jQuery UI : interactions (drag&drop )
![Page 14: Présentation de jQuery UI](https://reader033.fdocuments.net/reader033/viewer/2022050804/547b1022b37959532b8b4cba/html5/thumbnails/14.jpg)
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