Cours JQuery

Cours JQuery pas a pas comment ca marche


Télécharger Cours JQuery pas a pas comment ca marche

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Cours JQuery pas à pas comment ça marche

le pli ne doit être ouvert que par le président de la commission d’appel d’offres lors de la séance d’examen des offres1.1 .  jQuery au cœur de l'internet Mobile

Pour le dire de façon sommaire, jQuery Mobile est une outil logiciel qui fonctionne de manière transparente sur toutes les plate-formes mobiles du moment. Aussi riche que sa parente jQuery, dont la renommée n'est plus à faire auprès des développeurs web, jQuery Mobile est la bibliothèque JavaScript la plus adaptée pour créer des sites web à destination des smartphones et tablettes tactiles.

Avec ses presque 1,2 Milliards d'utilisateurs, soit environ 17 % de la population mondiale, l'internet mobile continu de croître de façon considérable. On estime, grâce à un sondage de Médiamétrie, qu'en 2012 la moitié de la population française y sera connectée. La grande diversités des écrans de terminaux mobiles est devenue un véritable casse-tête pour les développeurs de sites web mobiles, soucieux de ne pas rater le passage à l'ère du tout mobile.

Grâce à jQuery Mobile, il est désormais facile de créer des sites et applications web performantes, qui s'adaptent à tous les types d'interfaces. Aujourd'hui en version 1.0, jQuery Mobile est déjà déclarée "Innovation de l'année" par les .Net Awards ! Qu'il s'agisse des fenêtres et composants graphiques d'interface HTML/CSS ou de l'interaction du site avec des données extérieures [base de données sur un serveur distant, géolocalisation avec Google Maps...) grâce à JavaScript, jQuery Mobile (jQM) donne tous les éléments pour construire, avec une agréable facilité, des sites qui fonctionneront sur la plupart des supports mobiles actuels.

L’explosion des ventes de smartphones et le besoin toujours plus grand des internautes d’être connecté au monde a favoriser la croissance de ce type de plates-formes de développement mobile. Pour de nombreux développeurs, jQuery Mobile est tout simplement en tête du classement. L'inclure dans ses projets est un donc choix absolument stratégique.

Développer avec jQuery Mobile – Première Édition

1.2 . Découvrir Le Framework

1.2.1 Installation de jQuery Mobile

Installer la plate-forme jQuery Mobile se fait aussi simplement que l'installation de jQuery. Il suffit en effet de soit :

  • Télécharger le fichier JavaScript et de l'appeler dans son fichier html. Il faut dans ce cas télécharger également: ◦ La feuille de style jquerymobile.css

◦ Le dossier d'images à mettre dans le même répertoire que les fichiers.

  • Faire un lien vers les fichiers JavaScript et CSS directement hébergés par les fondateurs du Framework. Cette méthode a l'avantage de nous éviter de télécharger des documents (JavaScript, images).

...

2 . Rappels sur jQuery

Avant de se lancer dans le vif du sujet, il peut être intéressant de rappeler quelques éléments clés du Framework jQuery. En effet, comme son nom le laisse suggérer et comme nous l'avons souligné en début d'ouvrage, jQuery Mobile est basé sur la célèbre librairie JavaScript. Nous allons donc dans cette partie refaire le tour des principales fonctions et astuces de la librairie.

2.1 . Sélection d'éléments

La sélection d'éléments en jQuery se fait à l'aide du tag raccourci $(), qui est en fait l'équivalent du sélecteur jQuery(). Il prend en paramètre l’élément recherché. En voici la syntaxe :

<script>

jQuery('l_element_a_selectionne');

//Ou en plus simple...

$('l_element_a_selectionne');

</script>

Exemples de sélections intéressantes:

  • Sélectionne tous les éléments du DOM ◦ $("*") ;
  • Sélection d’éléments HTML ◦ Paragraphe :
  • $('p') ; //Sélectionne tous les paragraphes de la page html ◦ Sélection tous les éléments de type hx (h1, h2, h3, h4, ...)
  • $(":header") ; ◦ Liste à puces :
  • $('li') ; //Sélectionne tous les éléments de type liste.

Développer avec jQuery Mobile – Première Édition

  • Sélection d'une classe et d'un id

