Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DIV ARRONDIE GÉRÉE EN CLASSE


Information sur la source

Catégorie :Effets Classé sous : arrondi, div, classe Niveau : Initié Date de création : 30/03/2007 Date de mise à jour : 30/05/2007 11:26:22 Vu / téléchargé: 8 040 / 689

Note :
7,5 / 10 - par 2 personnes
7,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note


Description

Cliquez pour voir la capture en taille normale
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 )
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

30 mai 2007 11:26:22 :
Optimisations : -> temps de calcul des arrondies ( passage de 3 secondes environs à quelques millisecondes, de l'ordre de 70 ). -> nombre de div générée pour les arrondies ( diviser par 6 environs )

Commentaires et avis

signaler à un administrateur
Commentaire de FREMYCOMPANY le 30/03/2007 19:04:32

Pour l'instant en effet c'est trop lent....
Je pense qu'il faudrait se contenter d'un radius simple et surtout utilser -moz-radius ou un truc du genre pour FireFox ;)

Sinon, ca me semple intéressant

signaler à un administrateur
Commentaire de FREMYCOMPANY le 30/03/2007 19:07:22

Encore un truc coté nomenclature cette fois :

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

signaler à un administrateur
Commentaire de jjdagadir le 31/03/2007 14:18:19

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

signaler à un administrateur
Commentaire de stfou le 01/04/2007 13:09:19

Super effet, mais je suis d'accord avec fremycompany, il faudrais améliorer la compatibilité. même si c'est compliqué ;)

signaler à un administrateur
Commentaire de WhiteDwarf le 01/05/2007 03:05:29

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)

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Eviter que la class parent prenne le pas sur la class fille... [ par atomik29 ] Bonjour a tous,voici mon probleme :J'ai une serie de div qui me servent a creer un div arrondi avec images pour les bords.J'ai rajouté dans la classe Probleme prévisualisation HTML [ par Jarod1980 ] Bonjour,J'aimerais faire une prévisualisation d'un contenu HTML présent entre 2 balises de type div ==&gt; &lt;div id="Editor" width="100%" height="10 Problème avec padding et height [ par MadM@tt ] Bonjour à tous,j'ai une question à laquelle la réponse doit etre simple mais elle me résiste depuis un certain temps.J'ai un div de taille fixe : 40px pb d'affichage avec IE [ par ebalexandr ] Bonjour à tous,J'ai un problème de compatibilité avec IE(sous FF aucune pb) voici le code : &lt;style type=<span class="attrib DOM : insertion string html [ par jotrash ] Bonjour tous le monde et merci de prendre le temps de lire ma question.Débutant en DOM je crée un div de la manière suivante :var mond= Builder.node(' Redimensionnement de font sur un document.getElementById(obj).innerHTML [ par cousinlol ] Bonsoir,J'ai une fonction impression et je veux redimensionner la taille de la police de ce que j'imprimeJ'ai fait var zi = "&lt;font style='font-size ondblclick sur une div [ par aberrada ] Bonjour tous le monde,Je récupère des valeurs d'une base de données, que je voudrais pouvoir modifier en double cliquant.J'ai fait une fonction qui ma Redimentionner un div dinamiquement en fonction de la taille de l'espace d'affichage du client [ par Assimil66 ] Bonjour à tousvoilà quelques jours que je me casse les dents la dessus : j'aimerais pourvoir redimentionner une div dinamiquement en fonction de l'esp Comment mettre le embed dans un div avec innerHTML [ par Debutant39 ] Bonjour. Voici un script que devrait me permettre de jouer 3 fois un son mais pour qu'il ne soit pas mitraillé, il me faut mettre une boucle de tempor sélection multiple de DIV pour un agenda [ par paguira ] Bonjour à tous, J'ai créé un agenda hebdomadier constitué d'un ensemble de " div " et non un tableau qui va du lundi au dimanche et de 00h00 à 23h


Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,374 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.