27
MARS

iCheck - Des checkbox et radio boutons design avec jQuery

Publié le 27/03/13 à 08h01 par DJo

iCheck est un plugin jQuery permettant de donner du style à vos input checkbox et input radio, à la fois sur desktop et mobile.

iCheck est un plugin jQuery permettant de donner du style à vos input checkbox et input radio, à la fois sur desktop et mobile.

Vous vous arrachez les cheveux à la vue des belles checkbox du Webdesign fourni par votre graphiste ?

Pas de panique, iCheck est là pour vous!

Il s'agit d'un plugin jQuery permettant de personnaliser graphiquement vos checkbox et radios avec un ensemble de thèmes et couleurs:

Thèmes et couleurs pour personnaliser checkbox et radio input

6 thèmes et skins sont proposés par défaut, on retrouve même un skin Flat UI pour les fans de la nouvelle tendance webdesign.

Les checkbox et radios peuvent être présentés sous forme de ligne.

Chaque état des boutons est correctement designé.

Côté utilisation, c'est très simple:

<input type="checkbox" checked>
<input type="radio" name="some" checked>
<input type="radio" name="some">

Vous n'avez qu'à appeler le plugin jQuery avec l'une des options disponibles:

$('input').iCheck({
  // 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
  handle: '',
  // class added to customized checkboxes
  checkboxClass: 'icheckbox',
  // class added to customized radio buttons
  radioClass: 'iradio',
  // class on checked state
  checkedClass: 'checked',
  // class on disabled state
  disabledClass: 'disabled',
  // class on hover state
  hoverClass: 'hover',
  // class on focus state
  focusClass: 'focus',
  // class on active state
  activeClass: 'active',
  // add hoverClass to customized input on label hover and labelHoverClass to label on input hover
  labelHover: true,
  // class added to label if labelHover set to true
  labelHoverClass: 'hover',
  // increase clickable area by given % (negative to decrease)
  increaseArea: '',
  // true to set hand cursor over input
  cursor: false,
  // set true to inherit input's class name
  inheritClass: false,
  // if set to true, input's id prefixed with "icheck-" and attached
  inheritID: false,
  // add HTML code or text inside customized input
  insert: ''
});

Bien sûr, vous pourrez créer vos propres skins en CSS pour personnaliser les checkbox à votre goût!

Le plugin embarque un grand nombre de méthodes API et évènements pour étendre les fonctionnalités.

Côté compatibilité: IE7+, FF2+, Chrome, Safari, iOS, Android ... Pas de soucis à vous faire sur ce point!

 

Sympa non ?

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web