◦ $('.demo') ; //La classe s’appelle ‘demo’ ◦ $('#contenu') ; //L’id s’appelle ‘contenu’

  • Sélectionne tous les éléments comportant le mot 'mobinaute' ◦ $(":contains('mobinaute')") ;
  • Renvoi tous les blocs d'éléments comportant des images ◦ $("a:has(img)") ;
  • Sélectionne tous les éléments de type submit ◦ $(input[type= "submit"]) ou $( :submit);
  • Sélectionne tous les éléments qui n'en contiennent pas d'autres. Ici on sélectionne les cases vides d 'un tableau

◦ $("td:empty") ;

Une fois ces éléments sélectionnés on peut leur appliquer un certain nombre de changements gérés dynamiquement par jQuery.

Ainsi si nous souhaitons ajouter une classe 'rouge' à un élément ayant pour id le mot header et une classe 'noir' à un élément ayant pour id le mot footer, il suffira d'écrire :

$(document).ready( function() {

$('#header').addClass(‘rouge’);

$('#footer').addClass(‘noir’);

});

La fonction $() va donc nous permettre de sélectionner tout (ou presque tout) ce que l'on souhaite.

Développer avec jQuery Mobile – Première Édition

2.2 . Manipulation du DOM1 (Document Object Model)

La manipulation du DOM est l'étape qui suit généralement la sélection. L'idée est donc de récupérer un éléments du DOM, puis de lui affecter un certain nombre de propriétés. Il existe de nombreuses fonctions jQuery facilitant la manipulation du DOM. Mais nous nous intéresserons qu'à un certain nombre d'entre eux, que nous pensons être les plus importants quand il s'agit de développer avec jQuery Mobile.

2.2.1 La fonction text()

Supposons que nous ayons le code html suivant :

<html>

<body>

<div class="container">

<h1 id="titre">Demo1 jQuery - Manipulation du DOM</h1>

<p id="contenu">

Hello <b>Mobinaute</b> <br />

Je suis un contenu qui va s'afficher sous forme d'alerte. <br />

Je suis un exemple pour montrer à quel point il est facile

d'utiliser la fonction <b>text()</b>.

</p>

</div>

</body >

</html >

Il est très facile de récupérer le contenu du paragraphe ayant l'id 'contenu' grâce à la fonction text() :

var contenu = $("#contenu").text();

La variable contenu contient le texte du paragraphe.

1Le DOM (Document Object Model) est une interface de programmation (API) qui décrit la structure d'un document et surtout la manière d'y accéder et de le manipuler. Plus d'informations sur Wikipédia (…)

Développer avec jQuery Mobile – Première Édition

Dans cet exemple, nous affichons le contenu du paragraphe dans une alerte

<script>

var contenu = $('#contenu').text(); // Juste du texte

alert('## DEBUT ## ' + contenu + ' ## FIN ##');// Affiche une alerte </script>

Voir la Démo 1 (Dossier demos/chapitre2)

Si l'on souhaite à présent changer le contenu du paragraphe, il suffit de faire : $("#contenu").text("Bonjour le Monde");

Qui a pour effet de remplacer le contenu actuel du paragraphe par « Bonjour le Monde » .

De façon générale, La fonction text() sans argument permet de récupérer le contenu d'un élément du DOM, tandis qu'avec un argument de type chaîne de caractère, celle-ci va remplacer le contenu courant par celui indiqué en paramètre.

Développer avec jQuery Mobile – Première Édition

Le texte du paragraphe a été remplacé par «Bonjour le Monde»

Voir la Démo 1 bis (Dossier demos/chapitre2) 2.2.2 La fonction html()

La fonction html() permet de récupérer tout le contenu d'un élément (aussi bien du texte que des balises html).



Pour la voir en action, modifions légèrement notre code html:

<html>

<body>

<div class="container">

<h1 id="titre">Demo2 jQuery - Manipulation du DOM</h1>

<div id="contenu1">

<p>Voici du beau contenu html qui sera entièrement

récupéré.</p>

<ul>

<li>1 - Un</li>

<li>2 - Deux</li>

</ul>

</div><!--- Contenu html qui sera récupéré-->

</div><!--- Container --> </body >

</html >

Pour récupérer le contenu HTML, il suffit de faire : var contenuHTML = $("#contenu2").html();

Développer avec jQuery Mobile – Première Édition

La variable contenuHTML contient le code html qui se trouve à l’intérieur de la div (id='contenu').

Si l'on souhaite par contre modifier le contenu du bloc en y insérant autre chose , il suffit de faire :

