ES

www.codigo-facil.com > Mi framework en Javascript, la funcion CSS

Mi framework en Javascript


Capitulo 4 : La funcion CSS

Capitulos

Mi framework en Javascript, introduccion

Primer capitulo de una serie donde veremos en que consiste y como desarrollar nuestro propio framework en javascript.

Mi framework en Javascript, la clase principal

En este capitulo definiremos la base de nuestro framework, crearemos una clase base a partir de la cual iremos incluyendo todas las funcionalidades del framework.

Mi framework en Javascript, los selectores

Los selectores son uno de los pilares fundamentales a partir del cual se desarrollan el resto de funcionalidades del framework. En el capitulo que nos ocupa veremos que son exactamente y como implementarlos.

Mi framework en Javascript, la funcion CSS

En este capitulo veremos como implementar una funcion, que nos permita cambiar el aspecto de cualquier elemento incluido en nuestra pagina html, a traves de la utilizacion de las propiedades CSS.

Mi framework en Javascript, efectos parte 1

En este capitulo vamos a incluir una funcionalidad a nuestro framework que nos permita aplicar efectos para poder mover o cambiar de tamaño cualquier elemento de nuestro documento HTML.

Mi framework en Javascript, efectos parte 2

En este articulo vamos a desarrollar una funcion para nuestro framework, que nos permita crear efectos de transicion entre 2 colores diferentes.

Mi framework en Javascript, transparencias

En este articulo veremos como modificar la propiedad alpha de cualquier elemento de nuestro documento HTML, para crear asi transparencias haciendo mas artactivo el diseño de nuestra pagina.

Introduccion :


Una vez que hemos implementado la base para nuestro frameWork, es momento de empezar a incluir las diferentes funcionalidades que hagan nuestra api realmente util para su utilizacion en nuestros proyectos.

La primera de estas funciones es la que voy a implementar en el capitulo que nos ocupa y que nos permitira poder cambiar el aspecto, mediante propiedades CSS, de cualquiera de los elementos que componen nuestro documento HTML.

Implementacion


Recordar que el codigo que veremos a continuacion habra que incluirlo dentro de la clase principal, implementada en el capitulo 2, en el espacio dedicado a añadir nuevas funcionalidades, justo despues de la ultima funcion.

El codigo correspondiente a la funcion CSS es el siguiente:
  1. this.css = function(name,value)
  2. {

  3. /*
  4. para dar mas dinamismo a la funcion existen
  5. diferentes posibilidades :

  6. 1. name es un objeto , entonces se supone que se le
  7.     ha pasado un array con todos los parametros a cambiar.

  8. 2. name es un string y value no esta definido.

  9. 3. name es un string y value si que esta definido. Quiere
  10.     decir que se le ha pasado un unico para metro con
  11.     su valor a cambiar
  12. */

  13.   if (typeof name=='object')
  14.   {
  15.     /*1. Caso, pasamosun array con las propiedades CSS y sus
  16.     valores, por lo que reccorremos dicho array aplicando cada
  17.     modificacion a cada objeto de la cache del selector
  18.     */
  19.     for (nam in name)
  20.       for (i=0;i<this.objs.length;i++)
  21.         this.objs[i].style[nam] = name[nam];
  22.   }
  23.   else
  24.   if (typeof name=='string' && !value)
  25.   {
  26.     /*
  27.     2. Caso, pasamos una cadena de texto que contiene
  28.     todas las propiedades CSS s modificar y sus valores
  29.     por lo que previamente separamos la cadena a traves
  30.     del punto y coma y asi obtenemos un array con
  31.     todos los valores a cambiar, solo tendremos que
  32.     separar dicha cadena por ":" para asi poder obtener el
  33.     par propiedad/valor en variables y poder utilizarlos
  34.     para cada elemento de la cache del selector
  35.     var attrib = name.split(';')
  36.     var j=0;
  37.     var strTmp = '';
  38.     for (i=0;i<this.objs.length;i++)
  39.     {
  40.       for (j=0;j<attrib.length;j++)
  41.       {
  42.         strTmp = attrib[j].substring(0,attrib[j].indexOf(':'));
  43.         strTmp2 = attrib[j].substring(attrib[j].indexOf(':')+1);
  44.         this.objs[i].style[strTmp] = strTmp2;
  45.       }
  46.     }
  47.   }
  48.   else
  49.   { 
  50.   /*3. Caso, solo tenemos que recorrer la cache del
  51.   selector e ir aplicanco a cada propiedad CSS su valor
  52.   correspondiente */
  53.   for (i=0;i<this.objs.length;i++)
  54.     this.objs[i].style[name] = value;
  55.   }

  56. return this;
  57. }

