Quicksand est un plugin JQuery qui peut être utile pour l’affichage un peu travaillé d’une liste d’images ou sur une boutique en ligne.
Le plugin vous permet de trier et filtrer des listes (d’images par exemple) selon des critères, le tout avec des effets de transition à la JQuery. Le résultat est assez agréable pour l’utilisateur mais il ne faut pas en abuser car cela peut vite devenir lourd.
Pour l’appliquer à une liste vous pouvez utiliser le code suivant :
Côté JavaScript :
$('.button').click(function(e) {
$('.all').quicksand( $('.warm li'), {
duration: 1000,
attribute: 'id'
});
e.preventDefault();
});
Côté HTML
<p><a class="button" href="#">Test</a></p>
<ul class="colors all">
<li id="c463033" style="background: #463033"></li>
<li id="c77343d" style="background: #77343d"></li>
<li id="ce83f2f" style="background: #e83f2f"></li>
<li id="cffc223" style="background: #ffc223"></li>
<li id="cffdb59" style="background: #ffdb59"></li>
<li id="c788b6f" style="background: #788b6f"></li>
<li id="c486a5e" style="background: #486a5e"></li>
<li id="c289539" style="background: #289539"></li>
<li id="c174876" style="background: #174876"></li>
</ul>
<ul class="colors warm">
<li id="c62164e" style="background: #62164e"></li>
<li id="c86286e" style="background: #86286e"></li>
<li id="cda79c2" style="background: #da79c2"></li>
<li id="ce83f2f" style="background: #e83f2f"></li>
<li id="cf39079" style="background: #f39079"></li>
<li id="cffc223" style="background: #ffc223"></li>
<li id="cffdb59" style="background: #ffdb59"></li>
<li id="cf2c478" style="background: #f2c478"></li>
</ul>
Il ne faut pas oublier de « binder » un bouton pour lancer le tri.
Ajuster la taille de vos textareas en fonction du contenu
de arnaud
On juillet 14, 2011
dans JQuery
AutoResize est un plugin JQuery qui permet de faire un textarea extensible en fonction du contenu, comme le fait actuellement Facebook pour les commentaires. Ceci évite les pages de formulaire où un textarea fait 15cm sur 8, le truc pas esthétique quoi…
Voici comment appliquer le plugin sur un textarea ayant pour id « comment ».
Après, libre à vous de changer le sélecteur pour l’appliquer à tous vos textareas, ou juste à ceux d’une classe précise.
$().ready(function(){ $('#comment').autoResize({ // On resize: onResize : function() { $(this).css({opacity:0.8}); }, // After resize: animateCallback : function() { $(this).css({opacity:1}); }, // Quite slow animation: animateDuration : 300, // More extra space: extraSpace : 40 }); });Vous l’aurez compris, ce plugin s’adresse aux développeurs soucieux de l’ergonomie de leur site Internet et qui en ont marre de voir des barres de scroll apparaître dans leurs textareas.