|
 Trouver une ressource
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 !
 DÉBUT D'UNE LIBRAIRE DE GESTION AVANCÉE DU STYLE ...
 Information sur la source
 Description
Salut à tous,
Alors je préviens avant que certaines personnes commencent à dire que ce code est nul, pas portable et tout ça ... Déjà, ça ne fonctionne pour l'instant que sur FireFox. C'est relativement simple à le rendre compatible avec Internet Explorer et je compte le faire une fois que le code sera un peu plus avancé. De plus, pour l'instant, on ne peut pas faire grand chose. Mais ce que je veux mettre en avant en postant cette source, ce n'est pas vraiment le côté programmation que ma soeur de 15 ans pourrait piger, mais plus l'aspect méthodologique et pratique de la chose.
En fait, ça fait un moment que j'ai découvert la librairie Prototype, mais sans jamais vraiment avoir chercher à comprendre comment elle fonctionnait. En fait ... Si quelqu'un c'est déjà donné la peine de vraiment regarder les possibilités du Javascript (et je sais qu'il y en a sur le réseau Codes-Sources ;) ), on peut se rendre compte que c'est vraiment un langage très puissant.
Du coup, on se rend compte qu'il est aisé de simuler des concepts assez poussés au niveau de la POO en allant même jusqu'à la gestion des namespaces et tout ça ...
BREF, tout ça pour dire que je n'ai pas trouvé de libraire complète qui gère le style. Du coup, bah pourquoi pas la coder soi-même.
L'avantage de coder une librairie de cette manière est de pouvoir éliminer toutes les incompatibilités entre navigateurs (bien qu'en l'état actuel du code, ça ne se voit pas vraiment). Je vous propose donc une manière de faire (pour l'instant, ça ne fait quasiement rien, mais je repète, c'est plus une méthodologie à mettre en place) ... Et j'attends maintenant de vous beaucoup de commentaires et de conseils pour continuer à coder ça en allant dans la bonne direction !
 Source
