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 iphone ip addresse [Webdesign] Créez des checkboxes façon iPhone](http://blog.websourcing.fr/files/2009/09/iphone-ip-addresse.jpg)
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 li iphone chekbox [Webdesign] Créez des checkboxes façon iPhone](http://blog.websourcing.fr/files/2009/09/li-iphone-chekbox.png)
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
Téléchargez iPhone-style Checkboxes for Prototype
Crédits: JFords

