Página 3 de 11«123451011»
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » jQuery (qué es, pa' qué es, etc.)
jQuery
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 31 | 6:44 PM
jQuery sin conflictos

Existen muchos beneficios al usar alguna de las librerías de javascript disponibles hoy en día (cómo han proliferado.. increíble). Facilitan escribir código y uno se concentra en mejores funcionalidades que en tratar de reinterpretar código. Y qúe decir de los efectos que cada vez vienen mejores… una delicia de utilizarlos.

Cuando uno comienza un proyecto, se suele elegir el mejor lenguaje para su desarrollo y una de las decisiones es elegir el framework JS con que se trabajará, y casarse con éste. Ahora vengo a conocer que ésta desición no tiene que ser tan drástica, ya que jQuery incluye una funcionalidad que permite que se utilice junto con otras librerías, evitando el conflicto de interpretación entre diferentes formas de escribir javascript que conforma cada framework; en esta ocasión mostraré los diferentes usos de noConflict();

Supongamos que tenemos un simple efecto de mostrar/esconder el contenido al activar un link, lo que se llama SlideToggle. El HTML sería el siguiente:

Quote
<a href="#" class="boton">Muestra/Esconde</a>
<div class="caja">
<p>Vivamus auctor leo vel dui...</p>
</div>

En Mootools el código para hacerlo funcionar se compone de la siguiente manera:

Quote
window.addEvent('domready', function() {
new Fx.Slide('mooMuestra').hide()
$('mooEsconde').addEvent('click', function(e){
e.stop();
new Fx.Slide('mooMuestra').toggle();
});
});

Ver ejemplo con Mootools

Ya con jQuery, lo mismo se realiza de la siguiente manera:

Quote
$().ready(function(){
$('#jMuestra').hide();
$('#jEsconde').click(function(){
$('#jMuestra').slideToggle();
});
});

Ver ejemplo con jQuery

Ahora combinaremos ambos métodos en un mismo archivo, el cual estará linkeando las librerías de Mootools 1.2.0 y jQuery 1.3.1, y se realizará SlideToggle cada una con su método. Para eso, se cambiará la manera con el cual jQuery llama a sus selectores (que es una de las principales razones de conflicto; el uso resumido con $). Primero, se linkea el framework de jQuery y luego el de Mootools. Se escriben los eventos con los cuales se realizan los SlideToggle, pero con un leve cambio en jQuery. En vez de utilizar:

Quote
$('selector').slideToggle();

se cambiará a:

Quote
jQuery.noConflict();
jQuery('selector').slideToggle();

Esto se repetirá con cada selector en que antes utilizábamos $. Finalmente reciclando el mismo código mostrado anteriormente, quedaría:

Quote
jQuery.noConflict();
jQuery().ready(function(){
jQuery('#jMuestra').hide();
jQuery('#jEsconde').click(function(){
jQuery('#jMuestra').slideToggle();
});
});

Ver ejemplo integrando jQuery+Mootools

Otra manera es creando una variable con una nueva manera de escribir $, por ejemplo, $jQ:

Quote
var $jQ = jQuery.noConflict();
$jQ().ready(function(){
$jQ('#jMuestra').hide();
$jQ('#jEsconde').click(function(){
$jQ('#jMuestra').slideToggle();
});
});

Ver ejemplo 2 integrando jQuery+Mootools


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 32 | 6:30 PM
Laboratorio: evitar el scroll en los textarea con jQuery


Hay una cosita que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

Quote
$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 33 | 1:27 PM
Sincronicar scrolls entre capas con jQuery


Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan:

Quote
jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
});
});
}

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 34 | 6:25 PM
Style Switcher con jQuery

En Kelvinluck.com me he encontrado con una muy sencilla forma de hacer un style swither (o intercambiador de estilos) aprovechando la potencia de selección de jQuery. El ejemplo también utiliza cookies con lo que el estilo elegido por el visitante es almacenado para mostrárselo por defecto la próxima vez que visita la página.

La aplicación del ejemplo es muy sencilla. Primero incluimos el fichero de jQuery.

Quote
<script type="text/javascript" src="jquery-1.2.6.js"></script>

Incluimos tanto el estilo que se mostrará la primera vez que el visitante acceda a la página como los estilos alternativos que deseemos.

Quote
<link rel="stylesheet" type="text/css" href="Estilos.css" title="Normal" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="EstiloRojo.css" title="Rojo" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="EstiloNegro.css" title="Negro" media="screen" />

Lo importante es asignarle un atributo "title" con un nombre que posteriormente utilizaremos para identificarlo.

Lo siguiente es crear los enlaces, que deben tener la clase "styleswitch" y el atributo "rel" con el nombre que aparece en el "title" del estilo al que vamos a pasar.

Quote
<ul>
<li><a href="Ejemplo.html" rel="Normal" class="styleswitch">Estilo 1</a></li>
<li><a href="Ejemplo.html" rel="Rojo" class="styleswitch">Estilo 2</a></li>
<li><a href="Ejemplo.html" rel="Negro" class="styleswitch">Estilo 3</a></li>
</ul>

Ahora tan sólo queda incluir el script de Kelvinluck.com, que se ayuda de un par de funciones de Quirksmode.

Quote
<script language="javascript">
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($){
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if © switchStylestyle©;
});
function switchStylestyle(styleName) {
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days){
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name){
var namenameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') cc = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name){
createCookie(name,"",-1);
}
// /cookie functions
</script>

Ya tenemos realizado un intercambiador de estilos que recordará nuestra elección cada vez que carguemos la página.

Ver Ejemplo en funcionamiento » »


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 35 | 12:54 PM
Rotando imágenes con JavaScript
Usando Canvas para los navegadores estándar y un filtro propietario para Explorer, veremos cómo rotar imágenes con javascript

Para rotar imágenes lo más común es usar lenguaje de servidor. En PHP, por ejemplo, lo normal sería usar la función imagerotate de la librería GD. En javascript, hasta que se extendió el soporte canvas a casi todos los navegadores, había un camino tortuoso que consistía en crear capas que mostraran sólo un pixel de la imagen en la posición que correspondía a la rotación que queríamos lograr, la cual calculábamos con un poco de trigonometría. Sin embargo esto era inviable para imágenes de tamaño mediano, ya que, como estábamos obligados a crear un bucle con tantas iteraciones como pixeles hubiese en la imagen a rotar, el proceso se hacía muy lento y/o consumía mucha memoria.

