Développement Web pour mobiles iUI côté CSS

On a vu dans l'article précédent, que l'écriture de code HTML en utilisant certaines règles CSS définies par iUI permettait de produire un affichage ayant un aspect iPhone / Android. Voyons en détail les classes dont nous disposons.

N'hésitez pas à nous faire part de votre avis sur cet article : 1 commentaire

Article lu fois.

L'auteur

Eric Sarrion

L'article

Publié le 7 décembre 2010

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

Créer la toolbar de l'application▲

La toolbar de l'application correspond à la partie haute de chacune des fenêtres de l'application. Elle contient au centre le titre de la fenêtre, puis un éventuel bouton sur la partie gauche permettant de revenir à la fenêtre précédente.

Cela correspond à une partie du code HTML de notre exemple test précédent :

Sélectionnez

<div class="toolbar">
	<h1 id="pageTitle"></h1>
	<a id="backButton" class="button" href="#"></a>
</div>

L'élément <h1> (dont l'id est obligatoirement pageTitle) contiendra le titre de la fenêtre actuellement affichée, tandis que l'élément <a> (dont l'id est obligatoirement backButton) contiendra un bouton permettant de revenir à la fenêtre précédente (si elle existe). La classe button associée à ce lien permet de lui donner par l'intermédiaire des CSS l'apparence d'un bouton. L'adresse du lien est indiquée par l'attribut href et celui-ci sera mis à jour automatiquement par le code JavaScript de iUI.

Créer les fenêtres de notre application▲

Chaque fenêtre affichée dans notre application sera en fait un <div> contenu dans la page HTML principale de notre application. Donc iUI permet de n'avoir qu'une seule page HTML, qui contiendra toutes les fenêtres de notre application, chacune de ces fenêtres étant insérée dans un <div>.

TERMINOLOGIE : page ou fenêtre ?

Par la suite, afin d'éviter tout malentendu, nous emploierons le terme page lorsqu'il s'agit d'une page HTML et le terme fenêtre lorsqu'il s'agit de la partie du code HTML (de la page) qui sera affichée sur l'écran. Étant entendu qu'une page HTML pourra contenir plusieurs fenêtres...

Voici une page HTML contenant en fait trois fenêtres qui seront affichées dans notre application :

Fichier index.html (sous PHP)

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="images/logo.png" />
    <link rel="stylesheet" type="text/css" href="iui/iui.css" />
    <link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
    <script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
    </div>
    <div id="accueil" title="Bienvenue !" selected="true">
      <p>Voici une appli iPhone !</p>
    </div>
    <div id="fenetre2" title="Fenêtre 2">
      <p>Vous êtes sur la Fenêtre 2 de notre appli !</p>
    </div>
    <div id="fenetre3" title="Fenêtre 3">
      <p>Vous êtes sur la Fenêtre 3 de notre appli !</p>
    </div>
  </body>
</html>

On indique une seule fois le <div> contenant la toolbar (iUI gère son affichage pour chacune des fenêtres affichées dans notre application), puis ensuite les trois <div> contenant chacune des fenêtres. Pour savoir quelle fenêtre afficher en premier, on utilise l'attribut selected=true pour celle-ci.

