Developpez.com

Une très vaste base de connaissances en informatique avec
plus de 100 FAQ et 10 000 réponses à vos questions

jq-tiles, plusTabs et Kwicks :
Des plugins jQuery pour un diaporama, une gestion d'onglets et le défilement de panneaux

Le , par vermine, Responsable JavaScript & AJAX
jq-tiles, plusTabs et Kwicks
des 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.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :
Offres d'emploi IT
Ingénieur intégration, validation, qualification du système de drone H/F
Safran - Ile de France - Éragny (95610)
Expert décisionnel business intelligence H/F
Safran - Ile de France - Évry (91090)
Architecte technique des systèmes d'information H/F
Safran - Ile de France - Évry (91090)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -