[Webdesign] Créez des checkboxes façon « iPhone »

Tags: iPhone, Javascript, JQuery, Plugin, Web, Webdesign
Posté dans Billets, Webworker par Lionel Roux le 25 sept 2009

L’interface de l’iPhone, et de manière générale toutes les interfaces créées par Apple sont ergonomiques et jolies. Le succès de leurs produits est là pour en témoigner.

J’aime en particulier les boutons qui servent à activer une fonctionnalité, façon « bouton poussoir ».

iphone-ip-addresse

Si vous appréciez vous aussi ces boutons un peu particuliers, sachez qu’il existe un moyen de les reproduire sur vos interfaces web.

JQuery iPhone-Style Checkboxes est un plugin pour JQuery ou Prototype qui permet de créer des bouton façon iPhone pour remplacer vos bonnes vielles checkboxes.

Son utilisation est ultra simple, il suffit d’importer le script et d’instrumenter les checkboxes (ici avec JQuery):

<head>
  <script src="jquery-1.3.2.js" type="text/javascript"></script>
  <script src="jquery/iphone-style-checkboxes.js" type="text/javascript"></script>
  <link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" />
...
  <script type="text/javascript">
    $(document).ready(function() {
      $(':checkbox').iphoneStyle();
    });
  </script>
</head>

li-iphone-chekbox

Vous pouvez également personnaliser les labels des boutons. Par défaut ils sont à « ON » et « OFF ».

$(':checkbox').iphoneStyle({
      checkedLabel: 'Activé',
      uncheckedLabel: 'Désactivé'
});

Je vois bien ce genre de bouton dans une interface d’administration d’un plugin Wordpress par exemple. Je trouve le rendu très bon d’ailleurs. Vous pouvez également personnaliser les couleurs et formes en utilisant la feuille de style CSS et les images jointes.

Téléchargez le package JQuery iPhone-Style Checkboxes