Accueil > > > DÉBUT D'UNE LIBRAIRE DE GESTION AVANCÉE DU STYLE ...
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
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
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
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
Initialisation de classe style PHP [ par DakM ]
[code=php]$i = 1; $nom = 'maClasse' . $i; $h = new $nom();[/code] Comment faire ceci en javascript ?
css [ par fijou12 ]
bonjour j'ai un problème avec une feuille de style css pour l'impression. je travaille avec dreamweaver8. pour importer les classe définies dans ma fe
Comment créer son package de script ou de classe? [ par aerolyte ]
Bonjour, J'ai regardé sans grand résultat comment aborder ce sujet, Toutfois le web est pollué par des librairies ou package tout fait sans pour au
css dynamique [ par lilj ]
Bonjour, je cherche une méthode simple pour changer la classe d'un input. Exemple: au début on a un input avec un style, lorsque le focus est activé
Afficher / cacher (un seul s'affiche à la fois) [ par charlie101097 ]
bonjour, En théorie, c'est d'après moi la bonne partie pour poster. Après avoir épluché le forum sur mon problème, je décide de poster car je n'ai pas
Image.prototype.MaMethode [ par paillekane ]
Bonjour à tous, Voilà je cherche à ajouter des propriétés et méthodes à l'objet Image. Voici un bout de code : [code=js]//Ajout de propriétés et méth
getElementById problème (style) [ par arbilus ]
Bonjour, pouvez-vous m'expliquer pourquoi cela ne fonctionne pas (l'iframe n'est pas à 1px ) : [code=js] function h1(){ document.getElementById('
probleme avec mon code avec firefox et opera [ par savagestudio ]
bonjour (mon clavier et en norvegien, desole [^^sad2]) , J ai u probleme avec mon code , il marche parfaitment avec safari, chrome,IE mais pas avec fi
|
Derniers Blogs
XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz
Logiciels
DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|