Chaque fenêtre possède un attribut title qui sera le titre affiché en haut de la fenêtre (dans la toolbar). Elle possède aussi un id qui permettra au code JavaScript de iUI de procéder à son affichage (l'id est dans ce cas ce qui la distingue des autres fenêtres).

Passer d'une fenêtre à l'autre▲

On a vu que l'attribut selected=true positionné dans le <div> d'une fenêtre permettait à cette fenêtre d'être affichée par défaut au lancement de l'application. Il reste maintenant à pouvoir passer sur une autre fenêtre depuis celle-ci.

iUI utilise pour cela l'id de chaque fenêtre. Il suffit de créer un lien (ou un bouton) qui lorsqu'il sera cliqué, affiche l'autre fenêtre.

Modifions légèrement le code HTML relatif à la première fenêtre :

Code HTML de la première fenêtre

Sélectionnez

<div id="accueil" title="Bienvenue !" selected="true">
  <p>Voici une appli iPhone !</p>
  <a href="#fenetre2">Cliquez ici pour passer sur la 2e fenêtre...</a>
</div>

L'attribut href du lien permet d'indiquer sous la forme #id_de_la_fenetre vers quelle fenêtre on doit se diriger. iUI gère directement le passage d'une fenêtre à l'autre.

La nouvelle page d'accueil s'affiche maintenant :

Puis lorsqu'on clique sur le lien :

Nous remarquons qu'iUI a effectué le passage à la deuxième fenêtre en effectuant une transition horizontale entre les deux fenêtres. Aucun appel au serveur n'a été effectué, vu que toutes les fenêtres sont déjà incluses dans la page HTML !

De plus, la toolbar contient maintenant le titre de notre nouvelle fenêtre, ainsi qu'un bouton permettant de revenir à celle-ci. La taille du bouton est définie par une valeur maximale à ne pas dépasser, c'est la raison pour laquelle iUI ajoute automatiquement des "..." si la longueur du texte dépasse cette taille maximale.

Afficher des listes▲

Les listes sont une composante principale de l'affichage, permettant par exemple d'afficher les menus de l'application.

On utilise pour cela la balise <ul> qui contiendra une ou plusieurs balises <li> définissant chaque ligne de la liste. De plus, si chaque <li> contient un lien (balise <a>) cela permettra de naviguer vers une nouvelle fenêtre lors du clic sur cet élément de liste.

Une liste simple sans lien sous PHP

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
    <meta name="viewport" content="user-scalable=no,width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-startup-image" href="images/load.png" />
    <link rel="apple-touch-icon" href="images/logo.png" />
    <link rel="stylesheet" type="text/css" href="iui/iui.css" />
    <link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
    <script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
    </div>
    <ul title="Informations" selected="true">
      <li>Information 1</li>
      <li>Information 2</li>
      <li>Information 3</li>
      <li>Information 4</li>
    </ul>
  </body>
</html>

Elle s'affiche comme suit :

La personnalisation des listes est effectuée dans iui.css par le sélecteur body > ul > li et définie de la façon suivante :

Définition d'un élément de liste dans iui.css

Sélectionnez

body > ul > li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #E0E0E0;
  padding: 8px 0 8px 10px;
  font-size: 20px;
  font-weight: bold;
  list-style: none;
}

La directive border-bottom permet de mettre une bordure sous chaque élément de liste, tandis que la directive padding permet d'espacer harmonieusement le texte dans chaque élément de liste.

Voici maintenant une liste contenant des liens vers d'autres fenêtres :

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
    <meta name="viewport" content="user-scalable=no,width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-startup-image" href="images/load.png" />
    <link rel="apple-touch-icon" href="images/logo.png" />
    <link rel="stylesheet" type="text/css" href="iui/iui.css" />
    <link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
    <script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
    </div>
    <ul title="Informations" selected="true">
      <li> <a href="#fenetre2">Aller sur la Fenêtre 2</a></li>
      <li> <a href="#fenetre3">Aller sur la Fenêtre 3</a></li>
      <li> <a href="#fenetre4">Aller sur la Fenêtre 4</a></li>
      <li> <a href="#fenetre5">Aller sur la Fenêtre 5</a></li>
    </ul>
    <div id="fenetre2" title="Fenêtre 2">
      <p>Vous êtes sur la Fenêtre 2 de notre appli !</p>
    </div>
    <div id="fenetre3" title="Fenêtre 3">
      <p>Vous êtes sur la Fenêtre 3 de notre appli !</p>
    </div>
  </body>
</html>

On obtient maintenant :

L'inclusion du fichier default-theme.css permet de personnaliser les liens dans les listes en incluant une flèche pointée vers la droite à la fin de l'élément de liste. De plus un clic sur un élément de liste le fait passer provisoirement avec un fond bleu, montrant qu'il a été sélectionné. Bien sûr le clic sur un élément de liste provoque le passage à la fenêtre adéquate si elle existe dans le code HTML (ce qui est le cas ici pour les fenêtres 2 et 3).

