Si vous atterrissez sur cette page, il s’agit de la 3éme partie d’un tutoriel pour créer une extension Google, ce tutoriel commence ici.

Maintenant que le bouton est en place, et qu’une tâche de fond a été défini, il nous faut y associer un popup, ce popup sera codé en HTML. Créez donc un fichier popup.html dans le même dossier que les précédents fichiers.

J’ai mis directement le code complet, comme il est relativement simple à comprendre, ce popup se présente de la façon suivante :

le 1er onglet permet de noter l’offre et de mettre un commentaire puis de le sauvegarder.
Les 5 onglets suivant permettent de voir les offres selon leur note, puis le dernier liste toutes les offres de la plus intéressante à la moins intéressante.
La notation se fait via des étoiles au survol.

Notes
5/5
4/5
3/5
2/5
1/5
Toutes les offres
Chargement...
Patientez, chargement en cours...
1
2
3
4
5
 

Vous pouvez télécharger les scripts et css jquery ici et jqueryui ici, vous remarquerez que le script.js est le même que celui utilisé pour la tâche de fond dans la 2éme partie de ce tutoriel

Il vous faut ensuite définir une feuille de style, que l’on nommera de façon original style.css :

html{
height:20px;
}

body{
height:20px;
padding:2px;
}

h1{
margin:3px;
font-weight:normal;
text-decoration:underline;
font-variant:small-caps;
padding-left:30px;
}

#adresse{
margin-left:20px;
color:gray;
}

ul, li{
list-style: none;
padding: 0;
margin: 0;
}

a{
text-decoration: none;
font-weight: bold;
font-size: 10px;
color: black;
}

a:hover{
background-color: #DDDDDD;
-webkit-border-radius: 5px;
}


ul.notes-echelle {
margin:0;
padding:0;
font:.75em/1.2 Arial, Helvetica, sans-serif;
}
ul.notes-echelle li {
float:left;
margin:0;
padding:0;
list-style:none;
min-width:20px;
min-height:20px;
}

/* Correctif IE6 sur min-width & min-height */
* html ul.notes-echelle.js li {
width:20px;
height:20px;
}

ul.notes-echelle li label {
display:block;
text-align:center;
line-height:20px;
background:url(etoiles.gif) center top no-repeat;
cursor:pointer;
}

label.notesaffiched
{
background:url(etoiles.gif) center top no-repeat;
display:block;
text-align:center;
line-height:20px;
}

ul.notes-echelle li.note-off label {
background-position:center -60px;
}

ul.notes-echelle.js input {
position:absolute;
left:-999%;
}

table
{
width:720px;
}

td
{
vertical-align:middle;
}

Vous pouvez télécharger les ressources images ici : etoiles.gif poubelle.png

Vous êtes arrivé a la fin de ce tutoriel, en espérant qu’il vous a été utile !