Div arrondie gérée en classe

Soyez le premier à donner votre avis sur cette source.

Vue 13 846 fois - Téléchargée 1 093 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

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 ;-)
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)
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
Super effet, mais je suis d'accord avec fremycompany, il faudrais améliorer la compatibilité. même si c'est compliqué ;)
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
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
Afficher les 6 commentaires

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.