Tuto : des arrondis sur Internet Explorer avec JQuery Corner

Tips
  • Accueil
  • Blog
  • Tuto : des arrondis sur Internet Explorer avec JQuery Corner

arrondi-internet-explorer-jquery-corner
Avez-vous déjà essayé d’intégrer des arrondis CSS sur Prestashop pour qu’ils soient visibles sur Internet Explorer ? Si oui, vous avez sûrement trouvé ce tutoriel roundies.js ou CSS3 Pie proposé par Alsacréations ici. On retrouve dans cet article les techniques d’intégration des arrondis par :

  • la propriété CSS3 border-radius
  • CSS3pie
  • Roundies.js

Malheureusement, tout se complique avec Prestashop car pas une de ces techniques n’a fonctionné sur Prestashop après tests c’est pourquoi je me suis tourné vers Jquery Corner : la solution pour avoir des arrondis dans Internet Explorer 8 et inférieurs.
Voici comment faire :

  • Télécharger le JQuery à cette adresse en cliquant ici : JQuery.Corner.js
  • Uploader ce même fichier sur votre serveur
  • Appeler le JQuery entre les balises <head></head> avec ce code : <script type="text/javascript" src="cheminverslefichierjquery/jquery.corner.js"></script>
  • Entre les balises <head></head> toujours, appliquez les arrondis voulus parmi ceux disponibles de la sorte : <script type="text/javascript">$('class ou id de l'élément html').corner("propriété de l'arrondi");</script>
  • Ne pas oublier de donner la class ou l’id à l’élément html qui doit avoir des arrondis.
  • C’est tout, simple et efficace !

Pour illustrer le tutoriel, on peut avoir dans le <head> $('.arrondi5').corner("5px top"); qui affichera l’élément de class .arrondi5 avec des arrondis de 5 pixels en haut à gauche et en haut à droite.
On peut bien entendu ajouter autant de comportements que souhaité. A vous de jouer !

One thought on “Tuto : des arrondis sur Internet Explorer avec JQuery Corner

  1. @Olivier C : Bonjour, effectivement ils fonctionnent tous mais PIE.htc étaient à mon goût plus fastidieux d’où le tuto sur l’autre script 😉

Laisser un avis

Consultez les autres articles