$('#secondaire').html(autre_contenuHTML);

Insertion d'un nouveau contenu html

<script>

var autre_contenuHTML = "<p>Voici un nouveau contenu qui montrer la facilité d'utilisation de la fonction <b>html()</b><p>"; var contenuHTML = $('#contenu').html(autre_contenuHTML);

alert('## DEBUT ## ' + contenuHTML + ' ## FIN ## ');

</script>

Voir les Démos 2 et 2 bis (Dossier demos/chapitre2)

Développer avec jQuery Mobile – Première Édition

2.2.3 La fonction remove

Supprime tous les éléments du DOM répondant aux critères de sélection. Attention, cette fonctionne ne supprime PAS les éléments de l'objet jQuery, ce qui permet une utilisation de ces éléments même si ceux ci ne figurent plus dans le document.

<p> Considérons le contenu html suivant :

<div class="container">

<div class="hello">Hello</div> <div class="world">World</div> </div>

Nous choisissons de supprimer le mot 'World' du contenu. Il suffit de faire :

$('.hello').remove();

Qui aura pour résultat la suppression du bloc contenant la classe 'world'. On aura finalement :

<div class="container">

<div class="world">World</div> </div>

Si plusieurs blocs possèdent la classe sélectionnée, ils seront également supprimer. Cette fonction est particulièrement intéressante dans le cas où l'on souhaiterait supprimer du contenu, sans affecter la hiérarchie du DOM

...

2.3 . Gestion des événements

Les événements font partis intégrante de jQuery. Ils permettent de gérer les actions utilisateurs, comme le clic sur un bouton. Voici 2 d’événements très utilisés :

  • document.ready() permet de déclencher l’exécution du code, ceci remplace la fonction onload() de JavaScript.
  • $('#events').click( function() { });

L'exemple ci-dessus permet de simuler le clic d'un utilisateur.

D'autres événements se fondent sur le même principe : blur, bind, change,

mouseon, mouseup ...

Dans l'exemple précédents, nous avons sans le signaler utilisé des événements. Il en existe un certain nombre, plusieurs dizaines pris en charges par jQuery, mais les plus

utilisés sont très certainement bind, click, toggle, change, submit , ready et load.

Un événement est presque toujours associé à une sélection, et donc affecté à un objet du DOM.

2.3.1 L’événement bind

Permet de lier une action à un événement particulier. Le gestionnaire d’événements peut être passé en argument de la fonction à appeler . Pour arrêter l'action par défaut et le bouillonnement d’événement, votre fonction doit retourner "false". Le bouillonnement d’événement est le phénomène qui fait remonter un événement chez tous les parents de l'objet touché, ce qui peut dans certains cas, considérablement diminuer les performances du système.

 Développer avec jQuery Mobile – Première Édition

Exemple 1 : Annule une action par défaut, ici la soumission d'un formulaire. $("form").bind("submit", function() { return false; })

Exemple 2 : Le contenu du paragraphe est affiché au clic dans une alerte.

$("p").bind("click", function(){ alert( $(this).text() ); });

Code de test:

  • <p>Hello</p> Résultat:
  • alert("Hello")

2.3.2 L'événement click

Considérons le code html suivant :

<p id="clic">

<button>Cliquez-moi !</button>

<span class="no-see">Contenu qui s'affichera au clic...</span> </p><!--- Contenu secondaire →

La class 'no-see ' a un display à 'none'. Le contenu du span n'est donc pas visible au chargement de la page.

<style type="text/css">

.no-see {

display:none;

}

</style>

Nous allons en jQuery afficher ce contenu au clic sur le bouton.

Développer avec jQuery Mobile – Première Édition

<script>

$('#clic').click( function() {

$(this).find('span').removeClass('no-see');

});

</script>

L'élément this se réfère à l'objet courant du DOM, et dans notre exemple il s'agit du paragraphe ayant pour id 'clic'. La fonction find() permet de trouver un élément contenu dans le paragraphe (this). Puis une fois cet élément trouvé, on supprime la class 'no-see ' avec la fonction removeClass().

Voir la Démos 3 (Dossier demos/chapitre2)

Développer avec jQuery Mobile – Première Édition

2.3.3 L'événement toggle

Supposons que nous souhaiterions afficher/cacher le contenu d'un paragraphe au clic sur un bouton.

Reprenons notre code source en le modifiant très légèrement :

<html > <body>