Une autre possibilité offerte par les classes CSS de iUI est celle de donner un titre à un groupe d'éléments dans une liste. Par exemple les fenêtres 2 et 3 seraient regroupées dans le menu 1, tandis que les fenêtres 4 et 5 seraient regroupées dans le menu 2. On utilise pour cela la classe group pour indiquer les titres :

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
    <meta name="viewport" content="user-scalable=no,width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-startup-image" href="images/load.png" />
    <link rel="apple-touch-icon" href="images/logo.png" />
    <link rel="stylesheet" type="text/css" href="iui/iui.css" />
    <link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
    <script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
    </div>
    <ul title="Informations" selected="true">
      <li class="group"> Menu 1</li>
      <li> <a href="#fenetre2">Aller sur la Fenêtre 2</a></li>
      <li> <a href="#fenetre3">Aller sur la Fenêtre 3</a></li>
      <li class="group"> Menu 2</li>
      <li> <a href="#fenetre4">Aller sur la Fenêtre 4</a></li>
      <li> <a href="#fenetre5">Aller sur la Fenêtre 5</a></li>
    </ul>
    <div id="fenetre2" title="Fenêtre 2">
      <p>Vous êtes sur la Fenêtre 2 de notre appli !</p>
    </div>
    <div id="fenetre3" title="Fenêtre 3">
      <p>Vous êtes sur la Fenêtre 3 de notre appli !</p>
    </div>
  </body>
</html>

On obtient maintenant :

Grouper les informations▲

