JQuery mobile

jQuery Mobile - Patrick Grasseels

JQuery MobilePatrick Grasseels


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


IntroductionChapitre 1


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

http://jquerymobile.com/

http://jquerymobile.com/


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/







Framework CSS

Quatre parties importantes : Classes

Grid Layout

Responsive Grid

Theme

http://api.jquerymobile.com/classes/

http://api.jquerymobile.com/grid-layout/



http://api.jquerymobile.com/responsive-grid/

http://api.jquerymobile.com/responsive-grid/

http://api.jquerymobile.com/theme/


Framework CSS

Les classesDé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


Framework CSS

Documentation






Framework CSS

Les grid layoutDé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


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

More

ui-grid-a

ui-block-a

ui-grid-solo ui-block-

a


Framework CSS

Block A

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>

Block B Block C


Framework CSS

Documentation




Les elements UIChapitre 3


Les éléments UI

JQuery Mobile contient une bibliothèque de contrôle utilisateur riche et adapté au développement mobile et desktop

http://demos.jquerymobile.com/1.4.2/

http://demos.jquerymobile.com/1.4.2/


Les éléments UI

Contrôle de base :

Button

Button widget

Checkbox & Radio

Text inputs

Datepicker

Flip switch

Range slider

Select list


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 :

class="ui-btn"


Les éléments UI

Styliser un lien :

<a href="#" class="ui-btn">Anchor</a>

• Styliser un bouton :

<button class="ui-btn">Button</button>


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>


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>


Les éléments UI

• Checkbox & Radio :

La checkbox et le bouton radio sont deux composants pouvant avoir deux états :

Check & NotChecked


Les éléments UI


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 :


Les éléments UI

• Déclinaison du input text :

Search

Date

<input type="search" name="search-1" id="search-1" value="" />

<input type="date" data-clear-btn="true" name="date-2" id="date-2" value="">


Les éléments UI

• Déclinaison du input text :

Color

<input type="color" data-clear-btn="false" name="color-1" id="color-1" value="">


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:


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:


Les éléments UI

• Le range slider:

Le range slider permets de visuellement modifier une quantitée:


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:


Les éléments UI

Containers :

Collapsible

Tabs

Controlgroup

Grids

Page

Panel


Les éléments UI

Containers de données :

Listview

Table


Les éléments UI

Les barres:

Navbar

Toolbar


Les éléments UI

Les autres:

Loader

Popup

Icon


Les Data attributesChapitre 4


Les évènements JavaScriptChapitre 5


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/

http://api.jquerymobile.com/category/events/

Software

JQuery mobile