<div class="container">

<h1 id="titre">Demo2 jQuery – Gestion des événements</h1> <div id="contenu">

<p>Un contenu qui apparait et disparait, apparait,

disparait,  apparait, ...

</p>

<ul>

<li>jQuery UI</li>

<li>jQuery Mobile</li>

</ul>

</div><!--- Contenu-->

<p id="secondaire">

<button>Toggle-me !</button> </p><!--- Contenu secondaire →

</div><!--- Container --> </body >

</html>

L'action se fait au clic sur un bouton. L'événement est définie de façon relativement simple en jQuery :

<script>

$("#secondaire").toggle(

function () {

$('#contenu').addClass("toggle");

},

function () {

$('#contenu').removeClass("toggle");

}

);

</script>

 Développer avec jQuery Mobile – Première Édition

La fonction toggle() permet d'alterner entre deux action par clic successifs. Ainsi au premier clic la première fonction est invoquée, tandis qu'au second, c'est la deuxième qui est invoquée. Le cycle recommence au clic.

Les fonctions addClass() et removeClass() permettent respectivement d'ajouter ou de supprimer une classe donnée en paramètre.

Code complet :

<html >

<head>

<title>Démos jQuery</title>

<script



t>

<style type="text/css">

.container {

width:40em;

margin:0px auto;

padding:10px;

background:#eee;

border-radius:3px;

}

.toggle {

display:none;

}

</style>

</head>

<body>

<div class="container">

<h1 id="titre">Demo2 jQuery – Gestion des événements</h1>

<div id="contenu">

<p>Un contenu qui apparait et disparait, apparait,

disparait, apparait, ...

</p>

<ul>

<li>jQuery UI</li>

<li>jQuery Mobile</li>

</ul>

</div><!--- Contenu-->

Développer avec jQuery Mobile – Première Édition

<p id="secondaire">

<button>Toggle-me !</button>

</p><!--- Contenu secondaire →

</div><!--- Container →

<script>

$("#secondaire").toggle(

function () {

$('#contenu').addClass("toggle");

},

function () {

$('#contenu').removeClass("toggle");

});

</script>

</body >

</html >

Le contenu disparaît au clic sur le bouton 'Toggle-me' : Avant :

 Après :

Développer avec jQuery Mobile – Première Édition

2.3.4 L'événement submit

Intervient lors de l'envoi des éléments d'un formulaire.

Exemple :

Cet exemple permet de vérifier que le champ input contient bien une valeur. Si ce n'est pas le cas, le formulaire ne sera pas envoyé.

$("#formulaire").submit( function() {

return $("input", this).val().length > 0; } );

Code de test:

<form id="formulaire"><input type=''text'' value='' ''/></form>

2.4 . Ajouter des effets

Il existe un certain nombre d'effets intéressants en jQuery. Nous intéresserons à ceux qui apparaissent le plus lors de développements avec jQuery Mobile.

2.4.1 hide() et show()

Les fonctions hide() et show() comme le laissent présager leurs noms, permettent d'afficher ou de masquer du contenu. Sans aucun paramètre l'affichage/masquage se fait

2.5 . Autres fonctions intéressantes

2.5.1 $.browser

Contient des drapeaux indiquant le useragent courant (équivalent du

navigator.userAgent). Les drapeaux disponibles sont : safari, opera, msie et mozilla.

Développer avec jQuery Mobile – Première Édition

Exemple:

Affiche une alerte seulement sur les navigateurs de type Safari

if ($.browser.safari) {

$( function() {

alert("Ceci est un navigateur Safari!");

} );

}

2.5.2 each

La fonction. each () lorsqu'elle est appelée permet d'effectuer une itération sur les éléments du DOM qui font partie de l'objet jQuery. Supposons que nous ayons la liste non ordonnée suivante:

<ul>

<li> un </ li>

<li> deux </ li>

</ul>

Nous pouvons choisir les éléments de la liste et effectuer une itération sur chacun d'eux:

$ (•li•). each (function (index) {

alert (index + ':'. + $ (this).text());

});

Affichera le contenu de chaque élément de liste précédé du texte 'index +'.

2.5.3 after

Insère du contenu après chaque élément de la sélection.

 Développer avec jQuery Mobile – Première Édition

Considérons le code html suivant : <div class="container">

<h2>Greetings</h2>

<div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>

Le script :

$('.inner').after('<p>Test</p>');

