   | |
| Moderador del foro: ZorG |
| Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » jQuery (qué es, pa' qué es, etc.) |
| jQuery |
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: En Mootools el código para hacerlo funcionar se compone de la siguiente manera: Ya con jQuery, lo mismo se realiza de la siguiente manera: 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: se cambiará a: Esto se repetirá con cada selector en que antes utilizábamos $. Finalmente reciclando el mismo código mostrado anteriormente, quedaría: Ver ejemplo integrando jQuery+Mootools Otra manera es creando una variable con una nueva manera de escribir $, por ejemplo, $jQ: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
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.
|
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.
|
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. Incluimos tanto el estilo que se mostrará la primera vez que el visitante acceda a la página como los estilos alternativos que deseemos. 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. Ahora tan sólo queda incluir el script de Kelvinluck.com, que se ayuda de un par de funciones de Quirksmode. Ya tenemos realizado un intercambiador de estilos que recordará nuestra elección cada vez que carguemos la página. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
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: <body> Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
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: 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. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Filtro :random con jQuery Ahorita les quiero mostrar cómo obtener un item de manera aleatoria con jQuery, partiendo de la siguiente solución. Un ejemplo de la utilización del filtro :random sobre los elementos de una lista sería: 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: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
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. Seguidamente construimos un menú al que deberemos añadir la clase "nudge" a cada uno de los enlaces: 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. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
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 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
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 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.
|
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(), 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 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: Tendría el mismo efecto que llamarla sin parámetros. 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. Tenemos el siguiente HTML, que incluye varios elementos: 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. Así podremos definir el evento onclick del primer botón: Así podemos definir el evento onclick del segundo: 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. 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: 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. </head> Ahora, para acabar, podemos ver el ejercicio en marcha en una página aparte. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
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, En estos momentos se supone que sabemos cómo introducir funciones de efectos en las colas de efectos de jQuery. 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 ) ) • 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. 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. Ejemplo jQuery para encolar funciones que no son efectos Tenemos este código HTML: 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. 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.
|
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.
|
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 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 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 jQuery.fn.alerter = function(){ 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: 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 ... ... 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 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) opciones_default = { opciones = jQuery.extend(opciones_default , opciones_user); 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: $.comprobarAlert("Tengo opciones default"); // Aqui podemos cambiar el default: //Y ejecutar el mismo llamado, que ahora dara un resultado distinto: 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: }); En vez de eso, podrías hacer lo siguiente (con el método que ya casi explicaré): //E incluso, puedes cambiar el color de uno solo con el override (reemplazo) que ya hemos visto: La manera de lograr esta maravilla de la usabilidad (XD) es la siguiente (con nuestro ejemplo de alerter): // Primero creamos nuestra variable de opciones } jQuery.comprobarAlert.op_default = { 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: o incluso cambiarlos por separado: Extensibilidad jQuery.comprobarAlert.op_default = { // Esta es nuestra "función modificable" Como verás, estamos dejando que el contenido de la función sea modificable, de modo que podamos poner en nuestro html un reemplazo: 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: function transformar(msj){ // Aqui se llama a la función, que es privada alert(opciones.inicio_str + mensaje + opciones.final_str); De ese modo, nuestra función es inaccesible externamente. Extendiendo 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: jQuery.fn.rozar = function(fun){ // Y lo anterior se puede usar como $(".holocube3dsuperdelux").rozar( function(){ 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 Uso del alias $ Si antes teniamos un código como: var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user); } Eso se transforma a: con el uso del alias $, que es mas elegante y compacto. En resúmen: Juntandolo todo: // Ponemos la variable de opciones antes de la iteración (each) para ahorrar recursos // Devuelvo la lista de objetos jQuery }; $.fn.alerter.opc_default = { $.fn.alerter.formato = function(texto){ Con eso podemos desde nuestro html hacer el llamado: Lo que nos retornará "Mensaje: victima.". Si sobreescribimos los defaults con la siguiente llamada: $("#victima").alerter("id", { Nos retorna "Alerta:VICTIMA .". Resumen / puntos a recordar: 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 Referencia: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
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 Implementación Customización Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
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 Código HTML y atributos de etiqueta A Código CSS JavaScript Es bastante directo y fácil de entender. Recuerda que debes incluir el framework jQuery. Conclusión Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
| |||