Diferencia entre revisiones de «Carrusel con limite en Liferay»

De Dos Ideas.
Saltar a: navegación, buscar
Línea 1: Línea 1:
−
== Introducción ==
+
== Implementación ==
 +
 
 +
Utilizamos una estructura y template de Liferay. La estructura es un archivo XML y el template es un archivo velocity.
 +
La estructura es la que define los campos que necesita el web content para crearse. Luego el template de velocity renderiza la estructura mencionada anteriormente.
 +
Para implementarlo utilizamos como base el carrusel que provee Bootstrap. Dicho carrusel se caracteriza por ser responsive.
 +
Para que además sea compatible con IE7+, utilizamos la libreria "respond.js" y algunos meta-tags html. El head debe tener lo siguiente:
  
−
Para empezar, es correcto aclarar que el tooltip de ayuda no es un componente con estructura y template. Este componente tiene solo una estructura y el renderizado
+
<head>
−
queda a manos del componente que lo utiliza.
+
  <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" media="screen" />
−
Su funcionalidad principal es mostrar un tooltip de ayuda y su contenido es personalizable.
+
  <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.css" media="screen" />
−
Tiene soporte para IE7+/Firefox/Chrome/Safari.  
+
  <meta http-equiv="X-UA-Compatible" content="IE=8"/>
 +
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
 +
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
 +
  <script src='js/lib/jquery-1.10.1.min.js' type='text/javascript'> </script>
 +
  <script src='js/lib/bootstrap.min.js' type='text/javascript' > </script>
 +
  <script src='js/lib/respond.min.js' type='text/javascript' > </script>
 +
</head>
  
−
== Implementación ==
+
Hay que tener en cuenta que respond.js debe cargarse luego de la libreria de jquery y bootstrap.
  
−
Como mencioné anteriormente, el tooltip de ayuda solo cuenta con una estructura. En la implementacion elegida, la misma está compuesta por un solo campo de texto
+
Además, para que el estilo "Opacity" sea soportado por IE7+, utilizamos el estilo: Alpha(Opacity=100).
−
enriquecido que será el que contiene la información del tooltip.
+
Por ejemplo, si necesitamos que nuestro div tenga una opacidad del 50%:
−
El componente que quiera utilizar dicho tooltip tiene que heredar la estructura del tooltip de ayuda y además tiene que cambiar su forma de renderizarse adicionando un
 
−
div donde guarde la informacion del campo de texto enriquecido.
 
−
Por último, para convertir en un tooltip al div anterior, utilizamos una libreria js llamada qtip2. La misma nos permite de una forma muy facil crear un tooltip
 
−
altamente personalizable.
 
−
Como particularidad del estilado con lo único que nos encontramos es que para IE7 y IE8 no  es soportado el estilo display: inline-block. La solucion es agregar
 
−
los siguientes estilos:  
 
  
−
  div{  
+
  div{
−
display: inline-block;  
+
  filter: Alpha(Opacity=50);
−
zoom: 1;
+
  opacity: 0.5;
−
*display: inline;
 
 
  }
 
  }
  
−
 
+
Para que se puedan cargar varios carruseles en la misma página, el id identificador de cada instancia esta representado  por el id de la estructura(ej: "carrusel"), y  
−
== Conclusión ==
+
por el titulo del web-content (ej:"web-content-1"), siendo el id resultante "carrusel-web-content-1". Esto convierte a cada instancia del carrusel en única siempre y cuando
−
El tooltip de ayuda nos provee una funcionalidad que otro componente puede utilizar. Esta separación de tooltip de ayuda y componente nos permite una gran reutilizacion
+
los titulos de los web-content sean diferentes.
−
de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes.
 

Revisión del 14:32 2 ago 2013

Implementación

Utilizamos una estructura y template de Liferay. La estructura es un archivo XML y el template es un archivo velocity. La estructura es la que define los campos que necesita el web content para crearse. Luego el template de velocity renderiza la estructura mencionada anteriormente. Para implementarlo utilizamos como base el carrusel que provee Bootstrap. Dicho carrusel se caracteriza por ser responsive. Para que además sea compatible con IE7+, utilizamos la libreria "respond.js" y algunos meta-tags html. El head debe tener lo siguiente: 

<head>
 <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.css" media="screen" />
 <meta http-equiv="X-UA-Compatible" content="IE=8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
 <script src='js/lib/jquery-1.10.1.min.js' type='text/javascript'> </script>
 <script src='js/lib/bootstrap.min.js' type='text/javascript' > </script>
 <script src='js/lib/respond.min.js' type='text/javascript' > </script>
</head>

Hay que tener en cuenta que respond.js debe cargarse luego de la libreria de jquery y bootstrap.

Además, para que el estilo "Opacity" sea soportado por IE7+, utilizamos el estilo: Alpha(Opacity=100). Por ejemplo, si necesitamos que nuestro div tenga una opacidad del 50%: 

div{
 filter: Alpha(Opacity=50);
 opacity: 0.5;
}

Para que se puedan cargar varios carruseles en la misma página, el id identificador de cada instancia esta representado por el id de la estructura(ej: "carrusel"), y por el titulo del web-content (ej:"web-content-1"), siendo el id resultante "carrusel-web-content-1". Esto convierte a cada instancia del carrusel en única siempre y cuando los titulos de los web-content sean diferentes.

Obtenido de «https://dosideas.com/wiki/index.php?title=Carrusel_con_limite_en_Liferay&oldid=6875»