[JQuery] Tile façon Windows Phone !
Une tile kézécé ?
Les tiles (ou les tuiles en français) sont les rectangles qu'on retrouve de partout dans l'interface Windows Phone. On la retrouve principalement sur l'écran d'accueil ou dans le hub de nos contacts.
La tile des contacts ou celle nous représentant permet de présenter de l'information de façon esthétique et cela grâce a 3 états principaux :
- Un carré contenant une image
- Un carré divisé en deux avec dans la partie supérieur un "Titre" et dans la partie inférieure, notre image
- Un carré contenant notre titre
En plus de ces 3 états, 2 autres peuvent venir s'ajouter :
- Flip : Qui retournera l'image pour afficher du texte (je nommerai ça Back Tile par la suite)
- RevertFlip : Qui permet de revenir a l'etat 1, c'est à dire notre image complétement visible
Ces 2 derniers états seront disponibles seulement si on a du texte à afficher.
Utilisation de TileAnimation.jquery.cs
Pour reproduire les animations, je me suis donc aidé des méthodes disponibles dans JQuery ! Le plus dur a été de faire le flip de l'image ( d'ailleurs je suis toujours pas trop satisfait du résultat :p )
Pour l'utiliser il n'y a rien de compliquer, on a juste besoin d'un conteneur !
<div id="first-tile"></div>
Puis d'appeler la fonction JQuery avec les bons paramètres quand notre page est prête !
$(document).ready(function() {
$("#first-tile").TileAnimations({
source: "./first.png",
title: "I",
size:160,
bgColor: "#f1bb1b"
});
});
Sans oublier d'inclure nos fichiers javascript dans l'en-tête :) :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" type="text/javascript"></script> <script src="./tile.jquery.js" type="text/javascript"></script>
Il y'a différentes options que l'on peut spécifier au moment de l'appel de notre animation :
- source : la source de notre image.
- title : le titre de la Tile
- content : le texte de la tile
- bgColor : la couleur du fond de la tile
- delay : le delay avant de commencer l'anim (par defaut: 0)
- size : taille de la Tile
Il se peut qu'il y'ait des bugs, j'ai pas spécialement tout testé ...
Pour voir le resultat, c'est par ici : Tile Animation demo
derniers tweets