viernes, 29 de abril de 2011

11

11
Publicado por en No hay comentarios:

viernes, 15 de abril de 2011

Un acordeón horizontal en sólo unas líneas


JMiur


Slidemenu es otro mini-script de Leigerber que, con solo unas líneas, nos da la posibilidad de crear una acordeón horizontal donde podemos agregar menúes, imágenes o cualquier otro contenido.




¿Qué necesitamos? El script que podemos descargar de su página y que tiene dos variaciones: el original funciona cuando colocamos el mouse encima de la solapa

y la variante que hace lo mismo pero las solapas se cierran cuando quitamos el mouse Sea cual sea la que elijamos, el ZIP contiene un ejemplo completo aunque, lo que necesitamos es muy poco.




Primero subimos el script a un servidor y lo cargamos en la plantilla antes de </head>:
<script src='URL_slidemenu.js' type='text/javascript'></script>
Luego, agregamos el estilo CSS que tendrá muchas variantes pero que, como mínimo dice esto:
<style type='text/css'>
.sm { /* es la clase genérica */
display: block;
height: VALORpx; /* el alto de la imagen o bloque */
list-style: none;
overflow: hidden
width: VALORpx;  /* el ancho total que normalmente será 100% */
}
.sm li { /* cada una de las solapas */
display: inline;
float: left;
overflow: hidden
}

</style>
Podemos crear utilizar la cantidad de solapas que queramos ya que será el mismo script el que se encargue de "repartirlas" de manera pareja a lo ancho. Esas solapas son sólo items de una lista así que sus propiedades CSS pueden ser múltiples, imágenes de fondo, bordes, tamaño, etc.



Creamos el menú con un poco de HTML; por ejemplo:
<ul id="nombre" class="sm">

<li>el contenido de la primera solapa</li>
<li>el contenido de la segunda solapa</li>
<li>el contenido de la tercera solapa</li>
</ul>
Por último, llamamos a la función correspondiente. Esto, lo podemos hacer de varias formas. En general, lo razonable sería agregarlo a la etiqueta body:
<body onload="slideMenu.build('ID',ancho,v1,v2,n)">
Pero, en Blogger, esto es complejo ya que el editor suele rechazarlo o bien transformarlo en algo ininteligible e inútil así que lo mejor es agregar la función justo antes de </body> o después del código HTML del acordeón; en ambos casos, el código es el mismo:
<script type='text/javascript'>slideMenu.build('ID',ancho,v1,v2,n);</script>
Donde los parámetros son:




ID es el nombre del atributo ID del bloque (por defecto 'sm')

ancho es el ancho máximo en pixeles de la solapa expandida

v1 y v2 son las velocidades de reacción para desplegarse (1 es lo más rápido)

n es el número de la sección que se verá expandida




En este ejemplo, la función dice:
slideMenu.build('sm',200,10,10,1);
Y el código completo del ejemplo puede verse en este archivo de texto




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:
Etiquetas:

miércoles, 13 de abril de 2011

Un script muy pequeño para crear acordeones - Vagabundia


Animated JavaScript Accordion es un script desarrollado por leigeber y es, probablemente, uno de los métodos más livianos y flexibles que existen para generar acordeones, es decir secciones que podemos expandir y colapasar con algún tipo de animación.

Sólo tiene 25 líneas de código y además, no requiere de ningún tipo de libreria auxiliar por lo que puede usarse en cualquier sitio web sin restricciones.

A decir verdad, es un proyecto "viejo" que ya tiene una nueva versión, bastante liviana pero más sofisticada, sin embargo, me sigue pareciendo que el original, sigue siendo el más útil, salvo casos muy especiales.

Para usarlo, debemos agregar el script en la plantilla y eso, lo hacemos directamente; copiando y pegando el código antes de </head>:


<script type='text/javascript'>
//<![CDATA[
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
else if(s.style.display==''){su(s,-1); h.className=''}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
}
return{slider:slider}
}();
//]]>
</script>
Luego, el CSS que es totalmente configurable y que definimos para cada uno de los acordeones a usar ya que pueden agregarse un número indetermiando de ellos. Para este ejemplo, seria algo así:
<style type='text/css'>
#nombreExclusivo { /* es el DIV contenedor */
margin: 0 auto
width: 450px;
}
.accordion { /* propiedades generales de la lista */
color: #9AB;
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
width: 450px;
}
.accordion dt { /* es enlace/título que expande y contrae */
background-color: #456;
color: #DEF;
cursor: pointer;
font-size: 22px;
padding: 5px;
text-align: center;
width: 440px;
}
.accordion dt:hover { /* efecto hover sobre ese enlace */
background-color: #345;
}
.accordion dd { /* cada elemento oculto */
margin: 0;
overflow: hidden;
}
.accordion span { /* el contenido */
display: block;
margin: 0;
padding: 10px;
width: 430px;
}
</style>
Ahora, debemos crear los acordeones y eso lo hacemos con una lista especial, usando las etiquetas DL DT y DD:
<div id="nombreExclusivo">
<dl class="accordion" id="nombreInstancia">
<dt>titulo/enlace ejemplo 1</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
<dt>titulo/enlace ejemplo 2</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
<dt>titulo/enlace ejemplo 3</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
</dl>
</div>
Hay dos IDs que son importantes:

nombreExclusivo es el del DIV contenedor; si tenemos varios de estos acordeones, cada uno debe tener un nombre diferente
nombreInstancia es el de la etiqueta DL y será el que usemos para inicializar las funciones del script

Esto último, lo hacemos al final; por ejemplo, antes de </body>:
<script type="text/javascript">
var slider1=new accordion.slider(slider1,0,'open');
slider1.init("nombreInstancia"");
</script>
En general, la sintaxis mínima es esta:
var miSlider=new accordion.slider('miSlider');
miSlider.init('miID');
Y podemos agregar dos parámetros adicionales:
var otroSlider=new accordion.slider('otroSlider');
otroSlider.init('otroID',0,'nombreClase');
El valor 0, en este caso, indica el panel que queremos que se muestre abierto por defecto y es el número de orden (comenzando con 0); si no ponemos nada, todos se ven cerrados; el segundo parametro opcional es el nombre de una clase que establecerá als propiedades del título/enlace de ese panel abierto.




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)

Correo Vaishnava

Mi foto
Correo Devocional

Archivo del blog