IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par vermine

0PARTAGES

1  0 
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.

Une erreur dans cette actualité ? Signalez-nous-la !