Le 25 septembre 2009 0

Billets • Webworker

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

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 [Webdesign] Créez des checkboxes façon iPhone

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 [Webdesign] Créez des checkboxes façon iPhone

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.

download ico [Webdesign] Créez des checkboxes façon iPhoneTéléchargez le package JQuery iPhone-Style Checkboxes

download ico [Webdesign] Créez des checkboxes façon iPhoneTéléchargez iPhone-style Checkboxes for Prototype

Crédits: JFords

• • • •