Quicksand – Plugin jQuery – Trie et filtre avec effets d’animations
Me revoilà avec la présentation d’un autre plugin jQuery. J’ai trouvé l’effet peu commun et assez agréable à voir. Je vous fait découvrir Quicksand un plugin jQuery qui va vous permettre d’agrémenter vos tries ou filtrages d’éléments avec des animations fluides et assez originales.
Par exemple, pour une utilisation simple, vous allez procéder ainsi :
Pour le js
[pastacode lang= »javascript » manual= »%24(‘%23source’).quicksand(%20%24(‘%23destination%20li’)%20)%3B » message= » » highlight= » » provider= »manual »/]
pour le html
[pastacode lang= »markup » manual= »%3Cul%20id%3D%22source%22%3E%0A%09%3Cli%20data-id%3D%22iphone%22%3EiPhone%20OS%3C%2Fli%3E%0A%09%3Cli%20data-id%3D%22android%22%3EAndroid%3C%2Fli%3E%0A%09%3Cli%20data-id%3D%22winmo%22%3EWindows%20Mobile%3C%2Fli%3E%0A%3C%2Ful%3E%0A%0A%3Cul%20id%3D%22destination%22%20class%3D%22hidden%22%3E%0A%09%3Cli%20data-id%3D%22macosx%22%3EMac%20OS%20X%3C%2Fli%3E%0A%09%3Cli%20data-id%3D%22macos9%22%3EMac%20OS%209%3C%2Fli%3E%0A%09%3Cli%20data-id%3D%22iphone%22%3EiPhone%20OS%3C%2Fli%3E%0A%3C%2Ful%3E » message= » » highlight= » » provider= »manual »/]
Ce qui va remplacer une collection d’éléments par une autre.
A savoir que l’attribut data-id est valide html5, il existe d’autres méthodes si vous utilisez un autre doctype.
Je vous laisse découvrir les exemples, qui vous donnent une idée de toutes les utilisations possibles et vous renvois vers la documentation pour en apprendre d’avantage sur ce plugin jQuery.
Comme toujours, si vous avez des questions, n’hésitez pas à les laisser à la suite de ce billet 😉
Trackbacks/Pingbacks