Conteneurs HTML à coins ronds

C'est reconnu qu'un programmeur qui effectue de l'intégration fera généralement un travail douteux. On doit se l'avouer, pour la plupart, nous n'avons pas l'oeil. C'est pourquoi j'apprécie les librairies graphiques qui me simplifient la vie comme script.aculo.us et Open Rico. Dans le cas de Rico, l'avantage que j'en tire est de pouvoir générer des conteneurs à coins ronds (rounded corners) en quelques lignes de code, et par programmation, pour mon plus grand bonheur.

On doit d'abord charger sa librairie principale (rico.js) et la dépendance à prototype.js. Ensuite, on chargera dynamiquement l'extension "Corner" et on appliquera la transformation sur les conteneurs désirés en utilisant les ID.

<script src="js/prototype/1.6.0.3/prototype-1.6.0.3-min.js"></script>
<script src="js/rico2/src/rico.js" type="text/javascript"></script>
<script type='text/javascript'>
Rico.loadModule('Corner');
Rico.onLoad( function() {
   Rico.Corner.round('conteneur1');
});
</script>

La fonction round() peut aussi recevoir des paramètres optionnels qui indiquent le type de coins à utiliser, la couleur de la bordure (s'il y a lieu) et quels coins on doit arrondir.

On y ajoute un peu de CSS pour rendre le tout joli. En plus de définir une classe "card" qui représente le conteneur principal, j'en crée une deuxième qui me permettra d'avoir un meilleur contrôle sur le détail que contiendra le conteneur.

body {
   font-family: verdana;
   font-size:12px;
}

div.card {
   background-color: #cecece;
   float:left;
   margin:0;
   padding:0;  
   width:400px;
   min-height:150px;
   height:150px;
}

div.card-detail {
   height:100%;
}

Un exemple de conteneur qui sera transformé :

<div id="conteneur1" class="card">
   <div class="card-detail">
   </div>
</div>

Quelques recommandations :

• attention de ne pas appeler round() deux fois sur le même item...
• faites gaffe avec les bordures et l'application des classes CSS avec Internet Explorer. Ça peut être désastreux.
• sous IE, assurez-vous d'appliquer la bordure à l'aide des options Rico et pas avec le CSS. Autrement, le CSS risque d'être appliqué au rectangle et la bordure pourrait sembler brisée dans les coins
• encore avec IE 7, le seul truc que j'ai trouvé pour pouvoir spécifier la hauteur du conteneur comme il faut a été de mettre un conteneur à l'intérieur du conteneur principal avec une hauteur de 100% (comme l'exemple ci-dessous) et un min height au div principal.
  

Tout comme script.aculo.us, Rico possède aussi des fonctionnalités de drag and drop et des effets graphiques mais la transformation en coins ronds avec Rico est la seule portion que j'utilise en complément pour le moment.