JQuery Mobile 
Patrick Grasseels 
jQuery Mobile - Patrick Grasseels
Plan du cours 
 Chapitre 1 : Introduction 
 Chapitre 2 : Framework CSS 
 Chapitre 3 : Les éléments UI 
 Chapitre 4 : L...
Introduction 
Chapitre 1 
jQuery Mobile - Patrick Grasseels
Introduction 
 JQuery Mobile qu’est-ce ? 
 JQuery Mobile est un ensemble de contrôle utlisateur HTML, 
conçu de façons r...
Framework CSS 
 JQuery Mobile contient un Framework CSS avec bon nombre 
de propriétés déjà définie. 
 C’est un Framewor...
Framework CSS 
 Quatre parties importantes : 
 Classes 
 Grid Layout 
 Responsive Grid 
 Theme 
jQuery Mobile - Patri...
Framework CSS 
Les classes 
Définition des classes de base pour le style commun 
Exemple: 
Class Description 
ui-corner-al...
Framework CSS 
Documentation 
http://api.jquerymobile.com/classes/ 
jQuery Mobile - Patrick Grasseels
Framework CSS 
Les grid layout 
Définition un layout divisible en plusieurs colonne, à 
éviter sur les petits appareils ho...
Framework CSS 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<button type="button" data-theme="a">Previous</button> 
...
Framework CSS 
Block A 
jQuery Mobile - Patrick Grasseels 
ui-grid-b 
<div class="ui-grid-b"> 
<div class="ui-block-a">Blo...
Framework CSS 
Documentation 
http://api.jquerymobile.com/grid-layout/ 
jQuery Mobile - Patrick Grasseels
Les elements UI 
Chapitre 3 
jQuery Mobile - Patrick Grasseels
Les éléments UI 
 JQuery Mobile contient une bibliothèque de contrôle 
utilisateur riche et adapté au développement mobil...
Les éléments UI 
 Contrôle de base : 
 Button 
 Button widget 
 Checkbox & Radio 
 Text inputs 
 Datepicker 
 Flip ...
Les éléments UI 
 Le bouton : 
Le bouton est l’élément de base permettant à 
l’utilisateur d’interagir avec l’application...
Les éléments UI 
 Styliser un lien : 
<a href="#" class="ui-btn">Anchor</a> 
• Styliser un bouton : 
<button class="ui-bt...
Les éléments UI 
 Déclinaison du bouton : 
Coin 
arrondis <a href="#" class="ui-btn ui-corner-all">Anchor</a> 
Ombre 
<a ...
Les éléments UI 
 Le bouton widget : 
Le bouton est l’élément de base permettant à l’utilisateur 
d’interagir avec l’appl...
Les éléments UI 
• Checkbox & Radio : 
La checkbox et le bouton radio sont deux 
composants pouvant avoir deux états : 
Ch...
Les éléments UI 
jQuery Mobile - Patrick Grasseels
Les éléments UI 
• Le input text : 
Le input de type text est utilisé dans les 
formulaires pour récupéré les informations...
Les éléments UI 
• Déclinaison du input text : 
Search 
<input type="search" name="search-1" id="search-1" value="" /> 
Da...
Les éléments UI 
• Déclinaison du input text : 
Color 
<input type="color" data-clear-btn="false" name="color-1" id="color...
Les éléments UI 
• Le datepicker: 
Le datepicker offre un widget de selection de date 
plus approprié, c’est un élément JQ...
Les éléments UI 
• Le flipswitch: 
Le flipswitch offre la possibilité d’un état true ou 
false, il permet de traiter facil...
Les éléments UI 
• Le range slider: 
Le range slider permets de visuellement modifier 
une quantitée: 
jQuery Mobile - Pat...
Les éléments UI 
• La select list: 
La select list organise les éléments de manière 
ordonnée ou non, elle inclut égalemen...
Les éléments UI 
 Containers : 
 Collapsible 
 Tabs 
 Controlgroup 
 Grids 
 Page 
 Panel 
jQuery Mobile - Patrick ...
Les éléments UI 
 Containers de données : 
 Listview 
 Table 
jQuery Mobile - Patrick Grasseels
Les éléments UI 
 Les barres: 
 Navbar 
 Toolbar 
jQuery Mobile - Patrick Grasseels
Les éléments UI 
 Les autres: 
 Loader 
 Popup 
 Icon 
jQuery Mobile - Patrick Grasseels
Les Data attributes 
Chapitre 4 
jQuery Mobile - Patrick Grasseels
Les évènements JavaScript 
Chapitre 5 
jQuery Mobile - Patrick Grasseels
Les évènements JavaScript 
 JQuery Mobile définis des évènements JavaScript 
intéressant pour le développement mobile. 
h...
Prochain SlideShare
Chargement dans…5
×

JQuery mobile

784 vues

Publié le

JQuery mobile

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
784
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
33
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

JQuery mobile

  1. 1. JQuery Mobile Patrick Grasseels jQuery Mobile - Patrick Grasseels
  2. 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. 3. Introduction Chapitre 1 jQuery Mobile - Patrick Grasseels
  4. 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. 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. 6. Framework CSS  Quatre parties importantes :  Classes  Grid Layout  Responsive Grid  Theme jQuery Mobile - Patrick Grasseels
  7. 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. 8. Framework CSS Documentation http://api.jquerymobile.com/classes/ jQuery Mobile - Patrick Grasseels
  9. 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. 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. 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. 12. Framework CSS Documentation http://api.jquerymobile.com/grid-layout/ jQuery Mobile - Patrick Grasseels
  13. 13. Les elements UI Chapitre 3 jQuery Mobile - Patrick Grasseels
  14. 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. 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. 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. 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. 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. 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. 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. 21. Les éléments UI jQuery Mobile - Patrick Grasseels
  22. 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. 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. 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. 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. 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. 27. Les éléments UI • Le range slider: Le range slider permets de visuellement modifier une quantitée: jQuery Mobile - Patrick Grasseels
  28. 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. 29. Les éléments UI  Containers :  Collapsible  Tabs  Controlgroup  Grids  Page  Panel jQuery Mobile - Patrick Grasseels
  30. 30. Les éléments UI  Containers de données :  Listview  Table jQuery Mobile - Patrick Grasseels
  31. 31. Les éléments UI  Les barres:  Navbar  Toolbar jQuery Mobile - Patrick Grasseels
  32. 32. Les éléments UI  Les autres:  Loader  Popup  Icon jQuery Mobile - Patrick Grasseels
  33. 33. Les Data attributes Chapitre 4 jQuery Mobile - Patrick Grasseels
  34. 34. Les évènements JavaScript Chapitre 5 jQuery Mobile - Patrick Grasseels
  35. 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

×