- <html>
- <head>
- <script type="text/javascript">
- function decToHex(dec)
- {
- var hexa = "0123456789ABCDEF";
- var hex = "";
- while(dec > 15)
- {
- tmp = dec - (Math.floor(dec / 16)) * 16;
- hex = hexa.charAt(tmp) + hex;
- dec = Math.floor(dec / 16);
- }
- hex = hexa.charAt(dec) + hex;
- return(hex);
- }
-
- function hexToDec(hex)
- {
- return parseInt(hex,16);
- }
-
- var Class =
- {
- create : function()
- {
- return function()
- {
- this.initialize.apply(this, arguments);
- }
- }
- }
-
- var Abstract = new Object();
-
- var Color = Class.create();
- Color.prototype =
- {
- RED : 0,
- GREEN : 0,
- BLUE : 0,
- initialize : function(){},
- toHexadecimal : function()
- {
- var hex = "#";
- var red = decToHex(this.RED);
- var green = decToHex(this.GREEN);
- var blue = decToHex(this.BLUE)
- hex += ((red.length == 1) ? '0' : '') + red;
- hex += ((green.length == 1) ? '0' : '') + green;
- hex += ((blue.length == 1) ? '0' : '') + blue;
- return hex;
- }
- }
-
- Color.fromRGB = function(red, green, blue)
- {
- var color = new Color();
- color.RED = red;
- color.GREEN = green;
- color.BLUE = blue;
- return color;
- }
-
- var LineStyle =
- {
- SOLID : "solid",
- DOUBLE : "double",
- NONE : "none"
- }
-
- var Line = Class.create();
- Line.prototype =
- {
- STYLE : null,
- COLOR : null,
- WIDTH : null,
- initialize : function(style, color, width)
- {
- this.STYLE = style;
- this.COLOR = color;
- this.WIDTH = width;
- }
- }
-
- var Border = Class.create();
- Border.prototype =
- {
- RIGHT : null,
- LEFT : null,
- TOP : null,
- BOTTOM : null,
- initialize : function()
- {
- var compact = (arguments.length == 1) ? true : false;
- this.RIGHT = arguments[0];
- this.LEFT = (compact) ? arguments[0] : arguments[1];
- this.TOP = (compact) ? arguments[0] : arguments[2];
- this.BOTTOM = (compact) ? arguments[0] : arguments[3];
- }
- }
-
- Element.prototype.applyStyle = function(stl)
- {
- this.style.borderStyle = stl.BORDER.TOP.STYLE + " " + stl.BORDER.RIGHT.STYLE + " " + stl.BORDER.BOTTOM.STYLE + " " + stl.BORDER.LEFT.STYLE;
- this.style.borderColor = stl.BORDER.TOP.COLOR.toHexadecimal() + " " + stl.BORDER.RIGHT.COLOR.toHexadecimal() + " " + stl.BORDER.BOTTOM.COLOR.toHexadecimal() + " " + stl.BORDER.LEFT.COLOR.toHexadecimal();
- this.style.borderWidth = stl.BORDER.TOP.WIDTH + "px " + stl.BORDER.RIGHT.WIDTH + "px " + stl.BORDER.BOTTOM.WIDTH + "px " + stl.BORDER.LEFT.WIDTH + "px";
- }
-
- window.onload = function()
- {
- var div = document.getElementById("test");
- var bordure = new Border
- (
- new Line
- (
- LineStyle.SOLID,
- Color.fromRGB(0, 0, 0),
- 5
- )
- );
- div.applyStyle
- (
- {
- BORDER : bordure
- }
- );
- }
- </script>
- </head>
- <body>
- <div id="test">Salut ! </div>
- </body>
- </html>
<html>
<head>
<script type="text/javascript">
function decToHex(dec)
{
var hexa = "0123456789ABCDEF";
var hex = "";
while(dec > 15)
{
tmp = dec - (Math.floor(dec / 16)) * 16;
hex = hexa.charAt(tmp) + hex;
dec = Math.floor(dec / 16);
}
hex = hexa.charAt(dec) + hex;
return(hex);
}
function hexToDec(hex)
{
return parseInt(hex,16);
}
var Class =
{
create : function()
{
return function()
{
this.initialize.apply(this, arguments);
}
}
}
var Abstract = new Object();
var Color = Class.create();
Color.prototype =
{
RED : 0,
GREEN : 0,
BLUE : 0,
initialize : function(){},
toHexadecimal : function()
{
var hex = "#";
var red = decToHex(this.RED);
var green = decToHex(this.GREEN);
var blue = decToHex(this.BLUE)
hex += ((red.length == 1) ? '0' : '') + red;
hex += ((green.length == 1) ? '0' : '') + green;
hex += ((blue.length == 1) ? '0' : '') + blue;
return hex;
}
}
Color.fromRGB = function(red, green, blue)
{
var color = new Color();
color.RED = red;
color.GREEN = green;
color.BLUE = blue;
return color;
}
var LineStyle =
{
SOLID : "solid",
DOUBLE : "double",
NONE : "none"
}
var Line = Class.create();
Line.prototype =
{
STYLE : null,
COLOR : null,
WIDTH : null,
initialize : function(style, color, width)
{
this.STYLE = style;
this.COLOR = color;
this.WIDTH = width;
}
}
var Border = Class.create();
Border.prototype =
{
RIGHT : null,
LEFT : null,
TOP : null,
BOTTOM : null,
initialize : function()
{
var compact = (arguments.length == 1) ? true : false;
this.RIGHT = arguments[0];
this.LEFT = (compact) ? arguments[0] : arguments[1];
this.TOP = (compact) ? arguments[0] : arguments[2];
this.BOTTOM = (compact) ? arguments[0] : arguments[3];
}
}
Element.prototype.applyStyle = function(stl)
{
this.style.borderStyle = stl.BORDER.TOP.STYLE + " " + stl.BORDER.RIGHT.STYLE + " " + stl.BORDER.BOTTOM.STYLE + " " + stl.BORDER.LEFT.STYLE;
this.style.borderColor = stl.BORDER.TOP.COLOR.toHexadecimal() + " " + stl.BORDER.RIGHT.COLOR.toHexadecimal() + " " + stl.BORDER.BOTTOM.COLOR.toHexadecimal() + " " + stl.BORDER.LEFT.COLOR.toHexadecimal();
this.style.borderWidth = stl.BORDER.TOP.WIDTH + "px " + stl.BORDER.RIGHT.WIDTH + "px " + stl.BORDER.BOTTOM.WIDTH + "px " + stl.BORDER.LEFT.WIDTH + "px";
}
window.onload = function()
{
var div = document.getElementById("test");
var bordure = new Border
(
new Line
(
LineStyle.SOLID,
Color.fromRGB(0, 0, 0),
5
)
);
div.applyStyle
(
{
BORDER : bordure
}
);
}
</script>
</head>
<body>
<div id="test">Salut ! </div>
</body>
</html>
 Conclusion
