Javascript - Bitácora Josep Viciana

Panel superior deslizante usando jQuery

ESCRITO POR Josep Viciana EL 07-10-2008 - EN LA CATEGORÍA Mootools, jQuery.

Aunque ultimamente se esta hablando mucho de Mootools, a pesar de ser el primer framework que conocí, a mi me ha tirado más jQuery, y, para los que como yo han buscado guias para hacer un panel superior deslizante como el que ya se vió hecho con Mootools - yo mismo hice un guia - pero con el framework jQuery y algún plugin para el mismo… en fin, allá voy.

VER DEMOSTRACIÓN HACIENDO CLICK EN EL ICONO DE RSS EN LA CABECERA

VER DEMOSTRACIÓN ONLINE

Lo primero, es descargar jQuery y un plugin que sirve para hacer un efecto “muelle” al deslizarse.

Podéis descargar jquery y su plugin (desde aquí, pero para aseguraros de que tenéis la última versión recomiendo descargar cada cosa desde su página oficial.

Después, se añaden los dos archivos a la página html, si no estan ya añadidos.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script>

Ahora se hace el panel, que por norma será un un div al principio de la página (siempre dentro de <body>…) y su botón para desplegarlo.

<div id="panel"><div class="contenido">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div></div> <div id="boton"><a href="#" id="boton2">Abrir / cerrar panel</a></div>

Ahora el CSS para que no quede demasiado raro esto…

body{ margin:0px;padding:0px;font-family:Arial, Helvetica, sans-serif;} #panel{ display:none; background-color:#CCCCCC; border-bottom:2px solid #666666; color:#333333; } #boton{ text-align:right; } #boton2{ border-left:2px solid #666666; border-bottom:2px solid #666666; background-color:#CCCCCC; color:#333333; padding:3px 10px 10px 10px; } #boton2:hover{ background-color:#000000; color:#FFFFFF; } .contenido{ padding:30px; }

Y ahora vamos al grano, hacer que esto funcione, para eso necesitamos escribir algo de código de jQuery, por ejemplo este:

<script type="text/javascript"> $(function(){ $("#boton2").click(function(event) { event.preventDefault(); $("#panel").slideToggle(1000, "easeOutBounce"); }); }); </script>

Y con esto debería bastar… podéis ver una demostración haciendo click en el icono de RSS que hay al principio de esta página

2 COMENTARIOS - DEJA UN COMENTARIO

Personalizar elementos HTML: Checkbox y Radio Buttons

ESCRITO POR Josep Viciana EL 30-09-2008 - EN LA CATEGORÍA Internet, Programación.

Son muchas las veces que me hubiese gustado personalizar algún Checkbox, bien para hacerlo más grande, cambiar algún color o cualquier cosa para conseguir que llamase más la atención o simplemente que cuadrase mejor con el resto del diseño de la Web. Cuando se intenta hacer esto con atributos de CSS se tarda bien poco en rechazar la idea por que el navegador hace lo que quiere, y además como es costumbre cada navegador hace una cosa diferente.

Hay varias posturas, los - por decirlo de alguna manera - puristas del diseño y la Web acostumbran a decir que lo mejor, en pro de la usabilidad, sería no confundir al usuario en cuanto al uso de estos elementos… para que no le parezcan elementos diferentes en cada sitio que visite, aún siendo exactamente lo mismo.

Y en cierto modo… en alguna ocasión he tenido ese mismo punto de vista, el problema viene cuando la página en cuestión tiene un diseño muy llamativo y los checkbox rudimentarios pueden “romper” el conjunto, evidentemente no sería conveniente modificar el diseño de los checkbox en la intranet de un banco, o en el carrito de compra de una tienda online, pero si es la página de un videojuego, una red social o cualquier otro portal mas destinado a este tipo de ocio, no estaría de más que con un diseño lógico que no buscase confundir a nadie hiciese que los formularios de una página mantengan una “harmonía” con el resto de la página.

Elementos como las áreas de texto ya se pueden personalizar suficiente - aunque como siempre iría bien que todos los navegadores interpretasen de la misma manera - pero los Checkbox y los Radio Buttons han quedado “apartados” en cuanto a diseño, por eso Stéphane Caron ha desarrollado un script que apenas ocupa 2kb, y permite utilizar las imagenes que queramos para modificar tanto Checkbox como RadioButton, afortunadamente funciona en todos los navegadores de uso común.

Desde aquí podéis descargar el script, que necesita jQuery para funcionar.

Su uso es dificilmente simplificable, lo primero que hay que hacer es incluir la librería jQuery - si no se ha incluido ya - el código del script en la cabecera de la página donde se vaya a usar.

<script src="js/jquery.js" type="text/javascript"></script> <script src="js/prettyCheckboxes.js" type="text/javascript"></script>

Un detalle importante es que para que el script funcione correctamente todas las etiquetas necesitan el atributo for enlazando con la ID de su checkbox / radio button correspondiente.

Iniciamos el script:

$(document).ready(function(){ $('input[type=checkbox],input[type=radio]‘).prettyCheckboxes(); });

Si solo se quiere iniciar el script con un elemento especifico, se puede hacer así:

$(document).ready(function(){ $('input.myCheckbox').prettyCheckboxes(); });

Una vez ya está iniciado, habría que definir algunos parametros para personalizarlo:

$(document).ready(function(){ $('input[type=checkbox],input[type=radio]‘).prettyCheckboxes({ checkboxWidth: 17, // The width of your custom checkbox checkboxHeight: 17, // The height of your custom checkbox className : ‘prettyCheckbox’, // The classname of your custom checkbox display: ‘list’ // The style you want it to be display (inline or list) }); });

Si se quieren marcar todos los checkbox que forman parte de un grupo, se puede utilizar la función checkAllPrettyCheckboxes().
Esta función necesita 2 parametros, el primero es una referencia al elemento que está llamando la función - casi siempre es “this” - y el segundo parametro hace referencia al contenedor de los checkbox, como por ejemplo $(’#checkboxDemo’).

<input id="checkbox-all" onclick="checkAllPrettyCheckboxes(this,$('#checkboxDemo'));" name="checkbox-all" type="checkbox" value="checkbox-all" />

Y ya está, la verdad es que es un buen script que facilita muchísimo el trabajo… y para facilitar aún más dan hasta unas imagenes para facilitarnos la tarea de diseñarlas.

Esta es la página del proyecto prettyCheckboxes, donde se encuentran los mismos códigos que yo he posteado aquí, y además algunos ejemplos (en inglés).

1 COMENTARIO - DEJA UN COMENTARIO

Panel superior deslizante usando mootools

ESCRITO POR Josep Viciana EL 27-03-2008 - EN LA CATEGORÍA Mootools, jQuery.

Hace tiempo leí en Woork un articulo en el que se explicaba como hacer un menú - o panel - superior deslizante utilizando mootools. Ahora, con mi blog mas o menos estabilizado hago una explicación / traducción del articulo original.

Sólo se necesitan 3 pasos para conseguir el efecto - y la funcionalidad - del script.

El primer paso es la parte HTML, realmente simple, una capa para el menú deslizante y otra con el boton para deslizarlo.

<div id="top-panel">
<!-- Top Panel content here -->
</div>
<div id="sub-panel">
<a href="#"id="toggle">
<span>Show Panel</span>
</a>
</div>

Añadiendo mootools en el header:

<script type="text/javascript" src="mootools.svn.js"></script>

Paso 2, los CSS. Esta es la propuesta de Woork, podéis editarla como os guste.

#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}

¡Y tres! este pequeño JavaScript entre <head> y </head>.

<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>

Podeis descargar el script completo y preparado en este enlace.

Aunque en el enlace de descarga del script está el código de mootools, en su página se puede descargar.

NINGÚN COMENTARIO - DEJA UN COMENTARIO