Accordéon horizontal avec JQuery

mercredi 14 septembre 2011 à 23:54

Oui je sais... Lors du précédent post, j'avais promis de m'occuper des commentaires, de vous présenter mon framework et tout... et me voici avec du javascrit. Mais j'ai encore quelques jours pour respecter les délais que je me suis fixer. Et j'ai vraiment envie de vous présenter ce petit plugin pour JQuery. Au passage, ca me permet de mettre au point l'upload/download de fichiers sur ce site.

Donc un petit bout de javascript avec (en prime) pas mal de CSS. À noter quand même quelques petites choses sur le CSS. Tout d'abord, le texte écrit en vertical... C'est du texte HTML seulement modifier grâce à la propriété "transform". Donc à ce que j'ai noté, ça fonctionne sous IE7 (je n'ai pas eu l'occasion de tester sous les versions supérieures), Firefox, Opéra, Chrome et Safari. J'imagine que ca ne fonctionne pas dans les versions d'IE inférieures à 7... mais pour rappel, Microsoft ne fait plus de support pour IE6 alors à un moment, il faut quand même choisir.

Deuxième détail intéressant, c'est l'alliance des propriétés border-radius et overflow (avec la valeur hidden). En effet, ça marche bien avec Firefox, mais la surprise viens de Chrome, Safari et Opéra. Les bordures sont bien là, mais si vous allez dans le CSS (lignes 6 et 7) et que vous -webkit-border-radius et -o-border-radius a 15 (respectivement pour Chrome/Safari et Opéra), vous verrez de quoi je parle : l'image est rectangulaire... C'est plutôt dommage surtout pour Chrome qui a la réputation d'être le plus conforme aux règles du w3c... Espérons que cela change prochainement.

Voici maintenant un petit détail des paramètres :

$('.accordeon').accordeon({
    'tranche-width'            : 30,
    'tranche-border-radius'    : 15,
    'time-moving'            : 500,
    'auto-animate'            : true,
    'auto-animate-timer'     : 2000
});
  • tranche-width : permet de définir la largeur des éléments
  • tranche-border-radius : le border radius de l'accordéon (ne sert que pour Firefox...)
  • time-moving : temps de transition (en millisecondes)
  • auto-animate : true: animation automatique; false: uniquement au survol
  • auto-animate-timer : temps entre les chaque animations.

Voir la démo


Voilà, j'espère que cette source aidera quelques-uns d'entre vous. Je mettrais sûrement d'autres sources de javascript prochainement. À bientôt.

Télécharger :

Commentaires

  • mardi 18 octobre 2011 à 21:15, commentaire de Romain :

    Petite rectification : ca ne fonctionne pas sous IE7, mais je vais faire mon possible pour arranger ca.

    A bientot.

    Romain

Laissez un commentaire

captcha

En bref...

Dernier article

La dictature sur facebook

Cette semaine, l'actu, c'est Facebook qui trébuche. Le réseau social vient en effet de supprimer le droit de vote de ses membres. On a aussi GoogleNow sur Chrome, des nouvelles pas très réjouissantes de l'UIT, du piratage, l'étoile de la mort de Star Wars et une évasion échoué.

Ressources externes