générera le contenu suivant :

<div class="container">

<h2>Greetings</h2>

<div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>

2.6 . Développer avec Ajax

Ajax est apparu il y a déjà quelques années et est une technologie permettant d’envoyer des requêtes à un serveur et de récupérer ses réponses sans rafraîchir sa page. On l’utilise souvent pour rafraîchir des petits bouts de HTML, dans le but d’éviter des temps de chargement longs et des requêtes vers les serveurs trop lourdes à gérer.

Pour illustrer son fonctionnement, nous allons créer un mini-formulaire de recherche avec un effet similaire à Google­instant.

 Développer avec jQuery Mobile – Première Édition

<form class="ajax" action="search.php" method="get"> <p>

<label for="query">Rechercher un article</label> <input type="text" name="query" id="q" />

</p>

</form> <!--Formulaire-->

<div id="results"></div><!--Résultats-->

Avec jQuery, l'utilisation d'Ajax se fait simplement :

$(document).ready( function() {

// détection de la saisie dans le champ de recherche $('#q').keyup( function(){

$field = $(this);

$('#results').html("); // on vide les resultats

$('#ajax-loader').remove(); // on retire le loader

// on commence à traiter à partir du 2ème caractère saisie

if( $field.val().length > 1 )

{

// on envoie la valeur recherché en GET au fichier de traitement

$.ajax({

type : 'GET', // envoi des données en GET ou POST

url : 'ajax-search.php' , // url du fichier de traitement

data : 'q='+$(this).val() , //données à envoyer en GET ou POST

beforeSend : function() { // traitements JS à faire AVANT l'envoi

$field.after('<img src="/ajax-loader.gif" alt="loader" id="ajax-loader" />'); //ajout d'un loader pour signifier l'action

},

success : function(data){ //traitements JS à faire APRES le retour d'ajax-search.php

$('#ajax-loader').remove(); // on enleve le loader

$('#results').html(data); //affichage des résultats dans le bloc

}

});

}

});

});

Développer avec jQuery Mobile – Première Édition

2.7 . Travaux pratiques

  • Manipulation de tableaux

Considérons un tableau contenant une liste de contacts, avec différentes informations par colonne :

  • nom, prénom, adresse mail, téléphone bureau, mobile, nom de l'entreprise, plus quelques informations supplémentaires au choix.

La dernière colonne sera obligatoirement un bouton ayant pour valeur le mot</span>

'Supprimer '. Ce bouton permettra donc de supprimer un contact du tableau. Cependant au lieu de faire disparaître la ligne choisie, sa couleur d'arrière-plan deviendra rouge, et le texte du bouton passera de 'Supprimer' à 'Annuler'.

  • Afficher/Masquer

Utiliser les fonctions addClass()/Remove() pour afficher/masquer le contenu d'un texte.



  • Validation de formulaires

Utiliser la fonction submit() pour valider un formulaire.

  • Affichage de commentaires sans rafraîchissement de la page (Ajax)

Développer avec jQuery Mobile – Première Édition

3 . Utilisation des composants jQuery Mobile

3.1 . Créer une page avec jQuery Mobile

3.1.1 Structure d'une page

Une page jQuery Mobile doit nécessairement déclarer un doctype HTML5, ce afin de bénéficier de tous les avantages qu'apporte la nouvelle version du langage à balises, d'ailleurs très bien implémentés dans le Framework mobile.

Déclaration d'un doctype HTML5 : <IDOCTYPE html> <html>

L'entête html (<head>...</head>) doit ensuite importer les éléments nécessaires au fonctionnement de jQM en suivant cet ordre:

  • La feuille de style jQuery Mobile (CSS)
  • Le fichier jQuery (JavaScript)
  • Le fichier jQuery Mobile (JavaScript) <head>

<title>Ma première page</title>

</head>

 Développer avec jQuery Mobile – Première Édition

Remarques :

  • jQuery Mobile est compatible à la fois avec les versions 1.6.4 et 1.7.1 de jQuery.
  • Sur le site du Framework, il est recommandé de faire un lien vers les sources stockées directement sur les serveurs jQuery (code.jquery.com).

Notons au passage la présence de la métadonnée viewport qui spécifie le niveau de zoom de la page au sein du navigateur, ainsi que les dimensions de celle-ci. Nous précisons ici que la page s'affichera normalement, sans zoom (valeur à 1), et que sa largeur sera égale à celle du device2 (width=device-width) depuis lequel la page est consultée Si l'on souhaite afficher la page avec un zoom de 2, il suffit simplement de mettre la valeur du initial-scale à 2.