Analisis de la funcion :


He implementado la funcion CSS para poder ejecutarla de 3 formas diferentes, dependiendo de los valores que pasamos como parametros :
  1. El parametro "name" es un Array, de esta forma invocamos la funcion pasandole un array con las diferentes propiedades CSS acompañado de los respectivos valores a modificar.

    Ejemplo :

    1. /*
    2. Codigo a probar dentro del documento HTML
    3. */
    4. <div id="prueba">
    5.   Esto es una prueba
    6. </div>

    7. <script>
    8. $('prueba').css({'color':'#ff00ff','fontSize':'25px'});
    9. </script>
  2. La segunda posibilidad, seguramente la que mas utilizaermos, es una variante de la primera, pero esta vez el parametro "name" es una cadena de texto donde pasamos todos las propiedades CSS junto con sus valores a aplicar, separados por punto y coma.

    Ejemplo:

    1. /*
    2. Codigo a probar dentro del documento HTML
    3. */
    4. <div id="prueba">
    5.   Esto es una prueba
    6. </div>

    7. <script>
    8. $('prueba').css('color:#ff00ff;fontSize:25px');
    9. </script>
  3. La ultima posibilidad es la mas sencilla de todas, esta vez invocamos la funcion pasandole 2 cadenas de texto "name" y "value", la primera cadena es para indicar que propiedad quiero cambiar, mientras que la segunda cadena contiene el valor que queremos aplicar.

    Ejemplo :

    1. /*
    2. Codigo a probar dentro del documento HTML
    3. */
    4. <div id="prueba">
    5.   Esto es una prueba
    6. </div>

    7. <script>
    8. $('prueba').css('color','#ff00ff');
    9. </script>

Como hemos visto existe 3 formas de ejecutar la funcion "css", seguramente sera la 2 la mas utilizada puesto que es facil de ejecutar y ademas, nos permite cambiar varias propiedades CSS de una sola vez.

Un punto en comin en las 3 posibilidades, es el bucle que recorre la cache de objetos del frameWork, aplicando los cambios solicitados a cada elemento. Esto es asi ya que como vimos en el capitulo 3 podremos seleccionar varios elementos de un documento HTML a traves de un selector.

Y aqui termino este articulo, espero que os haya resultado de interes, para cualquier duda u aclaracion no dudeis en preguntar, hasta luego y nos vemos en futuras publicaciones.

Ultimas noticias

Crea tu propio framework en javascript

Recopilacion de articulos donde mostrare paso a paso como podemos crear nuestro propio framework en javascript, totalmente funcional y listo para ser utilizado en nuestros futuros proyectos.

Para mas informacion :

Tutorial para crear tu propio FrameWork en JavaSript

Más información
13/12/2013 11:42:57

Como crear una DLL en delphi?

En esta serie de 2 capitulos veremos como crear y utilizar una DLL en Delphi.

Abajo os dejo los enlaces a estos 2 capitulos que componen este mini tutorial, espero que sea de vuestro agrado :

Capitulo 1 : Creacion y utilizacion de una DLL

Capitulo 2 : Creacion de un formulario dinamico utilizando una DLL
Más información
19/09/2013 17:35:59

Ya puedes publicar tu opinion

A partir de ahora ya puedes comentar todas las publicaciones que encuentres en el portal.

Podras opinar tanto si algo te gusta como si no, o si crees que es conveniente completar alguna publicacion, ya que la encuentras incompleta o erronea.

O simplemente por si nos quieres felictar por algo bien hecho :-).

Valoraremos cualquier critica que nos puedas hacer.
Más información
20/05/2013 15:30:10

Tutorial PHP5

Fundamentos de la programacion orientada a objetos
Un interesante tutorial repartido en una serie de capitulos donde se tratan los conocimientos basicos de la programacion orientada a objetos (POO) en PHP5.

Para mayor informacion siga el siguiente enlace :

Tutorial POO en PHP

Más información
04/09/2013 15:44:29
0