mercredi, 23 août 2006, 07:08 PM - Javascript
Si l'un de vos clients vous demande d'ajouter des fonctionnalités basées sur du Javascript, des fonctionnalités qui affecteront en bout de ligne l'expérience de l'utilisateur (donc l'ergonomie du site de votre client), pensez à Scriptaculous. Il permet de faire aisément ce qu'un programmeur pressé par le temps n'ose imaginer...Drag & Drop
Supposons que notre client désire effectuer un sondage auprès de ses utilisateurs. Le sondage consiste à savoir quels sont les musiciens que les utilisateurs aiment et ceux qu'ils n'aiment pas, et par la même occasion il faut inviter les utilisateurs à placer en ordre de préférence ceux qu'ils aiment. Il s'attend à obtenir le résultat de votre travail rapidement... Comment feriez-vous cela?
Je crois que sans Scriptaculous, il est peu probable que vous auriez osé développer l'exemple ci-dessous:
À la base, pour arriver à mettre en place cette fonctionnalité, nous devons d'abord insérer les librairies Prototype et Scriptaculous (en fait, Scriptaculous est un add-on de Prototype):
<script src="lib/prototype.js" type="text/javascript"></script> |
Ensuite ajoutons un peu de style, pour que nous puissions bien distinguer les boîtes et les items qui peuvent être déplacés...
<style> |
Créons nos boîtes, dont celle qui contiendra la liste des items de départ:
<div id="liste_1" class="section"> |
Enfin, ajoutons la touche Scriptaculous - pour chaque boîte, nous devons ajouter Sortable.create qui désignera la boîte affectée et les attributs qui la concernent:
<script type="text/javascript"> |
Le résultat du script ci-dessus:
Si la fonctionnalité drag & drop vous intéresse, jetez un coup d'oeil à cet exemple.
Effets visuels
Scriptaculous permet d'effectuer des effets visuels très simplement. Ci-dessous, quelques exemples (pour voir tous les exemples, visitez la page de démonstration des effets visuels de Scriptaculous) :
Pour y arriver:
<a href="#" onclick="new Effect.Highlight('tag', 1);">Highlight</a> |
Avec un peu d'imagination, Scriptaculous fera de vous un magicien du Javascript. Osez!
[ 8 commentaires ] ( ( 24139 vues ) ) | [ 1 trackbacks ] | permalink
Suivant