Websourcing.fr

Websourcing.fr » ActualitĂ©s, Web, Logiciels et Fun

Image pour [Webdesign] CrĂ©ez des checkboxes façon « iPhone »

[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

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

Téléchargez iPhone-style Checkboxes for Prototype

Crédits: JFords


Cet article vous a plu ?

Commenter Laissez un commentaire | Recevez les mises à jour Souscrivez au flux RSS | Partager : Twitter AddInto Fuzz del.icio.us Wikio FR Blogonet
Websourcing.fr - Tous droits réservés. Reproduction interdite sans accord préalable.
  1. Pas encore de commentaire. Soyez le premier à commenter!

(Ne sera pas publié)
  1. Pas encore de trackback.