JQuery mobile

1. JQuery Mobile
Patrick Grasseels
jQuery Mobile - Patrick Grasseels

2. Plan du cours
 Chapitre 1 : Introduction
 Chapitre 2 : Framework CSS
 Chapitre 3 : Les éléments UI
 Chapitre 4 : Les Data Attributes
 Chapitre 5 : Les évènements JavaScript
jQuery Mobile - Patrick Grasseels

3. Introduction
Chapitre 1
jQuery Mobile - Patrick Grasseels

4. Introduction
 JQuery Mobile qu’est-ce ?
 JQuery Mobile est un ensemble de contrôle utlisateur HTML,
conçu de façons responsive pour s’adapter a diverses types
d’appareils (smartphone, tablette, bureau)
 Il est aussi adapté pour les évènements tactile (Tap,
TapHold, etc …)
http://jquerymobile.com
jQuery Mobile - Patrick Grasseels

5. Framework CSS
 JQuery Mobile contient un Framework CSS avec bon nombre
de propriétés déjà définie.
 C’est un Framework customisable grâce au thème roller
disponible sur leur site.
http://themeroller.jquerymobile.com/
 Il est adapté de manière responsive (Grid, Layout, etc …)
http://api.jquerymobile.com/category/css-framework/
jQuery Mobile - Patrick Grasseels

6. Framework CSS
 Quatre parties importantes :
 Classes
 Grid Layout
 Responsive Grid
 Theme
jQuery Mobile - Patrick Grasseels

7. Framework CSS
Les classes
Définition des classes de base pour le style commun
Exemple:
Class Description
ui-corner-all Mets les coin en arrondis
ui-shadow Ajoute une ombre à l’éléments
ui-btn Indique que l’élément est un bouton
jQuery Mobile - Patrick Grasseels

8. Framework CSS
Documentation
http://api.jquerymobile.com/classes/
jQuery Mobile - Patrick Grasseels

9. Framework CSS
Les grid layout
Définition un layout divisible en plusieurs colonne, à
éviter sur les petits appareils hormis pour placer des
éléments horizontalement.
Exemple:
Class1 Description
ui-grid-a Deux colonnes
ui-grid-b Trois colonnes
ui-grid-c Quatre colonnes
ui-grid-d Cinq colonnes
jQuery Mobile - Patrick Grasseels

10. Framework CSS
<div class="ui-grid-a">
<div class="ui-block-a">
<button type="button" data-theme="a">Previous</button>
</div>
<div class="ui-block-b">
<button type="button" data-theme="a">Next</button>
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a">
<button type="button" data-theme="b">More</button>
</div>
</div>
Previous Next
jQuery Mobile - Patrick Grasseels
More
ui-grid-a
ui-block-a
ui-grid-solo
ui-block-a

11. Framework CSS
Block A
jQuery Mobile - Patrick Grasseels
ui-grid-b
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->
Block B Block C

12. Framework CSS
Documentation
http://api.jquerymobile.com/grid-layout/
jQuery Mobile - Patrick Grasseels

13. Les elements UI
Chapitre 3
jQuery Mobile - Patrick Grasseels

14. Les éléments UI
 JQuery Mobile contient une bibliothèque de contrôle
utilisateur riche et adapté au développement mobile et
desktop
jQuery Mobile - Patrick Grasseels
http://demos.jquerymobile.com/1.4.2/

15. Les éléments UI
 Contrôle de base :
 Button
 Button widget
 Checkbox & Radio
 Text inputs
 Datepicker
 Flip switch
 Range slider
 Select list
jQuery Mobile - Patrick Grasseels

16. Les éléments UI
 Le bouton :
Le bouton est l’élément de base permettant à
l’utilisateur d’interagir avec l’application
S’utilise sur les <button> et les <a>
Pour styliser sous forme de bouton :
jQuery Mobile - Patrick Grasseels
class="ui-btn"

17. Les éléments UI
 Styliser un lien :
<a href="#" class="ui-btn">Anchor</a>
• Styliser un bouton :
<button class="ui-btn">Button</button>
jQuery Mobile - Patrick Grasseels

18. Les éléments UI
 Déclinaison du bouton :
Coin
arrondis <a href="#" class="ui-btn ui-corner-all">Anchor</a>
Ombre
<a href="#" class="ui-btn ui-shadow">Anchor</a>
jQuery Mobile - Patrick Grasseels

19. Les éléments UI
 Le bouton widget :
Le bouton est l’élément de base permettant à l’utilisateur
d’interagir avec l’application s’utilise sur les <input>
Pour styliser sous forme de bouton :
<div class="ui-input-btn ui-btn ui-corner-all ui-shadow">
Input value
<input type="button" data-enhanced="true" value="Input value">
</div>
jQuery Mobile - Patrick Grasseels

20. Les éléments UI
• Checkbox & Radio :
La checkbox et le bouton radio sont deux
composants pouvant avoir deux états :
Check & NotChecked
jQuery Mobile - Patrick Grasseels

21. Les éléments UI
jQuery Mobile - Patrick Grasseels

22. Les éléments UI
• Le input text :
Le input de type text est utilisé dans les
formulaires pour récupéré les informations introduite
par l’utilisateur :
jQuery Mobile - Patrick Grasseels

23. Les éléments UI
• Déclinaison du input text :
Search
<input type="search" name="search-1" id="search-1" value="" />
Date
<input type="date" data-clear-btn="true" name="date-2" id="date-2" value="">
jQuery Mobile - Patrick Grasseels

24. Les éléments UI
• Déclinaison du input text :
Color
<input type="color" data-clear-btn="false" name="color-1" id="color-1" value="">
jQuery Mobile - Patrick Grasseels

25. Les éléments UI
• Le datepicker:
Le datepicker offre un widget de selection de date
plus approprié, c’est un élément JQuery UI avec une
surcouche de JQuery Mobile:
jQuery Mobile - Patrick Grasseels

26. Les éléments UI
• Le flipswitch:
Le flipswitch offre la possibilité d’un état true ou
false, il permet de traiter facilement les booléen:
jQuery Mobile - Patrick Grasseels

27. Les éléments UI
• Le range slider:
Le range slider permets de visuellement modifier
une quantitée:
jQuery Mobile - Patrick Grasseels

28. Les éléments UI
• La select list:
La select list organise les éléments de manière
ordonnée ou non, elle inclut également une système de
filtre:
jQuery Mobile - Patrick Grasseels

29. Les éléments UI
 Containers :
 Collapsible
 Tabs
 Controlgroup
 Grids
 Page
 Panel
jQuery Mobile - Patrick Grasseels

30. Les éléments UI
 Containers de données :
 Listview
 Table
jQuery Mobile - Patrick Grasseels

31. Les éléments UI
 Les barres:
 Navbar
 Toolbar
jQuery Mobile - Patrick Grasseels

32. Les éléments UI
 Les autres:
 Loader
 Popup
 Icon
jQuery Mobile - Patrick Grasseels

33. Les Data attributes
Chapitre 4
jQuery Mobile - Patrick Grasseels

34. Les évènements JavaScript
Chapitre 5
jQuery Mobile - Patrick Grasseels

35. Les évènements JavaScript
 JQuery Mobile définis des évènements JavaScript
intéressant pour le développement mobile.
http://api.jquerymobile.com/category/events/
jQuery Mobile - Patrick Grasseels