Afortunadamente canvas ya es soportado por todos los navegadores modernos excepto Explorer. No obstante esto, Explorer cuenta con un filtro propietario que nos ayudará en nuestra tarea. Este es un ejemplo de lo que podremos lograr utilizando la función:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function rotar(obj,angulo){
if (angulo >= 0) {
var rotation = Math.PI * angulo / 180;
} else {
var rotation = Math.PI * (360+angulo) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.createElement("canvas").getContext) {
/* ---- canvas ---- */
var c=document.createElement('canvas');
c.width = Math.abs(costheta*obj.width) + Math.abs(sintheta*obj.height);
c.style.width = c.width+'px';
c.height = Math.abs(costheta*obj.height) + Math.abs(sintheta*obj.width);
c.style.height=c.height+'px';
c.id=obj.id;
c.style.position='absolute';
var ctx=c.getContext('2d');
ctx.save();
if (rotation <= Math.PI/2) {
ctx.translate(sintheta*obj.height,0);
} else if (rotation <= Math.PI) {
ctx.translate(c.width,-costheta*obj.height);
} else if (rotation <= 1.5*Math.PI) {
ctx.translate(-costheta*obj.width,c.height);
} else {
ctx.translate(0,-sintheta*obj.width);
}
ctx.rotate(rotation);
ctx.drawImage(obj, 0, 0, obj.width, obj.height);
obj.parentNode.replaceChild(c,obj);
ctx.restore();
}else{
/* ---- DXImageTransform ---- */
obj.style.position='absolute';
obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
obj.filters.item(0).M11 = costheta;
obj.filters.item(0).M12 = -sintheta;
obj.filters.item(0).M21 = sintheta;
obj.filters.item(0).M22 = costheta;
}
}
window.onload=function(){
rotar(document.getElementById('pp'),60);

}
</script>
</head>

<body>
<img src="1.jpg" width="180" height="127" />
<div id="ll" style="position:relative; "><img id="pp" src="1.jpg" width="180" height="127" /></div>
</body>
</html>



Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 36 | 1:54 PM
Redimensionar el tamaño de fuente de forma animada con jQuery

Aquí les mostrar cómo podemos redimensionar el tamaño del texto con un ligero efecto de animación. La función para realizar esto es:

Quote
<script language="javascript">
$(function(){
$('input').click(function(){
var ourText = $('p');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'grande') {
finalNum *= 1.4;
}
else if (this.id == 'pequenyo'){
finalNum /=1.4;
}
ourText.animate({fontSize: finalNum + stringEnding},1000);
});
});


Hay que tener en cuenta que la función se invoca cuando se hace click sobre un input y que la función evalúa el id del mismo para saber si es 'grande' o 'pequenyo' y desencadenar las acciones pertinentes, por lo que en nuestro HTML deberemos tener dos botones uno con id 'grande' y otro con id 'pequenyo'.

Quote
<input type='button' value='Texto Grande' id='grande' />
<input type='button' value='Texto Pequeño' id='pequenyo' />

El script es muy sencillo y lo podríamos personalizar para que se invocase al hacer click sobre un texto o imágenes en vez de sobre un input; personalizar el ámbito de actuación a un determinado párrafo o div; etc.

Ver ejemplo en funcionamiento » »


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 37 | 2:43 PM
Filtro :random con jQuery

Ahorita les quiero mostrar cómo obtener un item de manera aleatoria con jQuery, partiendo de la siguiente solución.

Quote
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"], {
random: function(a, i, m, r) {
if (i == 0) {
jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
};
return i == jQuery.jQueryRandom;
}
});

Un ejemplo de la utilización del filtro :random sobre los elementos de una lista sería:

Quote
<ul>
<li>item 1</a></li>
<li>item 2 </a></li>
<li>item 3 </a></li>
<li>item 4</a></li>
<li>item 5</a></li>
</ul>
<script type="text/javascript">
$().ready(function() {
alert($("li:random").text());
});
</script>

Ver ejemplo en funcionamiento » »

Una aplicación, prácticamente inmediata y muy sencilla del filtro, podría ser la de mostrar un texto aleatorio cada vez que se accede a la web.

Para ello, en vez de actuar sobre todos los elementos <li> de nuestra página sólo actuaremos sobre los que tengan la clase "cita_aleatoria". De este modo evitaremos actuar sobre elementos que no deseamos. El código sería similar al siguiente:

Quote
<ul><br> <li class="cita_aleatoria">cita 1</a></li><br> <li class="cita_aleatoria">cita 2 </a></li><br> <li class="cita_aleatoria">cita 3 </a></li><br> <li class="cita_aleatoria">cita 4</a></li><br> <li class="cita_aleatoria">cita 5</a></li> <br></ul><br><script type="text/javascript"> <br> $().ready(function() { <br> //Ocultamos todas las citas<br> $("li.cita_aleatoria").hide();
//Mostramos una de manera aleatoria<br> $("li.cita_aleatoria:random").show(); <br> }); <br> </script>

Ver ejemplo 2 en funcionamiento » »


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 38 | 4:57 PM
Efecto "Nudging" con jQuery

Les invito a que miren cómo lograr un interesante efecto con jQuery para nuestros menús. Al posar el ratón sobre una opción de menú ésta se desplaza hacia la derecha con una animación. Es un efecto denominado "nudging", que se podría traducir como dar con el codo al enlace.

Para realizar el efecto, lo primero que tendríamos que hacer es enlazar en nuestro documento con la librería de jQuery.

Quote
<script type="text/javascript" src="jquery-1.2.6.js"></script>

Seguidamente construimos un menú al que deberemos añadir la clase "nudge" a cada uno de los enlaces:

Quote
<ul>
<li><a href="#" class="nudge">home</a></li>
<li><a href="#" class="nudge">acerca de nosotros </a></li>
<li><a href="#" class="nudge">servicios</a></li>
<li><a href="#" class="nudge">productos</a></li>
<li><a href="#" class="nudge">contacta con nosotros</a></li>
</ul>


Ahora tan sólo queda animar la propiedad "padding-left" tanto cuando estamos sobre una opción y cuando salimos de ella:

Quote
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '35px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '15px' }, 400);
});
});

Yo he establecido un valor inicial de "padding-left" de 15 px y que es el valor al que ha de retornar la opción de menú al evento "mouse-out". Cuando se está sobre la opción ésta se desplaza hasta un valor de 35 px. Para ambas acciones la velocidad es de 400 milisegundos. Lógicamente todas estos valores son modificables y se deberán ajustar a las pretensiones de cada uno.

