JQuery mobile

828 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
828
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
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

×