Div arrondie gérée en classe

Soyez le premier à donner votre avis sur cette source.

Vue 13 771 fois - Téléchargée 1 073 fois

Description

Création de div ayant des bordures arrondies comme présentée sur la capture.
Il suffit d'instancier la classe RoundDiv avec en premier paramètre le composant ( div ) devant être arrondie puis le paramètre properties. quelques explication sur ce paramètre :
properties est un enregistrement d'enregistrement :
var props = [ ["property name1", "property value1" ], ["property name2", "property value2" ], ....]
les valeurs pour property nameX sont les suivantes :
- radius -> tous les rayons identiques.
- upperLeftRadiusX -> rayon X haut gauche
- upperLeftRadiusY -> rayon Y haut gauche
- upperRightRadiusX -> rayon X haut droit
- upperRightRadiusY -> rayon Y haut droit
- downerLeftRadiusX -> rayon X bas gauche
- downerLeftRadiusY -> rayon Y bas gauche
- downerRightRadiusX -> rayon X bas droit
- downerRightRadiusY -> rayon Y bas droit
- upperLeftClass-> Classe à utiliser sur la bordure haut/gauche ( par défaut : Plot )
- upperRightClass-> Classe à utiliser sur la bordure haut/droit ( par défaut : Plot )
- downerLeftClass-> Classe à utiliser sur la bordure bas/gauche ( par défaut : Plot )
- donwerRightClass-> Classe à utiliser sur la bordure bas/droit ( par défaut : Plot )
- upperClass -> Classe à utiliser sur la bordure haut ( par défaut : Plot )
- downerClass -> Classe à utiliser sur la bordure basse ( par défaut : Plot )
- leftClass -> Classe à utiliser sur la bordure gauche ( par défaut : Plot )
- rightClass -> Classe à utiliser sur la bordure droite. ( par défaut : Plot )

Ainsi il est possible de créer des divs ayant des bordures elliptiques ou ronde, et de personnaliser les dites bordures.
Attention, il faut bien respecter la casse :
un exemple est fourni dans main.js ( fonction init )

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Grom83
Messages postés
1
Date d'inscription
vendredi 3 février 2006
Statut
Membre
Dernière intervention
9 avril 2010
-
Moi je dis merci et intéressant ça me donne les bases pour reprendre et modifier a ma sauce ;-)
WhiteDwarf
Messages postés
510
Date d'inscription
samedi 29 décembre 2001
Statut
Membre
Dernière intervention
23 mai 2008
-
Malgré la lenteur, c'est pas mal ==> 8/10 en espérant rapidement une nouvelle version plus jolie !

En fait l'intérêt est de pouvoir génerer dynamiquement les arondis suivant le besoin, donc un background image passe pas forcément. Si l'on se met dans le cas d'un webgiciel, cela peut être intéressant de créer des formes en div dont on peut choisir l'arrondi. Sinon pour la rapidité, ça ne serait pas mieux de mixer le dynamisme avec les images ? (cf ==> php gd2)
stfou
Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
1 -
Super effet, mais je suis d'accord avec fremycompany, il faudrais améliorer la compatibilité. même si c'est compliqué ;)
cs_jjdagadir
Messages postés
127
Date d'inscription
lundi 7 avril 2003
Statut
Membre
Dernière intervention
6 mars 2009
-
Désolé Zobitol, mais bien sûr c'est très lent.
Alors pourquoi chercher à compliquer quelque chose de simple uniquement en css avec par ex un background-image de div???
Je ne mets pas de note pour ne pas décourager, mais çà vaudrait 1 pour le résultat graphique, et un peu plus pour le js, mais encore une fois, faisons simple...
Bon courage quand même pour d'autres sources.
Kenavo
FREMYCOMPANY
Messages postés
278
Date d'inscription
jeudi 12 janvier 2006
Statut
Membre
Dernière intervention
22 décembre 2008
-
Encore un truc coté nomenclature cette fois :

properties = { "radius": 3, "bgcolor": "#FFFFFF" }
propertiers.radius & properties.bgcolor

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.