jQuery Mobile

A l’heure actuelle, les versions mobiles des sites web se développent très rapidement. C’est ici qu’intervient jQuery Mobile.

jQuery Mobile s’appuie sur les fonctionnalités de HTML5 et de CSS3 afin de mettre en place des balises HTML visant à déployer une interface mobile sur toutes les plates-formes supportées. Il respecte tout particulièrement les spécifications de HTML5 relatives aux attributs data- personnalisés.  Grâce à cette méthode, il est possible d’intégrer des données dans des balises conformes au HTML5.  jQuery Mobile dispose d’un large ensemble d’attributs data-.

Lors de son initialisation, jQuery Mobile sélectionne les éléments en fonction de leur attribut data- et les met à jour en insérant des balises complémentaires, de nouvelles classes CSS, et en leur appliquant des gestionnaires d’événement.

Jquery Mobile fonctionne avec les deux style de balisage (balisage avec des div et balisage du HTML5).

 

Les bases de l’interface 

jQuery Mobile possède un fonctionnement un peu particulier. En effet, il est possible d’avoir plusieurs pages dans un seul fichier : c’est le multi-page. Cela est rendu possible grâce aux nouveaux attributs arrivés avec HTML5, les fameux data-* . Ils permettent de passer des valeurs personnalisées très proprement

Initialiser des pages

En donnant le rôle de page à un élément grâce à l’attribut data-role, vous l’isolez et lui donnez une importance qui permettra au navigateur de le considérer comme un fichier à part entière. Il suffit alors de répéter l’opération pour avoir plusieurs pages au sein de votre fichier, Exemple

<div data-role="page">

   <!-- page -->

</div>
<div data-role="page">
    <!-- autre page -->
</div>

Mettre en place jQuery Mobile

On doit s’assurer que la version mobile du site ne s’affiche que pour la navigation correspondante , les visiteurs navigant sur leur ordinateur ne veulent sûrement accéder qu’à la version classique. Donc il faut faire créer un autre fichier différent de votre index, vers lequel on sera redirigé automatiquement si le site détecte une navigation mobile. Deux solutions pour faire :

  • .htaccess
  • le code source

 

Redirection par  htaccess 

Ce type de redirection est basé sur les « user-agents » récupérés avec Apache. Ce sont tout simplement des informations que  chaque navigateur renvoie

RewriteCond %{HTTP_USER_AGENT} "ipod|iphone|ipad|android|palm" [NC]        
RewriteRule (.*) http://www.votre-site.com/votre-fichier-mobile.html [R=301,L]

Redirection via PHP

Nous allons se baser sue la variable superglobale, $_SERVER[‘HTTP_USER_AGENT’].

<?php

// on cherche un user-agent apparenté à une plateforme mobile dans la variable
$iphone = strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone');
$ipad = strpos($_SERVER['HTTP_USER_AGENT'], 'iPad');
$android = strpos($_SERVER['HTTP_USER_AGENT'], 'Android');
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry');
// puis on détermine si une chaîne de caractères a été trouvée
if($iphone || $ipad || $android || $blackberry > -1){
    header('Location: http://www.votre-site.com/votre-fichier-mobile.html'); // si c'est le cas, on redirige
    die; // puis on arrête le chargement de la page actuelle
}
?>
Ce bout de code est à placer au début de votre fichier index.php, avant même le doctype