begin process at 2012 02 14 08:12:50
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > 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

Note :
5 / 10 - par 1 personne
5,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :style, framework, prototype, librairie, classe Niveau :Initié Date de création :24/12/2006 Date de mise à jour :24/12/2006 02:28:42 Vu :2 955
Auteur : LocalStone

Ecrire un message privé
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 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

RÉCUPERER LA LARGEUR D'AFFICHAGE D'UN TEXTE
Source avec Zip MACHINE DE TURING (ENTIÈREMENT CONFIGURABLE) ...
PSEUDO SELECTBOX EN DHTML ...
Source avec Zip JEU DE LA VIE DE CONWAY ...
Source avec Zip CONVERTISSEUR DE COULEUR RGB VERS HTML ET VICE VERSA
Toutes les sources de LocalStone

 Sources de la même categorie

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

JAVASCRIPT, LA POO AUTREMENT... par emericv
CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S... par Kimjoa
Source avec Zip Source avec une capture UID - FRAMEWORK JAVASCRIPT par Kimjoa
Source avec Zip CLASSE AJAX COMPLÈTE par Arto_8000

Commentaires et avis

Commentaire de Arto_8000 le 24/12/2006 17:12:45

En générale ça l'a l'air très bien, je n'ai rien à dire au sujet de la structure du code. J'ai juste une petite précision à faire au sujet de ta fonction decToHex. Comme il m'a été mentionné dans une source que j'ai posté au sujet de la conversion de chiffre, pour passer d'un nombre décimal à une autre base on peut passer par la fonction toString.

Ex :

x = 255;
alert(x.toString(16));

Cela va retourner FF.

Sur ce bonne vacance et Joyeux Noël.

Commentaire de masternico le 23/01/2007 09:12:36

comme disait arto_8000, dans l'ensemble c'est pas trop mal. Du moin, l'idée est bonne, par contre, une fois fini, l'ensemble risque de faire un peut "usine à gaz" surtout si tu veux coder autant d'objet qu'il en existe dans la norme W3C. Mais bon, c'est réalisable. Bon courage.

 Ajouter un commentaire


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


Nos sponsors


Sondage...

Comparez les prix


Mio - Moov V735 - GPS Europe - Ecran 7"
Entre 305€ et 375€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Renewable Energy is Within Reach
Photo maison de village du cap corse (pietracorbara) 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,357 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)