Facilité le remplissage d’un champ de texte ‘Date’, en l’associant à un calendrier.
Pour cela nous avons besoin de faire appel au plugin JQuery ‘jquery.ui.datepicker-fr.js. En sélectionnant le champ ‘Date’ ci-dessus, le calendrier apparait (voir image ci-contre).
Plusieurs thèmes sont téléchargeables via ce lien. Il ne vous restera plus qu’a l’adapter à votre propre code.
David LAURENT
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.webinnov-draggable { cursor: move; height: 120px; width: 120px; position: absolute; left: 219px; top: 28px; margin: 10px; padding: 0; border: 1px solid rgba(0,0,0,0.5); border-radius: 10px; background: rgba(0,0,0,0.25); box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.3), inset 0 -15px 30px rgba(0,0,0,0.3); -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); } |
Description: Ce script vous permet d’agrandir une partie d’une image en déplaçant votre souris dessus. Une zone de loupe apparaît à côté de l’image à afficher et l’image est agrandie sur demande. L’utilisateur peut effectué des niveaux de zoom différents en utilisant la molette de la souris
Dans cette démo, voyez comment enchaîner des animations CSS à l’aide de gestionnaires d’événements JavaScript.».
