[Article] Un tableau de bord avec jQuery

Bonjour,

Je vous propose une traduction de l'article anglophone Creating a jQuery Dashboard

Ce tutoriel va vous montrer comment créer un tableau de bord de style Mac avec jQuery

Pour toutes questions/suggestions, vous pouvez les faire à la suite de ce message.

Bonne lecture

Il serait intéressant de rajouter au script une fonction pour précharger les images hover, cela évitera un effet 'flash' peu agréable lors de la première utilisation du script.

Techniquement parlant, plusieurs méthodes sont possibles, en css ou en javascript. En voici un exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

++ La fonction ++ /*  * Preload d'une liste d'images  * @param Array liste_src : liste des images  */ function preload_array ( liste_src ) {   var taille = liste_src.length; var preload = new Array(taille);   for (var i=0; i<taille;i++) { preload[i] = new Image(); preload[i].src = liste_src[i]; } }   ++ L'exécution ++ var liste_prechargement = new Array['iconHover.gif', '....... gif' ] preload_array(liste_prechargement);

---

Je conseilles de lancer le chargement en lazy-loading ( = au dom-ready ).
Vous pouvez aussi automatiser la création du tableau d'images en parcourant les <img> de #contactList.

Merci pour cette remarque.
C'est effectivement un point que j'avais constaté, mais s'agissant d'une traduction, j'avais opté pour une retranscription stricte du code proposé.
Du coup, je proposerai dès que j'aurais un peu de temps un script prenant en compte le préchargement des images.
:merci:

Merci pour ce tutoriel.

En pièce attachée, le résultat obtenu après de petites adaptations.

Pas mal effectivement, sobre et bien fait.
Eventuellement, si d'autres adaptations sont proposées, je pourrais les rajouter à la fin de l'article ;)
Juste une petite remarque cependant, le fait de rajouter une bordure crée un léger décalage des icones, ce ne serait pas plus adéquat de passer plutôt de modifier le border-color de noir à blanc pour parer à cela ?
En tout cas, merci à toi ;)

EDIT :
Version modifiée pour les bordures visible ici

Bonsoir Bovino.

C'est bien aussi, mais en mois animé. Car la première version donnait une sorte d'animation lors du survol qui ne me déplaisait pas.


Au début j'avais mis une bordure encore plus légère pour qu'elle soit quasi invisible, bien en IE8 et F3, mais comme d'habitude IE7 et ancêtres viennent tout cacher en mettant une large bordure.


Je constate que j'ai laissé mon adresse email par erreur ! Pourriez-vous la remplacer par l'adresse interne (MP) ou autre S.V.P. ?

Citation:

---

Envoyé par danielhagnoul

Bonsoir Bovino.

C'est bien aussi, mais en mois animé. Car la première version donnait une sorte d'animation lors du survol qui ne me déplaisait pas.

---

C'est étonnant, la seule chose que j'ai modifié est une déclaration CSS... il n'y a pas de raison que ça impacte sur les effets... :?

Citation:

---

Envoyé par danielhagnoul

Je constate que j'ai laissé mon adresse email par erreur ! Pourriez-vous la remplacer par l'adresse interne (MP) ou autre S.V.P. ?

---

C'est fait !

Citation:

---

Envoyé par Bovino

EDIT :
Version modifiée pour les bordures visible ici

---

Animation sympa, mais on dirait (sous FF3 en tout cas) que l'ensemble se décale de quelques pixels à l'ouverture & fermeture.

Citation:

---

Envoyé par HiRoN

Animation sympa, mais on dirait (sous FF3 en tout cas) que l'ensemble se décale de quelques pixels à l'ouverture & fermeture.

---

C'est probablement l'apparition de la scrollbar non ?

Bonsoir Bovino.

Merci pour la rectification email, j'ai également modifié mon zip.

Ce que j'appelle « animation » et vous « décalage » sont la même chose, l'ajout d'une bordure.

Mais comme toujours avec « les goûts et les couleurs » on aime ou on n’aime pas, chacun ayant sa sensibilité et son esthétique.

Mon but était d'avoir une « animation » à moindres frais, pas besoin de doubler le nombre d'images comme dans l'original.

Arf... D'accord, j'avais pas vu cela comme ça :oops:
Effectivement, les goûts et les couleurs. Si c'est intentionnel, gardes-le comme c'est, tu es l'auteur ! Cependant, je ne suis pas sûr que cette animation soit perçue comme telle par la majorité des visiteurs :?

PS : Si tu as d'autres contributions à proposer, ne te prives pas ! ;)

Bonsoir Bovino.

Voici ce que nous appellerons la bonne version. :P

Plus d'effet discutable avec une bordure :oops:, mais une simple animation jouant rapidement sur l'opacité de l'icône survolée.

J'ai cherché longtemps une animation intéressante, mais je n'ai rien trouvé de mieux et surtout qui s'incorpore sans dégâts collatéraux. :kill:

Salut,

Pas mal en effet, mais j'aurais encore deux remarques (mais encore une fois, c'est une question de gouts personnels).
Pour ma part, j'aurais mis une opacité faible par défaut et pas d'opacité pour l'icône survolée, je pense que c'est plus dans les habitudes des internautes.
Le contraste n'est pas suffisant entre survol et état normal, j'ai bien vu la différence parce que j'étais prévenu, mais sinon, ce n'est pas assez flagrant.
Désolé si je suis trop pointilleux, mais je pense que ce serait mieux comme ça :?

En tout cas, merci pour ta participation ;)

Bonsoir Bovino.

Avons nous encore un effet colatéral :kill: ?

J'ai un moniteur iiyama LS902UT, cathodique donc, et l'image est assez lumineuse. Peut-être avez-vous un LCD ?

Chez moi une opacité 0.7 provoque un noircissement très marqué et 0.8 un noircissement raisonnable.

Toujours chez moi, mettre les icônes à 0.7 à l'ouverture de la page pour leur rendre leur luminosité normale lors du survol n'est vraiment pas joli.