Idealforms : Un plugin Jquery pour skinner vos formulaires

Posté le 30 sept 2011 dans Blog & Actus, Javascripts | 0 commentaire

Personnellement, je suis un grand fan du plugin Jquery jqTransform qui permet d’aller très loin en terme de skinning de formulaire HTML. Le problème avec ce dernier c’est que contrairement à la plupart des plugins Jquery il est assez compliqué à utiliser. C’est pourquoi aujourd’hui je vous propose un plugin vraiment plus simple à l’utilisation : Idealforms.

Idealforms pour jquery vous permettra de faire un skinning multi-navigateur et multi-OS de vos formulaires. En effet comme vous le savez peut-etre certains éléments HTML varie visuellement d’un navigateur à un autre et surtout d’un OS à un autre. Ainsi certaines fois, le rendu de vos formulaires est totalement différents suivant que vous soyez sur Firefox, Safari, Chrome, Windows, MacOsX etc… Sans oublier que certaine fois, les développeurs que nous sommes, sommes soumis aux caprices de nos clients et à la créativité de nos graphistes.

Utilisation de Idealforms

1) Télécharger Jquery sur le site officiel : ICI

2) Télécharger IdealForms sur le site du plugin : ICI

3) Copier le dossier « css/idealForms » dans votre dossier CSS

4) Copier le fichier « js/idealForms.js » dans votre dossier de script Javascript

5) Rajouter les lignes suivantes dans entre vos balises <head> et </head>

^?View Code HTML

<link href="votre-dossier-css/reset.css" rel="stylesheet" type="text/css" media="screen"/> 
<link href="votre-dossier-css/idealForms/idealForms.css" rel="stylesheet" type="text/css" media="screen"/> 
<link href="votre-dossier-css/idealForms/idealForms-theme-sapphire.css" rel="stylesheet" type="text/css" media="screen"/>

6) Rajouter aussi les lignes suivantes dans entre vos balises <head> et </head>, en dessous des précedentes

^?View Code HTML

<script type="text/javascript" src="votre-dossier-js/jquery.min.js"></script> 
<script type="text/javascript" src="votre-dossier-js/jquery-idealForms.js"></script>

7) Et pour finir rajouter la ligne suivante dans votre fichier de script JS

^?View Code JS