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