Para mostrar un ejemplo un poco más completo. He realizado tres menús, ya con CSS, que incorporan el efecto.

Ejemplo 1:

  • Mirar el ejemplo
  • Descargar archivo ZIP

    Ejemplo 2:

  • Mirar el ejemplo
  • Descargar archivo ZIP

    Ejemplo 3:

  • Mirar el ejemplo
  • Descargar archivo ZIP
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 39 | 12:49 PM
    Colas de efectos en jQuery

    Vamos a explicar qué es una cola de efectos, para qué nos sirve y cómo se configuran las colas de efectos en el framework Javascript jQuery



    Ya sabemos de los métodos como sliceUp() o sliceDown(), que funcionan de manera similar a los ya vistos métodos fadeIn() o fadeOut(), sirven para realizar efectos variados en páginas web y son tan sencillos de usar como invocarlos sobre el objeto jQuery que contiene al elemento que deseamos animar. Ahora vamos a aprender a encadenar varios efectos a ejecutar uno detrás de otro.

    Veremos en este post que encadenar efectos es tan sencillo como llamar a todos los métodos de efecto que queremos realizar. Todos esos métodos se incluirán automáticamente en una cola y serán ejecutados uno detrás del otro, sin que tengamos que hacer nada por nuestra cuenta, aparte de la propia invocación de los métodos.

    Funciones de efectos
    Las funciones de efectos son los métodos jQuery que realizan un cambio en los elementos de la página de manera suavizada, es decir, que alteran las propiedades de uno o varios elementos progresivamente, en una animación a lo largo de un tiempo.

    Por poner un ejemplo, tenemos el método fadeOut(), que realiza un efecto de opacidad sobre uno o varios elementos, haciendo que éstos desaparezcan de la página con un fundido de opaco a transparente. El complementario método fadeIn() hace un efecto de fundido similar, pero de transparente a opaco. Como éstos, tenemos en jQuery numerosos métodos de efectos adicionales como animate(), sliceUp() y sliceDown(), etc. En la propia documentación del framework, en el apartado Effects de la referencia del API, podremos ver una lista completa de estas funciones de efectos.

    Cola de efectos por defecto
    Cuando invocamos varias funciones de efectos de las disponibles en jQuery, éstas se van introduciendo en una cola de efectos predeterminada, llamada "fx". Cada elemento de la página tiene su propia cola de efectos predeterminada y funciona de manera automática. Al invocar los efectos se van metiendo ellos mismos en la cola y se van ejecutando automáticamente, uno detrás de otro, con el orden en el que fueron invocados.

    Quote
    capa = $("#micapa");
    capa.fadeOut();
    capa.fadeIn();
    capa.slideUp();
    capa.slideDown();

    Las funciones de efectos, una detrás de otra, se invocan en un instante, pero no se ejecutan todas a la vez, sino que se espera que acabe la anterior antes de comenzar la siguiente. Por suerte, jQuery hace todo por su cuenta para gestionar esta cola.

    Como decimos, cada elemento de la página tiene su propia cola de efectos y, aunque incluso podríamos crear otras colas de efectos para el mismo elemento, en la mayoría de los casos tendremos suficiente con la cola por defecto ya implementada .

    Ejemplo de ejecución de efectos en la cola predeterminada de jQuery
    Vamos lanzar varios efectos sobre una capa y veremos como ellos mismos se ejecutan en el orden como los hemos invocado.

    Tendremos un elemento DIV, como este:

    Quote
    <div id="micapa">Esta capa que se va a animar, en un bucle infinito...</div>

    Ahora podemos ver una función que realiza la invocación a varios efectos jQuery:

    Quote
    function colaEfectos(){
    capa = $("#micapa");
    capa.animate({
    "font-size": "1.5em"
    }, 2000);
    capa.hide(1000);
    capa.show(1000);
    capa.animate({
    "left": "350px",
    "top": "50px"
    },1500);
    capa.animate({
    "font-size": "0.75em"
    }, 2000);
    capa.animate({
    "left": "100px",
    "top": "20px"
    }, 1500, colaEfectos);
    }

    Habría que fijarse que la última de las funciones de efecto invocadas hace una llamada a esta misma función, por medio de un callback, por lo que, cuando terminen de ejecutarse todos los efectos, se volverá a invocar a la función y se producirá así un bucle infinito, donde se repetirá todo el tiempo la misma secuencia de efectos.

    Y ahora podemos poner en marcha esta función cuando la página esté lista:

    Quote
    $(document).ready(function(){
    colaEfectos();
    });

    El resultado del ejercicio completo se puede ver en una página aparte.

    Con esto hemos hecho nuestro ejemplo de cola de efectos. Ha sido fácil, no? Pero claro que a partir de aquí la cosa se puede complicar todo lo que deseemos, o necesitemos.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 40 | 1:43 PM
    Método queue() para acceder a una cola de efectos

    Veremos cómo hacer cosas con las colas de efectos en jQuery, haciendo nuestra primera prueba con el método queue(),
    que permite acceder y modificar la cola de efectos.

    En el post anterior vimos que crear una cola de efectos es una tarea muy sencilla, básicamente porque jQuery gestiona de manera automática la cola de efectos predeterminada. Ahora queremos comenzar a mostrar cómo podemos trabajar nosotros mismos con estas colas de efectos y modificar su comportamiento.

    Para ello vamos a ver el método más importante que tenemos que conocer para trabajar con las colas de efectos de jQuery: queue(). Como muchos otros métodos de este framework Javascript, queue() permite su invocación con distintos juegos de parámetros, por lo que, dependiendo de los valores que le pasemos a la función hará unas cosas u otras. Comenzaremos con el uso más simple y luego iremos complicando los ejercicios en futuros artículos.

    Método queue([nombreCola])
    Si llamamos al método queue() sin parámetros o pasándole una cadena con el nombre de una cola, nos devolverá un array con cada una de las funciones que están encoladas en ese momento.

    Si no indicamos parámetros a queue() estamos indicando que nos pase la lista de eventos encolados en la cola predeterminada. Si se indica un parámetro de tipo cadena, que sería el nombre de la cola a examinar, lo que nos devuelve es el array de funciones de la cola con nombre indicado en el parámetro.

    Nota: el nombre de la cola predeterminada es "fx", por lo que llamar a la función:

    Quote
    elemento.queue("fx");

    Tendría el mismo efecto que llamarla sin parámetros.

    Quote
    elemento.queue();

    Veremos un ejemplo sencillo de esta posible invocación del método queue() y además, aparte vamos a ver que se pueden encolar funciones en la cola tantas veces como queramos, aunque la cola esté en marcha.

    El efecto es que esas funciones encoladas posteriormente se quedarán al final de la cola y se ejecutarán cuando el resto de la cola se haya ejecutado.
    Si lo deseamos, antes de ponernos a comentar este ejemplo, podemos ver el ejercicio en marcha que vamos a construir.

    Tenemos el siguiente HTML, que incluye varios elementos:

    Quote
    <button id="botonfade">Muestra y luego oculta con fadeIn y fadeOut</button>
    <button id="botonslide">Muestra y luego oculta con slideUp slideDown</button>
    <button id="botontamanocola">Muestra el número de funciones en cola ahora mismo</button>
    <div id="mensaje">
    En estos momentos no hay funciones de efectos en la cola por defecto.
    <br>
    <span class="notar">Pulsa repetidas veces los botones de arriba para ir metiendo funciones en la cola</span>
    </div>
    <div id="micapa"></div>

    Como se puede ver tenemos tres botones. Uno sirve para agregar funciones en la cola para hacer efectos fadeIn() y fadeOut(), el segundo para agregar a la cola funciones de efectos slideUp() y slideDown() y el tercero para mostrar la longitud de la cola en un momento dado.
    Luego tenemos una capa para mostrar mensajes y otra con id="micapa" que será el DIV que vamos a animar con los efectos.

    Así podremos definir el evento onclick del primer botón:

    Quote
    $("#botonfade").click(function(){
    capa = $("#micapa");
    capa.fadeOut(500);
    capa.fadeIn(500);
    muestraRestantesCola();
    });

    Así podemos definir el evento onclick del segundo:

    Quote
    $("#botonslide").click(function(){
    capa = $("#micapa");
    capa.slideUp(500);
    capa.slideDown(500);
    muestraRestantesCola();
    });

    Estos dos botones, como se puede ver, ejecutan efectos sobre "micapa" y el resultado es que, a medida que pulsamos los botones repetidas veces, los efectos se van encolando. Podemos pulsar tantas veces como queramos y se irán encolando más y más efectos en la cola predeterminada.

    Al ejecutar estos eventos click, como última sentencia hay una llamada a la función muestraRestantesCola(), que veremos ahora mismo. Pero antes veamos el tercer botón, que sirve para mostrar el número de elementos de la cola predeterminada.

    Quote
    $("#botontamanocola").click(function(){
    muestraRestantesCola();
    });

    Como se ve, se llama a la función muestraRestantesCola(), que simplemente accede a la cola para saber el número de funciones de efectos encoladas en un momento dado. Su código es el siguiente:

    Quote
    function muestraRestantesCola(){
    var numFuncionesEnCola = $("#micapa").queue().length;
    $("#mensaje").text("En el momento de hacer el último clic en los botones hay " + numFuncionesEnCola + " funciones de efectos en cola");
    }

    En la primera sentencia se accede al la cola predeterminada del elemento con id="micapa", lo que nos devuelve un array, al que luego se accede a su propiedad "length" para saber el número de elementos que contiene. Con esto averiguamos el número de funciones encoladas en un momento dado. Luego se muestra ese número en la capa con id="mensaje".

    Podemos ver el código completo de este ejercicio.

    Quote
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
    <html lang="en">
    <head>
    <title>Cola de efectos por defecto en jQuery</title>
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <style type="text/css">
    body{
    font-size: 0.75em;
    font-family: tahoma, verdana, sans-serif;
    }
    .notar{
    color: #339;
    }
    #mensaje{
    margin: 20px 5px;
    }
    #micapa{
    left: 200px;
    top: 150px;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #3d3;
    }
    </style>
    <script languague="javascript">
    function muestraRestantesCola(){
    var numFuncionesEnCola = $("#micapa").queue().length;
    $("#mensaje").text("En el momento de hacer el último clic en los botones hay " + numFuncionesEnCola + " funciones de efectos en cola");
    }
    $(document).ready(function(){
    $("#botonfade").click(function(){
    capa = $("#micapa");
    capa.fadeOut(500);
    capa.fadeIn(500);
    muestraRestantesCola();
    });
    $("#botonslide").click(function(){
    capa = $("#micapa");
    capa.slideUp(500);
    capa.slideDown(500);
    muestraRestantesCola();
    });
    $("#botontamanocola").click(function(){
    muestraRestantesCola();
    });
    });
    </script>

    </head>
    <body>
    <button id="botonfade">Muestra y luego oculta con fadeIn y fadeOut</button>
    <button id="botonslide">Muestra y luego oculta con slideUp slideDown</button>
    <button id="botontamanocola">Muestra el número de funciones en cola ahora mismo</button>
    <div id="mensaje">
    En estos momentos no hay funciones de efectos en la cola por defecto.
    <br>
    <span class="notar">Pulsa repetidas veces los botones de arriba para ir metiendo funciones en la cola</span>
    </div>
    <div id="micapa"></div>
    </body>
    </html>

    Ahora, para acabar, podemos ver el ejercicio en marcha en una página aparte.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 41 | 2:23 PM
    Meter cualquier tipo de función en una cola de efectos jQuery

    En la cola de efectos podemos introducir cualquier tipo de función, aunque no sean efectos jQuery,
    y para ello vamos a aprender a encolar cualquier conjunto de sentencias con el método queue()

    En estos momentos se supone que sabemos cómo introducir funciones de efectos en las colas de efectos de jQuery. cool

    Pero ¿Qué pasa si queremos encolar otro tipo de función Javascript o jQuery? Como sabemos hasta ahora, las funciones de efectos se encolan ellas mismas sin que tengamos que hacer nada, pero si se trata de otro tipo de función la situación cambia un poco, pues tendremos que encolarla nosotros mismos explícitamente y para ello tendremos que utilizar el método queue() de jQuery.

    Nota: el método queue() funciona de maneras distintas dependiendo de los parámetros que le enviemos. En el anterior post ya empezamos a explicar cómo utilizar queue() para acceder a una cola de efectos.

    .queue( [ nombreCola ], callback( continua ) )
    El juego de parámetros con el que tenemos que llamar al método queue() para encolar cualquier tipo de función es el siguiente:

    • Primer parámetro nombreCola, que es opcional, se indica el nombre de la cola donde encolar una función. Si no se indica nada, o si se indica el nombre de la cola predeterminada "fx", se encola esa función en la cola por defecto que gestiona jQuery por nosotros. Si se indica cualquier valor distinto de "fx" se encolará en esa cola que estemos indicando.

    • El segundo parámetro es la función que se desea encolar. Al encolarla se coloca como última de las funciones a ejecutar de la cola, por tanto, se tendrán que ejecutar todas las funciones encoladas anteriormente antes de llegar a ésta que estamos introduciendo.

    A continuación podemos ver un código de ejemplo en el que encolamos una función, que no es de efectos, en la cola de efectos predeterminada.

    Quote
    capa = $("#micapa");
    capa.queue(function(){
    $(this).css({
    "border": "3px solid #339",
    });
    //cualquier otro código jQuery....
    //llamamos al siguiente paso de la cola
    $(this).dequeue();
    });

    Como se puede ver, se llama a queue() indicando la función que deseamos encolar. Ésta tiene la llamada a un método, css(), que no es un método de efecto animado y que no se encolaba de manera predeterminada como sí lo hacían las funciones de efectos. Además, luego podríamos tener un número indeterminado de instrucciones jQuery, tantas como se desee.

    Lo que es importante es que, al final del código de esta función, se debe invocar explícitamente al siguiente paso de la cola. Esto lo hacemos con una llamada al método dequeue() que aun no habíamos visto. Si no llamamos a este método, ocurriría que la cola se detendría y no continuaría la ejecución de otras funciones encoladas en el caso que las hubiera.

    Nota: el método dequeue() puede recibir un parámetro que es el nombre de la cola que se debe continuar ejecutándose. Si no indicamos ninguna cola o indicamos el valor "fx", la cola que seguirá procesándose es la cola por defecto. Más adelante explicaremos cómo trabajar con colas distintas de la cola por defecto.

    A partir de jQuery 1.4 existe otra posibilidad de trabajo con las colas y es que a partir de esa versión del framework, la función que estamos encolando recibe un parámetro (que nosotros hemos llamado "continua") que es la función siguiente de la cola. Este parámetro nos serviría para continuar la cola sin tener que ejecutar el método dequeue(). Podemos ver un ejemplo a continuación.

    Quote
    capa.queue(function(continua){
    alert("Hola, esto es un código cualquiera");
    //el parámetro continua es una función para ir al siguiente paso de la cola
    continua();
    });

    Ejemplo jQuery para encolar funciones que no son efectos
    Ahora podemos ver un ejemplo completo en el que encolamos varios tipos de funciones. Algunas son funciones de efectos, que no necesitamos que hacer nada para que se encolen y otras son funciones normales, que tenemos que encolar explícitamente.

    Tenemos este código HTML:

    Quote
    <button id="botoncomenzar">Hacer una cola de ejecución con funciones que no son efectos</button>
    <div id="micapa"></div>

    Como se puede ver, hay un botón y una capa. La capa nos servirá para animarla y el botón para comenzar la animación en el momento que lo pulsemos. Veamos entonces el código del evento click que asociaremos a ese botón y que encolará varias funciones, unas de efectos y otras funciones normales.

    Quote
    $("#botoncomenzar").click(function(){
    capa = $("#micapa");
    //encolo directamente funciones que son efectos
    capa.animate({"width": "80px"}, 1000);
    //para encolar otras funciones utilizo queue()
    capa.queue(function(){
    $(this).css({
    "border": "3px solid #339",
    });
    $("#botoncomenzar").text("Acabo de ponerle el borde... ");
    $(this).dequeue();
    });
    capa.animate({"height": "200px"}, 2000);
    capa.queue(function(continua){
    $(this).css({
    "border": "0px"
    });
    $("#botoncomenzar").text("Quitado el borde... ");
    //el parámetro continua es una función que lleva al siguiente paso de la cola (jpara Query 1.4)
    continua();
    });
    capa.animate({
    "height": "50px",
    "width": "400px"
    }, 1000);
    });

    El resultado de ejecutar este código Javascript se puede ver en una página aparte.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 42 | 1:47 PM
    Nivo Slider – jQuery Image Slider


    Nivo Slider, una fantástica forma de crear diapositivas / deslizante con miniaturas para nuestros proyectos online. Posee características particulares como 9 efectos de transición, se puede ajustar a nuestras necesidades, dirección y control de navegación, la versión sólo pesa 7kb, apoya la vinculación en imágenes, Teclado de navegación. Nivo Slider ha sido probado en los siguientes navegadores: Internet Explorer v7+, Firefox v3+, Google Chrome v4, Opera v10.5, entre otros.

    Ver Demos – Info y Descarga Nivo Slider

    Uso

    Quote
    JavaScript:

    link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

    HTML

    Quote
    HTML:

    <div id="slider"><img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
    <img title="This is an example of a caption" src="images/slide3.jpg" alt="" />
    <img src="images/slide4.jpg" alt="" /></div>

    $(window).load() function:

    Quote
    JavaScript:

    <script type="text/javascript">// <![CDATA[
    $(window).load(function() {
    $('#slider').nivoSlider();
    });
    // ]]></script>

    Quote
    JavaScript:

    <script type="text/javascript">// <![CDATA[
    $(window).load(function() {
    $('#slider').nivoSlider({
    effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    slices:15,
    animSpeed:500,
    pauseTime:3000,
    startSlide:0, //Set starting Slide (0 index)
    directionNav:true, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:true, //1,2,3...
    controlNavThumbs:false, //Use thumbnails for Control Nav
    controlNavThumbsFromRel:false, //Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', //Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:true, //Stop animation while hovering
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){} //Triggers after all slides have been shown
    });
    });
    // ]]></script>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 43 | 5:12 PM
    Crear plugins para jQuery

    jQuery, uno de los mejores frameworks para Javascript y AJAX que existen, puede ser fácilmente extendido usando plugins. En este tutorial te mostraré como crear plugins para jQuery, desde lo más básico hasta la integración directa con la librería.

    El propósito de este tema es aprender a crear plugins para jQuery, con las facilidades que la libreria ya trae.

    Objetos a extender
    Para la creación de plugins con jQuery, hay dos objetos básicos que se extenderán: El objeto jQuery, que se encarga de practicamente todo el procesamiento interno y el objeto jQuery.fn, que es el que maneja la interacción con elementos.

    Si quisieramos crear una función general, usaríamos jQuery, pero si quisiéramos hacer uso de la potencia de los selectores built-in, usaríamos jQuery.fn.

    Creando el espacio de trabajo
    Lo primero que tenemos que hacer es preparar un área de trabajo: Primero decidimos de que se tratará nuestro plugin. Con propósito de hacerlo sencillo creemos un plugin que alerte el texto (contenido) de un elemento cualquiera de diferentes formas. Acto seguido, creamos un archivo con el siguiente formato de nombre: jquery.nombre_del_plugin.js. Eso ayuda a identificarlo como plugin de jQuery.

    Después, creemos un archivo HTML en el que vinculamos la librería jQuery y nuestro plugin (que por ahora esta vacío). Ahora, abramos nuestro plugin en nuestro editor favorito (de texto plano, nada de Word), y comencemos la diversión.

    Creando el objeto principal, sus metodos y propiedades
    Vamos a crear dos tipos de funciones, cada una con uno de los objetos a extender, solo por aprendizaje. De esta manera, escribamos en nuestro archivo lo siguiente:

    Quote
    jQuery.comprobarAlert = function( mensaje ){
    alert(mensaje);
    }

    jQuery.fn.alerter = function(){
    this.each( function(){
    alert(this);
    });
    }

    Analicemos esas funciones: La primera está extendiendo el objeto jQuery, creando una función con el nombre de comprobarAlert, cuyo propósito es muy simple: Pasar un parámetro de mensaje, que sera alertado. Para probar la función vamos a nuestro HTML y añadimos las siguientes lineas a un tag script:

    Quote
    $(document).ready( function(){
    $.comprobarAlert("Hola!");
    });

    Eso tiene que alertarnos "Hola!".

    La segunda función es algo más completa. Cuando usamos jQuery.fn, el this hace referencia a un objeto jQuery que tiene "dentro" todos los elementos que recopila el selector. Entonces el each hace un bucle ejecutando la función para cada elemento, en este caso, alertando el objeto encontrado (todos los objetos encontrados, de hecho :P )

    Para una representación no tan abstracta, usemos un ejemplo concreto. Si en nuestro documento HTML tenemos lo siguiente ...

    Quote
    $(document).ready( function(){
    $("#victima").alerter();
    });

    ... lo que le estamos diciéndole al plugin es: Busca todos los elementos que tengan como id victima, y recógelos en una "lista" jquery. Luego, por cada elemento de esta lista, haz la función indicada, que es alertar el objeto (con alerter()).

    Nota: es importante entender bien los ámbitos del this: Dentro de la función principal, el this hace referencia a la lista, mientras que dentro del each, el this hace referencia al elemento DOM ya seleccionado.

    Extendiendo el plugin: Opciones
    Ya tenemos la idea básica de como nombrar un plugin y ponerlo a funcionar. Ahora examinemos como podemos hacer que el plugin tenga opciones, para que el usuario defina su comportamiento como mejor le parezca.

    Nota: los códigos que aparecen a continuación se ubican o bien en el archivo del plugin o en el documento HTML (en cada caso se especifica). Se sobreentenderá que lo que aparece en el HTML está dentro de $(document).ready(), es decir, que funciona cuando el DOM se ha cargado. También pueden haber continuas referencias a un selector "#victima", correspondiente a un div en nuestro documento HTML (que debemos crear)
    Añadamos a nuestro plugin de alerta la posibilidad de enviar una cadena adicional al comienzo y al final de el mensaje, sin que estos parámetros adicionales sean obligatorios. Hay dos opciones: La primera es usar jQuery.extend, una función built-in de jQuery, pensada para proveer variables con valores "default", modificables por el usuario. La segunda es hacerlo sin ayuda de extend, que puede ser más entendible.

    Primera opción:

    Quote
    jQuery.comprobarAlert = function( mensaje, opciones_user ){

    opciones_default = {
    inicio_str : "Alerta: ",
    final_str: " /fin "
    }

    opciones = jQuery.extend(opciones_default , opciones_user);
    alert(opciones.inicio_str + mensaje + opciones.final_str);
    }

    Segunda opción:

    Quote
    jQuery.comprobarAlert = function( mensaje, opciones_user ){
    if( opciones_user == undefined ){
    opciones = ({
    inicio_str : "Alerta: ",
    final_str: " /fin "
    });
    }else{
    opciones = opciones_user;
    }
    alert(opciones.inicio_str + mensaje + opciones.final_str);
    }

    La primera opción es un poco abstracta pero es más compacta. La explicación es la siguiente: Para crear la variable opciones se llama jQuery.extend. Esta función asigna los valores del primer parámetro a la variable si el segundo parámetro está vació o es "undefined" (no esta definido). De tal manera, si el usuario no ingresa opciones se toman las predeterminadas, y si las ingresa, se sobreescriben.

    La segunda opción es mas o menos la explicación de la primera: Se comprueba si el usuario mando opciones. Si no es asi, se toman las predeterminadas. Si el usuario mandó, se toman estas.

    Es importante notar que las opciones quedan como propiedades del objeto "opciones", es decir, que para acceder a "inicio_str" tenemos que escribir "opciones.inicio_str". Para el resto del tutorial usaremos la primera forma, por la razón a continuación.

    Usabilidad:
    Si queremos que el usuario tenga control total del plugin, debemos proveer la capacidad de cambiar tanto los defaults para un llamado, como para todo el documento. Veamos este ejemplo de llamados:

    Quote
    // Aqui el mensaje va con opciones normales

    $.comprobarAlert("Tengo opciones default");

    // Aqui podemos cambiar el default:
    $.comprobarAlert.op_default.inicio_str = "Wii: ";

    //Y ejecutar el mismo llamado, que ahora dara un resultado distinto:
    $.comprobarAlert("Tengo opciones default");

    Esto es particularmente útil para ser aplicado en escenarios diversos de manera sencilla. Supón que tienes un plugin que cambie el fondo de un elemento. El autor del plugin definió que el color normal de fondo es amarillo, pero tu pagina web es de tonos ocres, así que te interesa que el color sea verde. Si no puedes controlar los defaults desde tu web, cada vez que quieras usar el código, deberás cambiar la llamada:

    Quote
    $("a").colorizar("fondo", ({
    color: "verde"
    });
    $("body").colorizar("borde", ({
    color: "verde"

    });

    En vez de eso, podrías hacer lo siguiente (con el método que ya casi explicaré):

    Quote
    $.colorizar.opciones.color = "verde":
    $("a").colorizar("fondo");
    $("body").colorizar("borde");

    //E incluso, puedes cambiar el color de uno solo con el override (reemplazo) que ya hemos visto:
    $("p").colorizar("texto", {
    color:"naranja"
    });

    La manera de lograr esta maravilla de la usabilidad (XD) es la siguiente (con nuestro ejemplo de alerter):

    Quote
    jQuery.comprobarAlert = function( mensaje, opciones_user ){

    // Primero creamos nuestra variable de opciones
    var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user);
    alert(opciones.inicio_str + mensaje + opciones.final_str);

    }

    jQuery.comprobarAlert.op_default = {
    inicio_str : "Alerta: ",
    final_str: " /fin "
    }

    Como verás, hemos dividido en dos la función. Al separar "jQuery.comprobarAlert.op_default" hacemos que esté accesible desde cualquier parte. Asi que, como ya vimos, bastaría substituir el contenido de la variable para cambiar los defaults:

    Quote
    $.comprobarAlert.op_default = {
    inicio_str : "He reemplazado al default: ",
    final_str: ". Oh si."
    }

    o incluso cambiarlos por separado:

    Quote
    $.comprobarAlert.op_default.inicio_str = "Solo reemplazo el primer default";

    Extensibilidad
    Si queremos que el usuario final tenga todas las comodidades para usar nuestro plugin, podemos añadirle la extensibilidad. Si, digamos, nuestro plugin usara una función interna que transformara el texto de alguna manera, podemos también proveer una función "default", que el usuario pueda cambiar si necesita. Miremos el ejemplo:

    Quote
    jQuery.comprobarAlert = function( mensaje, opciones_user ){
    var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user);
    // Aqui se llama a la función, que definimos externamente
    var mensaje = jQuery.comprobarAlert.transformar(mensaje);
    alert(opciones.inicio_str + mensaje + opciones.final_str);
    }

    jQuery.comprobarAlert.op_default = {
    inicio_str : "Alerta:",
    final_str: " /fin "
    }

    // Esta es nuestra "función modificable"
    jQuery.comprobarAlert.transformar = function(texto){
    return String( texto ).toUpperCase();
    };

    Como verás, estamos dejando que el contenido de la función sea modificable, de modo que podamos poner en nuestro html un reemplazo:

    Quote
    jQuery.comprobarAlert.transformar = function(texto){

    return String( texto ).toLowerCase();

    };

    Por supuesto, hay que escoger bien las funciones que serán "abiertas": No se debe comprometer el funcionamiento del plugin. Para crear funciones que sean privadas, haremos lo que se muestra en el tutorial de poo en javascript:

    Quote
    //...
    jQuery.comprobarAlert = function( mensaje, opciones_user ){
    var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user);

    function transformar(msj){
    return String( msj ).toUpperCase();
    }

    // Aqui se llama a la función, que es privada
    var mensaje = transformar(mensaje);

    alert(opciones.inicio_str + mensaje + opciones.final_str);
    }
    //...

    De ese modo, nuestra función es inaccesible externamente.

    Extendiendo el objeto jQuery
    Hasta ahora hemos visto como modificar todos los aspectos de nuestro objeto plugin, ahora vamos a modificar el objeto jQuery.

    Cuando a la función jQuery.extend se le pasa solo un parametro, y este es un objeto, esta extiende lo que la llamó. Esto nos permite por ejemplo, añadir un nuevo evento:

    Quote
    /* Si existieran pantallas holograficas donde los objetos fueran 3D y se
    pudiera dar el siguiente evento built-in en un browser... sighs. */

    jQuery.fn.rozar = function(fun){
    return this.each(
    // XD, IE demorará mucho implementando esto:
    this.onrub = this.apply( fun );
    );
    };

    // Y lo anterior se puede usar como

    $(".holocube3dsuperdelux").rozar( function(){
    $(this).css("z-index","3000");
    });

    Por supuesto, el evento usado arriba (onrub) y el escenario en si, son totalmente ficticios, pero la idea es que se entienda lo que se quiere lograr wink

    Uso del alias $
    Hasta ahora en los codigos vistos, se ha hecho un gran uso del jQuery.talcosa, en vez de $.talcosa. Usar "jQuery.*" es beneficioso: Si el usuario tiene dos librerias js (algunas usan el $ tambien), jQuery no entrará en conflicto. Sin embargo usar solo "jQuery.*" es muy embarazoso para algunos, asi que hay una forma de usarlo en todos lados sin perder la compatibilidad con otros frameworks: Encapsular funciones.

    Si antes teniamos un código como:

    Quote
    jQuery.comprobarAlert = function( mensaje, opciones_user ){

    var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user);
    var mensaje = jQuery.comprobarAlert.transformar(mensaje);
    alert(opciones.inicio_str + mensaje + opciones.final_str);

    }

    Eso se transforma a:

    Quote
    (function($) {
    $.comprobarAlert = function( mensaje, opciones_user ){
    var opciones = $.extend( $.comprobarAlert.op_default , opciones_user);
    var mensaje = $.comprobarAlert.transformar(mensaje);
    alert(opciones.inicio_str + mensaje + opciones.final_str);
    }
    })(jQuery);

    con el uso del alias $, que es mas elegante y compacto. En resúmen:

    Quote
    (function($) {
    // Aqui pones tu codigo, el cual puede hacer uso de $ .... y $ = smile
    })(jQuery);

    Juntandolo todo:
    Ahora que hemos visto todo (o bastante de) lo relacionado con plugins en jQuery, finalizemos nuestro cool plugin de comprobarAlert. Voy a cambiarle el nombre por uno corto (alerter) y lo implementaré como una extension al jQuery.fn, para usar selectores con él:

    Quote
    ( function($) {
    $.fn.alerter = function(atributo, opciones_user){

    // Ponemos la variable de opciones antes de la iteración (each) para ahorrar recursos
    opc = $.extend( $.fn.alerter.opc_default, opciones_user );

    // Devuelvo la lista de objetos jQuery
    return this.each( function(){
    var atrib = $(this).attr(atributo);
    var mensaje = $.fn.alerter.formato(atrib);
    alert( opc.inicial_str + mensaje + opc.final_str );
    });

    };

    $.fn.alerter.opc_default = {
    inicial_str : "Mensaje: "
    final_str : "."
    };

    $.fn.alerter.formato = function(texto){
    var texto = String(text);
    var primera_letra = texto.substring(0,1);
    var resto = texto.substring(1, texto)length);
    return primera_letra+resto;
    };
    })(jQuery);

    Con eso podemos desde nuestro html hacer el llamado:

    Quote
    $("#victima").alerter("id");

    Lo que nos retornará "Mensaje: victima.". Si sobreescribimos los defaults con la siguiente llamada:

    Quote
    $.fn.alerter.formato = function(texto){
    return String(texto).toUpperCase();
    };

    $("#victima").alerter("id", {
    inicial_str: "Alerta:",
    final_str: " ."
    });

    Nos retorna "Alerta:VICTIMA .".

    Resumen / puntos a recordar:
    • Nombrar el plugin jquery.nombre.js
    • Los métodos se añaden al objeto jQuery.fn, y las funciones al objeto jQuery.
    • Tener en cuenta los ámbitos de las variables en el plugin (explicados arriba).
    • Todos los metodos y funciones DEBEN terminar con ; o el codigo no funcionara al comprimirse.
    • Los métodos deben devolver el objeto jQuery (a menso de que se especifique lo contrario).
    • Se debe hacer ciclo con los elementos usando "this.each", para producir codigo limpio y compatible.
    • Siempre usar "jQuery" en vez de $ a menos de que se coloque la solucion ya mostrada.

    También hay un patron de desarrollo que trata de los puntos más importantes que hemos visto:

    • Usar un solo nombre en el objeto jQuery: No satures el objeto jQuery o jQuery.fn con muchos objetos distintos para un solo plugin. Usa solo un nombre (objeto), al cual le añades métodos y propiedades
    • Aceptar un argumento de "opciones" para controlar el plugin
    • Proveer una manera de modificar los valores default del plugin.
    • Proveer acceso a modificar funciones del plugin cuando sea posible
    • Mantener las funcione principales privadas.
    • Soporte del plugin Metadata (no cubierto en este tutorial)

    Referencia:
    • Pagina de autoría de plugins en jquery.com: http://docs.jquery.com/Plugins/Authoring
    Patrón de desarollo para plugins de jQuery


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 44 | 6:59 PM
    QueryLoader: Carga tu sitio con estilo

    Una interesante propuesta que hacen las personas de Gaya Design simulando de una manera minimalista y agradable un preloader como si fuera flash y terminando en una apertura en fade de todo el sitio.

    Pueden verlo funcionando aquí.

    Características
    • Precarga toda una página web.
    • Precarga una parte de la página.
    • Obtiene todas las imágenes, img y background-image de tu CSS
    • Fácil de implementar.
    • La barra de carga ajustable.
    • Probado en Firefox, Safari, Opera, Chrome, IE7, IE8 y IE6 (el script será ignorado en IE6).
    ________________________________________

    Implementación
    Lo primero que necesitaremos hacer es llamar las librerías JS y la CSS antes de la etiqueta head de su sitio.

    Quote
    HTML:

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
    <link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
    <script type='text/javascript' src='js/queryLoader.js'></script>


    Ahora solo nos resta llamar la función para iniciarla

    Quote
    HTML:

    <script type='text/javascript'>
    QueryLoader.init();
    </script>


    ________________________________________

    Customización
    Si sólo deseamos que un elemento o un contenedor sea precargado podemos configurar un selector de jQuery para precarga sólo lo que queremos.
    Por ejemplo, si tenemos un elemento definido con un ID y solo deseamos que se carguen las imágenes dentro de este elemento podemos usar lo siguiente:

    Quote
    HTML:

    <script type='text/javascript'>
    QueryLoader.selectorPreload = "#ID_AQUI";
    QueryLoader.init();
    </script>


    Para ajustar las animaciones de la barra de carga, pueden revisar las siguientes funciones:
    QueryLoader.animateLoader () y QueryLoader.doneLoad ()

    El ajuste de estas funciones requiere un poco de conocimiento jQuery
    .
    cool cool cool
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 45 | 1:43 PM
    Ventana Modal con jQuery en 3 pasos

    Las ventanas modal están adquiriendo cada vez más popularidad debido a su creciente uso en webs como WordPress, que han demostrado sus beneficios en cuanto a usabilidad dentro de aplicaciones online.

    Pero aunque parezca un recurso reservado a grandes aplicaciones, lo cierto es que implementar ventanas modal es más sencillo de lo que parece. Aquí les indicamos en pocos pasos cómo crear una ventana modal utilizando jQuery.

    El jQuery selecciona todas las etiquetas anchor con atributo rel configuradas en "modal" y toma el id DIV definido en el href para mostrarlo como una ventana modal.

    En este sitio se está usando facebox (inspirado en facebook). Otros, como lightbox, thickbox, multibox, litebox poseen características diferentes.

    Este ejemplo te mostrará cómo crear una ventana modal que mostrará el contenido de de un DIV #ID.

    Objetivos
    1. Poder buscar en el documento HTML completo una etiqueta REL= de atributo "modal" para que cuando los usuarios hagan clic en ella, se muestre el contenido del #ID DIV en el atributo HREF de la ventana modal.
    2. Crear una máscara que llene la pantalla completa.
    3. Crear una ventana modal fácil y simple de modificar.

    Código HTML y atributos de etiqueta A

    Quote
    <!-- #dialog es el id de un DIV definido en el código que está a continuación -->
    <a href=”#dialog” name=”modal”>Simple Modal Window</a>

    <div id="boxes">

    <!-- #Aqui personalizas tu ventana modal -->

    <div id="dialog" class="window">
    <b>Testeo de la Modal Window</b> |

    <!-- el botón close está definido como clase close<a href="#" class="close">Close it</a>

    </div>

    <!-- No elimines el div#mask, porque lo necesitarás para rellenar la pantalla -->
    <div id="mask"></div>
    </div>

    Código CSS

    Quote
    <style>

    /* Z-index of #mask must lower than #boxes .window */
    #mask {
    position:absolute;
    z-index:9000;
    background-color:#000;
    display:none;
    }

    #boxes .window {
    position:absolute;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
    }


    /* Customize your modal window here, you can add background image too */
    #boxes #dialog {
    width:375px;
    height:203px;
    }
    </style>

    JavaScript

    Quote
    <script>

    $(document).ready(function() {

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
    //Get the A tag
    var id = $(this).attr('href');

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow",0.8);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(2000);

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();
    $('#mask, .window').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    });

    });

    </script>

    Es bastante directo y fácil de entender. Recuerda que debes incluir el framework jQuery.

    Conclusión
    Sí, eso es todo lo que necesitas para realizar una simple ventana modal con jQuery. En este tutorial, se muestra el concepto de cómo mostrar contenido DIV dentro de una ventana modal. Sin embargo, puedes desarrollarlo todavía más para aceptar un link y mostrarlo en un iFrame o una galería de imágenes.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » jQuery (qué es, pa' qué es, etc.)
    Página 3 de 11«123451011»
    Búscar: