jq-tiles, plusTabs et Kwicksdes plugins jQuery pour un diaporama, une gestion d'onglets et le défilement de panneaux.
Les plugins jQuery sortent tous azimuts et offrent beaucoup de fonctionnalités. Nous allons présenter trois d'entre eux.
jq-tiles
jq-tiles est un plugin permettant de faire défiler des images en les découpant en morceaux (carrés, rectangles, tranches) qui s'estompent les uns après les autres. Les effets sont divers et sont paramétrables. Il utilise les transitions du CSS3.
Ce plugin est supporté par les navigateurs suivants : Webkit, Firefox, Opera, IE10, IE9-8. Sur les autres navigateurs, certaines transitions ne fonctionneront pas bien.
Pour l'utiliser, vous devez appliquer la méthode suivante sur un élément qui contient une série d'images :
| Code javascript : | Sélectionner tout |
$('.slider').tilesSlider(options)
Les options sont multiples : effet, opacité, direction, vitesse, ...
Pour démarrer et arrêter le défilement, vous passez par les événements start et stop :
| Code javascript : | Sélectionner tout |
1 2 | $('.slider').trigger('start'); $('.slider').trigger('stop'); |
Démo. Les sources sur github. Télécharger le zip.plusTabs
Le plugin plusTabs permet d'obtenir un onglet "More" ("Plus d'onglets") qui regroupe les autres onglets jQuery UI tabs en cas de problème d'affichage. Lorsqu'il y a deux lignes d'onglets, le plugin rassemble les onglets sous une même entitée. Sinon, les onglets s'affichent normalement. Cette astuce est surtout utile pour les smartphones.
Pour l'utiliser, vous appelez la méthode .plusTabs sur vos onglets en lui précisant une série d'options : la classe CSS, le texte de l'onglet "More", l'affichage du nombre total d'onglets, etc.
Démo. Les sources sur github.Kwicks
Ce plugin était à l'origine une adaptation d'un effet MooTools mais il a depuis évolué en un composant d'interface utilisateur hautement configurable et polyvalent. Il fournit des panneaux coulissants mettant l'accent sur l'interaction de la navigation. Il peut afficher des panneaux verticaux ou horizontaux qui croissent ou diminuent leur taille. Il peut également être utilisé pour créer un diaporama.
Voici un exemple d'utilisation :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 | <div class='kwicks kwicks-horizontal'> <a href='#' id='panel-1'></a> <a href='#' id='panel-2'></a> <a href='#' id='panel-3'></a> <a href='#' id='panel-4'></a> </div> |
| Code javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 | $(function() { $('.kwicks').kwicks({ size: 125, maxSize : 250, spacing : 5, behavior: 'menu' }); }); |
Démo. Le site du projet. Les sources sur github. Télécharger le zip.Source : d'après un article sur DailyJS.