Le but ici est de présenter les informations sous la forme de liste, chaque ligne de la liste étant de la forme d'un intitulé suivi d'une valeur (par exemple l'intitulé Prénom suivi du prénom lui-même). Ce type d'affichage est pratique pour présenter des données en liste.

Les informations à grouper seront incluses dans un élément HTML <fieldset> permettant d'entourer ces informations par un cadre, tandis que chaque ligne d'information sera un <div> ayant la classe CSS row. L'intitulé sera un élément <label>, tandis que la valeur sera un <span>.

Une fenêtre regroupant les informations

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-startup-image" href="images/load.png" />
    <link rel="apple-touch-icon" href="images/logo.png" />
    <link rel="stylesheet" type="text/css" href="iui/iui.css" />
    <link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
    <script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <div title="Informations" selected="true">
      <fieldset>
        <div class="row">
          <label>Nom</label>
          <span>Sarrion</span>
        </div>
        <div class="row">
          <label>Prénom</label>
          <span>Eric</span>
        </div>
        <div class="row">
          <label>Ville</label>
          <span>Paris</span>
        </div>
      </fieldset>
	</div>
  </body>
</html>

On obtient l'affichage suivant :

Les éléments ont bien été regroupés par un cadre, l'intitulé (élément <label>) a été mis en gras, suivi de la valeur (élément <span>) dans une police plus fine.

Ajoutons maintenant la classe CSS panel à notre fenêtre :

Sélectionnez

<div title="Informations" class="panel" selected="true">
XHTML, CSS et JavaScript pour le web mobile, Eyrolles (extrait), Copyright Eric Sarrion

Cela ressemble bien plus à un style classique !

Les champs contenant les valeurs ne sont pas modifiables pour l'instant, vu que les balises HTML qui les affichent sont de simples <span>. Modifions les <span> en balises <input> :

Listes avec champs modifiables

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
      <meta name="viewport" content="user-scalable=no,width=device-width" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <link rel="apple-touch-startup-image" href="images/load.png" />
      <link rel="apple-touch-icon" href="images/logo.png" />
      <link rel="stylesheet" type="text/css" href="iui/iui.css" />
      <link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
      <script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
    </div>
    <div title="Informations" class = panel selected=true>
      <fieldset>
        <div class="row">
          <label>Nom </label>
          <input type="text" value="Sarrion" />
        </div>
        <div class="row">
          <label>Prénom </label>
          <input type="text value="Eric" />
        </div>
        <div class="row">
          <label>Ville </label>
          <input type = text value = "Paris" />
        </div>
      </fieldset>
    </div>
  </body>
</html>

Affichons notre page et cliquons sur la valeur d'un champ (la valeur Sarrion par exemple) :

Le clavier virtuel de l'iPhone ou de l'Android est apparu, permettant ainsi la modification de la valeur de ce champ. Supposons maintenant que nous ayons plusieurs groupes d'informations au lieu d'un seul comme précédemment. On peut utiliser la balise <fieldset> pour chacun d'eux et mettre un titre à chaque groupe à l'aide la balise <h2> qui possède un style spécial dans iui.css.

Plusieurs groupes d'informations

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
    <meta name="viewport" content="user-scalable=no,width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-startup-image" href="images/load.png" />
    <link rel="apple-touch-icon" href="images/logo.png" />
    <link rel="stylesheet" type="text/css" href="iui/iui.css" />
    <link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
    <script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
    </div>
    <div title="Informations" class="panel" selected="true">
      <h2> Etat civil </h2>
      <fieldset>
        <div class="row">
          <label>Nom </label>
          <span>Sarrion </span>
        </div>
        <div class="row">
          <label>Prénom </label>
          <span>Eric </span>
        </div>
        <div class="row">
          <label>Ville </label>
          <span>Paris </span>
        </div>
      </fieldset>
      <h2> Job </h2>
      <fieldset>
        <div class="row">
          <label>Entreprise </label>
          <span>Microsoft </span>
        </div>
        <div class="row">
          <label>Service </label>
          <span>Marketing </span>
        </div>
        <div class="row">
          <label>Expérience </label>
          <span>15 ans </span>
        </div>
      </fieldset>
    </div>
  </body>
</html>

Cela donne comme affichage :

Afficher des boutons▲

Pour l'instant le seul bouton que nous ayons utilisé est celui situé dans la toolbar, permettant la navigation entre les fenêtres (par retour à la fenêtre précédente). Ce bouton est entièrement géré par iUI, qui l'affiche selon la navigation que l'on effectue dans l'application.

iUI permet également d'afficher d'autres boutons. Pour cela on utilise un lien (balise <a>) de classe :

whiteButton pour un bouton avec un fond blanc ;
grayButton pour un bouton avec un fond gris ;
redButton pour un bouton avec un fond rouge.

REMARQUE : pourquoi utiliser un lien ?
Remarquons que le lien est nécessaire pour effectuer un changement de fenêtre suite au clic sur le bouton. Si l'on utilise par exemple un <div> de classe redButton, le bouton s'affiche mais aucune action ne sera effectuée lorsqu'un clic se produira sur celui-ci.

Voici par exemple l'affichage précédent, mais scindé en deux fenêtres : on passe de la première à la seconde à l'aide d'un bouton en fin d'affichage.

Fenêtre avec bouton

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
	<meta name="viewport" content="user-scalable=no,width=device-width" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="apple-touch-startup-image" href="images/load.png" />
	<link rel="apple-touch-icon" href="images/logo.png" />
	<link rel="stylesheet" type="text/css" href="iui/iui.css" />
	<link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
	<script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
	  <h1 id="pageTitle"></h1>
	  <a id="backButton" class="button" href="#"></a>
	</div>
	<div title="Informations" class="panel" selected="true">
	  <h2> Etat civil </h2>
	  <fieldset>
	    <div class="row">
		  <label>Nom </label>
		  <span>Sarrion </span>
		</div>
		<div class="row">
		  <label>Prénom </label>
		  <span>Eric </span>
	    </div>
		<div class="row">
		  <label>Ville </label>
		  <span>Paris </span>
		</div>
	  </fieldset>
	  <a class="redButton" href="#fenetre2">Voir la suite...</a>
	</div>
	<div id="fenetre2" class="panel" title="Job">
	  <h2> Job </h2>
	  <fieldset>
	    <div class="row">
		  <label>Entreprise </label>
		  <span>Microsoft </span>
		</div>
		<div class="row">
		  <label>Service </label>
		  <span>Marketing </span>
		</div>
		<div class="row">
		  <label>Expérience </label>
		  <span>15 ans </span>
		</div>
	  </fieldset>
	</div>
  </body>
</html>

La première fenêtre s'affiche ainsi :

Puis suite au clic sur le bouton :

Fenêtres superposées▲

Pour l'instant, les fenêtres que nous affichons sont les unes à la suite de l'autre, la dernière fenêtre affichée faisant disparaître la précédente. Il y a des cas où l'on souhaiterait ne pas quitter la fenêtre actuelle, mais afficher par dessus celle-ci une autre fenêtre contenant un complément d'informations (par exemple des options...). Cette fonctionnalité est généralement accessible grâce à un bouton de la toolbar.

Pour afficher ce bouton dans la toolbar, il faut l'insérer dans celle-ci de la façon suivante :

Un bouton dans la toolbar de l'application

Sélectionnez

<div class="toolbar">
  <h1 id="pageTitle"></h1>
  <a id="backButton" class="button" href="#"></a>
  <a class="button" href="#fenetre2"> Détails</a>
</div>

On crée, comme pour les autres boutons, un lien dont l'attribut href pointe vers la fenêtre que l'on souhaite afficher.

Ce bouton devant se situer sur la droite de la toolbar, on utilise la classe button qui le permet. Il est possible de changer la couleur du bouton en ajoutant la classe blueButton à l'élément <a>, comme ceci :

Un bouton de couleur bleue dans la toolbar

Sélectionnez

<div class="toolbar">
  <h1 id="pageTitle"></h1>
  <a id="backButton" class="button" href="#"></a>
  <a class="button blueButton" href="#fenetre2">Détails</a>
</div>

Une fois que le bouton permettant l'accès à la fenêtre superposée est créé, il reste à créer celle-ci. Pour cela on utilise une fenêtre de classe CSS dialog, qui permet d'être affichée au-dessus de la précédente (et non pas à la place de la précédente).

La fenêtre de classe dialog est une fenêtre particulière. En effet, elle s'affiche tout en haut de l'écran (la classe dialog définit la propriété CSS top à 0), donc le bouton permettant de revenir à la page précédente n'est plus accessible (la toolbar est complètement cachée) ! Cette fenêtre doit donc posséder un bouton de fermeture de celle-ci afin que l'utilisateur puisse revenir à la fenêtre qui l'a ouverte. Ce bouton de fermeture est un bouton classique (un lien de classe whiteButton, grayButton ou redButton), mais lorsqu'il est activé, il doit fermer la fenêtre. Pour fonctionner de cette façon, iUI impose que la fenêtre soit un élément <form> et que, le lien correspondant au bouton ait un attribut type=cancel.

Cela nous donne donc le code HTML suivant :

Une fenêtre qui en ouvre une autre par superposition

Sélectionnez

<html>
  <head>
    <title>Exemple Test</title>
	<meta name="viewport" content="user-scalable=no,width=device-width" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="apple-touch-startup-image" href="images/load.png" />
	<link rel="apple-touch-icon" href="images/logo.png" />
	<link rel="stylesheet" type="text/css" href="iui/iui.css" />
	<link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />
	<script type="text/javascript" src="iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
	  <h1 id="pageTitle"></h1>
	  <a id="backButton" class="button" href="#"></a>
	  <a class="button blueButton" href="#fenetre2">Détails</a>
	</div>
	<div title="Informations" class="panel" selected="true">
	  <h2> Etat civil </h2>
	  <fieldset>
	    <div class="row">
		  <label>Nom </label>
		  <span>Sarrion </span>
		</div>
		<div class="row">
		  <label>Prénom </label>
		  <span>Eric </span>
		</div>
		<div class="row">
		  <label>Ville </label>
		  <span>Paris </span>
		</div>
	  </fieldset>
	</div>
	<form id="fenetre2" class="dialog">
	  <fieldset>
	    <h1> Job </h1>
		<div class="row">
		  <label>Entreprise </label>
		  <span>Microsoft </span>
		</div>
		<div class="row">
		  <label>Service </label>
		  <span>Marketing </span>
		</div>
		<div class="row">
		  <label>Expérience </label>
		  <span>15 ans </span>
		</div>
	  </fieldset>
	  <fieldset>
	    <h1> Etudes </h1>
		<div class="row">
		  <label>Lycée </label>
		  <span>Henry IV (Paris) </span>
		</div>
		<div class="row">
		  <label>Diplôme </label>
		  <span>Supélec (1990) </span>
		</div>
		<div class="row">
		  <label>Niveau </label>
		  <span>Bac + 5 </span>
		</div>
	  </fieldset>
	  <fieldset>
	    <h1> Expériences Professionnelles </h1>
		<div class="row">
		  <label>1990 </label>
		  <span>Marketing opérationnel </span>
		</div>
		<div class="row">
		  <label>1995 </label>
		  <span>Marketing décisionnel </span>
		</div>
		<div class="row">
		  <label>2000 </label>
		  <span>Directeur Marketing</span>
		</div>
		<div class="row">
		  <label>2005 </label>
		  <span>Vice Président</span>
        </div>
      </fieldset>
      <a class="whiteButton" type="cancel"> Fermer</a>
    </form>
  </body>
</html>

On peut voir le bouton Détails situé dans la toolbar :

Puis l'affichage de la fenêtre superposée, suite au clic sur le bouton Détails :

Nous voyons que l'affichage de cette fenêtre cache complètement la toolbar, et que sans le bouton Fermer, il serait impossible de revenir à notre application !

Il est possible de donner à notre fenêtre superposée l'aspect panel, en ajoutant cette classe CSS dans l'élément <form> :

Ajout de l'aspect panel à une fenêtre superposée

Sélectionnez

<form id="fenetre2" class="dialog panel">

L'affichage obtenu est légèrement différent :

Remarquons que dans une fenêtre de classe dialog, iUI permet de styler les éléments <h1> qui sont dans un <fieldset> (comme nous l'avons fait). Mais si l'on ajoute la classe panel à la fenêtre, les éléments <h2> sont maintenant aussi stylés (car inscrits dans un élément ayant la classe panel) et l'on pourrait aussi écrire le code HTML de la façon suivante :

Éléments h2 dans une fenêtre de classe panel

Sélectionnez

<form id="fenetre2" class="dialog panel">
  <h2> Job </h2>
  <fieldset>
    <div class="row">
	  <label>Entreprise </label>
	  <span>Microsoft </span>
	</div>
	<div class="row">
	  <label>Service </label>
	  <span>Marketing </span>
	</div>
	<div class="row">
	  <label>Expérience </label>
	  <span>15 ans </span>
	</div>
  </fieldset>
  <h2> Etudes </h2>
  <fieldset>
    <div class="row">
	  <label>Lycée </label>
	  <span>Henry IV (Paris) </span>
    </div>
	<div class="row">
	  <label>Diplôme </label>
	  <span>Supélec (1990) </span>
	</div>
	<div class="row">
	  <label>Niveau </label>
	  <span>Bac + 5 </span>
	</div>
  </fieldset>
  <h2> Expériences Professionnelles </h2>
  <fieldset>
    <div class="row">
	  <label>1990 </label>
	  <span>Marketing opérationnel </span>
	</div>
	<div class="row">
	  <label>1995 </label>
	  <span>Marketing décisionnel </span>
	</div>
	<div class="row">
	  <label>2000 </label>
	  <span>Directeur Marketing</span>
	</div>
	<div class="row">
	  <label>2005 </label>
	  <span>Vice Président</span>
	</div>
  </fieldset>
  <a class="whiteButton" type="cancel"> Fermer</a>
</form>

Ce qui donne maintenant :

La suite ?▲

Vous avez aimé cet article et vous voulez avoir la suite de l'histoire ? Elle est dans mon livre XHTML / CSS et JavaScript pour le Web mobile.

Remerciements▲

Un grand merci à jacques_jean pour sa relecture.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 Eric Sarrion. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.