Il faut noter que ce choix de configuration n’empêche pas l'utilisateur de zoomer/dézoomer sur la page qu'il consulte.

3.1.2 Contenu d'une page

Dans jQuery Mobile, chaque page est associée à une vue de l'application. Définie au sein du tag <body>, une page (vue) est identifiée par l'attribut data-role="page" .

Définition d'une page (Vue) jQuery Mobile

<div data-role="page">

...

</div>

2 Smartphone, tablette, mobile wap,...

Développer avec jQuery Mobile – Première Édition

Au sein ensuite d'une page, il est possible d'ajouter n'importe quel élément html (lien hypertexte, image, liste à puce,...). Cependant et dans une logique de développement mobile, on utilise toujours strictement la structure suivante :

<div data-role="page">

<div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>

Une page est ainsi composée :

  • D'un entête où apparaîtra le titre de la page (Vue) courante
  • D'un contenu, où l'on affichera les éléments visibles de la page
  • D'un pied de page où l'on pourra par exemple rajouter un copyright ou même un menu sous forme d'onglets (Navigation tab).

3.1.4 Passage d'une page à l'autre

Le passage d'une page à une autre peut se faire de différentes manières. Dans le cas d'un document multi-page, le passage, comme on l'a vu précédemment, se fait en cliquant sur un ancre possédant l'ID de la page que l'on souhaite atteindre. Ainsi, en cliquant sur le lien ci-dessous, on passera de la page courante vers la page 1 :

<p><a href="#page1">Aller à la page 1</a></p>

Si l'on souhaite par contre atteindre un contenu qui n'est pas dans le document courant, jQuery Mobile utilise par défaut la technologie Ajax, pour passer d'une vue à une autre. Le contenu est importé et rajouté au DOM.

<a href="/externe.html" rel="external">Une page externe</a>

L'attribut rel="external" permet de préciser qu'il s'agit bien d'une page externe au document courant. Si l'on ne souhaite pas utiliser Ajax pour passer d'un contenu à

un autre, il faut mettre l'attribut data-ajax à false. Soit avec l'exemple précédent : <a href="/externe.html" rel="external" data-ajax="false">Une page

externe</a>

3.1.5 Utiliser les transitions entre les vues

jQuery Mobile propose plusieurs effets de transitions inspirés des transitions disponible au sein d'applications natives.

Il existe actuellement (jQuery Mobile 1.1) 8 transitions : fade, pop, flip, turn, flow, slide, slideup et slidedown.

L'effet de transition doit être définit dans le lien qui servira au passage de la vue courante vers une autre :

<a href="/index.html" data-transition="pop">Effet pop</a>

On chargera donc le contenu du fichier index.html avec l'effet pop.

Développer avec jQuery Mobile – Première Édition

3.1.6 Les boites de dialogues

Les transitions citées précédemment sont également utilisées dans la définition d'une boite de dialogue. L'effet "pop" est utilisé par défaut. <a href="/index.html" data-rel="dialog">Effet pop</a>

On peut aussi définir son effet :

<a href="/index.html" data-rel="dialog" data-transition="flip">Flip</a>

Voir démo 3 (chapitre 3).

3.1.7 Quelques astuces pour les pages made in Apple

Apple a définie un certain nombre de métadonnées qui permettent d'enrichir le développement d'applications web mobile. Ces spécificités n'agissent bien sûr que sur des devices sous iOS (iPod, iPhone et iPad).

Définir l'icône d'une application

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon¬72x72.png">

<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon¬114x114.png">

Cette icône s'affichera à l'enregistrement d'une page en favoris sur votre iPhone ou iPad. Cette option est également reconnu sur Android (Voir l'illustration ci-dessous)

Développer avec jQuery Mobile – Première Édition

Illustration 1: Icône à l'enregistrement d'un favoris

Définir un splash screen

<!-- iOS 3+: dimensions 320x460 -->

<link rel="apple-touch-startup-image" href="/startup.png">

Le splash screen est l'image qui s'affiche en grand écran au démarrage d'une application.

 Développer avec jQuery Mobile – Première Édition

Affichage en mode plein écran

<meta name="apple-mobile-web-app-capable" content="yes" />



86