Alors il y a bien-sûr plusieurs choses à ajouter. Pourquoi pas un objet Font qui contient le nom de la police, la couleur et tout ça. En fait, il faudrait créer autant d'objet que nécessaire pour pouvoir émuler l'ensemble des styles possibles. Mais il y a surtout 2 choses à corriger dès maintenant. Même 3, je dirais ...
D'abord, la fonction applyStyle ne va pas. Il faudrait trouver une manière d'algorithmiser tout ça ainsi que de la rendre compatible avec tous les navigateurs, je ne sais pas trop comment ... Des idées ?
Ensuite, toujours avec applyStyle. La fonction prend comme paramètre une classe anonyme et ça non plus, ça ne va pas du tout. Il faudrait plutôt coder un objet Style ... Mais comment ? Quelles méthodes lui attribuer ? Donc idem ... Si vous avez des idées ... Faut pas hésiter !
Je ne mets pas cette source en débutant parce que ... Je ne pense pas que ce soit si facile de comprendre tout ça ...
 Historique
- 24 décembre 2006 02:28:42 :
- Fôte d'aurtogafe
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Chnager une classe CSS [ par MadMax1024 ]
Bonjour à tous,Ma question sera simple du moins je l'espère.Je suis en train de créer un site Web dans lequel j'ai crée une feuille de style CSS.Celle
boucle avec prototype [ par fs074995 ]
Dans un code j'ai la ligne suivante$('ano1').style.backgroundColor='#FFFFB0';Cette ligne se répète 50 fois ano1,ano2,ano3 ......Je voudrais faire un t
effet de rotation d'iamge avec script, et lien sur image [ par RomantikA ]
Bonjour,je ne sais pas trop si c'est le bon endroit pour expoqer mon problème, mais il s'agit d'un code javascript, donc j'ai tenté le tout pour le to
javascript et css [ par limalima ]
Bonjour à tous,je débute en javascript et css, je souhaite changer la couleur d'un mot, le mot prndra des couleurs differentes pendant toute lavisuali
extjs bouton [ par jeud84 ]
Salut à vous tous, débutant dans le domaine je cherche à reproduire ce genre de présentation : <meta name="Generator" content="M
Changer feuille de style selon navigateur [ par hugo7 ]
Bonjour à tous cela fait 2-3 jours que je cherche une solution à cette question :Comment changer la feuille de style au chargement de la page en fonct
onreadystatechange et this.... [ par vinise ]
bonjour à tousjai une petite question pour vous... j'ai créer une classe Ajax qui est et dans cette classe j'utilise onreadystatechange avec une fonct
Problème d'affichage des form avec Ajax sous ie [ par nemo_ulysse31 ]
<link rel="Fi
Compatibilité W3C - style.left [ par stanilou ]
Bonjour,Ce test fonctionne sous IE mais pas sous FF (Le div ne se déplace pas):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.or
positionnement div emplacement pointeur et map area [ par demnatis ]
Bonjour a tous,Les forums de javascript.com m'ont souvent fait progresser dans mes recherches et j'y ai souvent trouvé la solution corriger mes script
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|