Réaliser des coins arrondis avec JQuery

( 0 Votes )

Écrit par Dark

Jeudi, 05 Août 2010 19:53

Je vous propose dans ce chapitre, la création d'un cadre aux coins arrondis avec la librairie Jquery en Javascript. Il pourra servir pour y afficher des news sur un site Internet, une galerie photos, un article, un menu etc...

Conception des coins arrondis ?
Le code HTML
Le code Javascript
Le code CSS

Tout d'abord, voici le résultat de ce que l'on doit obtenir :

cadre_aux_coins_arrondis

Il existe plusieurs techniques pour arrondir les angles d'un cadre ou d'un bloc (balise "div" en HTML) :

Soit en créant une image prédéfini avec Photoshop avec l'outil rectangle arrondi
Soit en utilisant les propriétés CSS 3 mais cela n'est pas compatible sur tous les navigateurs
Soit en Javascript avec Jquery et en HTML, ce que nous verrons par la suite.

On aurait très bien pu arrondir les angles exclusivement en HTML/CSS mais cela pourrait alourdir votre code HTML.

Conception des coins arrondis?

Pour arrondir les angles, il va falloir créer avec Photoshop ou autre logiciel de dessin, un cercle de 22px sur 22px de la couleur que vous voulez.

Comme ceci : rond photoshop

Le code HTML?

Nous allons créer notre bloc en HTML à l'aide d'une "div" comme ceci:

code HTML

<div id="contenu_bloc" class="rond">
<p>Notre code HTML pour créer notre bloc et y ajouter nos coins arrondis par la suite</p>
<p>Le code HTML n'est pas très compliqué, vous pouvez y mettre tous ce que vous voulez dans ce cadre</p>
</div>

Le code javascript avec Jquery ?

code Javascript

$(document).ready(function(){
$('div.rond ').wrap('<div class="cadre"></div>');
$('div.cadre').prepend('<div class="haut_droit"></div><div class="haut_gauche"></div>');
$('div.cadre').append('<div class="bas_droit"></div><div class="bas_gauche"></div>');
});

Explication des fonctions utilisées :

Wrap : Entoure une structure d'éléments par d'autres éléments. La fonction ajoutera donc un bloc 'cadre' à l'extérieur de notre bloc HTML 'contenu_bloc'
prepend : Ajoute du contenu à l'intérieur des éléments sélectionnés, au début. En l'occurrence à l'intérieur du bloc 'cadre', on ajoute 2 autres blocs, 'haut droit' et 'haut gauche'
append : C'est la même chose que la fonction prepend sauf que c'est à la fin et non au début

Vous pouvez retrouver l'explication de ces fonctions sur la documentation de Jquery. Ici, nos fonctions vont nous permettre de rajouter du code HTML afin d'ajouter nos angles à chaque coin de notre cadre.

Notre feuille de style CSS?

code Css

#contenu_bloc{
background-color:#46e8ad; /*on impose une couleur de fond*/
padding: 0 5px;
}

.cadre{
background-color:#46e8ad;
width:35% /*on met une largeur en pourcentage pour que ça puisse s'adapter à toutes les résolutions d'écran*/
}

div p{
margin: 0;
}
.cadre p{
text-align:justify; /*on justifie le texte à l'intérieur du bloc*/
}
.haut_droit, .haut_gauche,.bas_droit, .bas_gauche{
width:11px;
height:11px;
background-repeat: no-repeat; /*on ne veut pas répéter notre image comme motif donc on utilise la propriété no-repeat*/
}
.haut_gauche{
background: url('rond.png') 0 0;
}
.haut_droit{
background: url('rond.png') 11px 0;
float: right;
}
.bas_gauche{
background: url('rond.png') 0 11px;
}
.bas_droit{
background: url('rond.png') 11px 11px;
float: right;
}