es es es es it es en zh es pt es de es es en en ja ar ar es es nl es es es es es es es es nl es es es es es es es es nl es en en fr en en es en en ru gl es fa uk es fa gl uk fa fa fa el es es fa mn es es es es fa fa es es en en en es es en es es es en en es en en en en en en es en en it es ca en en en es es es es es nl es uk fa fa es es es es es es fa fa es es es es es es es nl es en en en en en en es el es es fa es es es es es es es es nl es en it es ca en es es es es es es es es es es es nl es es es es es es es es es es nl es es ar es ja en ca fa es es en en uk en en ru el arz ja en ca fa fa fr arz pt en ca fa fa es en en en ar es en en en es en en en es es es es es nl es es es es es es es es es es nl es gl es es es es es es es es nl es es es es es es es nl es es es es fr es es es la uk kn es es ko es zh es es zh es es es es es nl es es es es eo en en es es es gl es es es es es es lt es es es lt es es es lt pt en en lt es fa es es es es es es nl es es es es ceb es es es es lt es es es lt es es es lt it en en en jv en lt pt lt en ca es es vi te pt la hbs_lat en sv en kn it it es pt es sv es kn fa pt es sv es kn pt fa ar it it es fa pt pt kn it ca hbs_lat it es es fa pt pt kn it ca fa en ca es es es es es nl es es es te pt es la es hbs_lat en sv en kn es it es it es es pt es es sv es es kn es fa es pt es sv es kn pt fa es ar es it it es fa es pt pt kn es it ca hbs_lat it es es fa pt pt kn it ca es es es es es nl es es es ceb es es es es lt es es es lt es es es lt it en en en jv en lt pt lt en ca es es vi es fa en ca es es es es es nl es es es es es es es es es es es gl nl es es en ro en tr ro kk es ja ja es es es es es es es es gl nl es ja es es es es vi es es tr es es en es es ca es en es es es es kn es ca es kk es es es ca fa fa ca es es es es es es nl es es es es es es es es nl es es es es es es es en id ru lt es en id ne kn fa es es es es es es nl es es es es es en es kn es vi tr gl fa es mn es pt en ca fa es fa en es es fa fa en ca es es es es uk nl es es es es es es es es es nl es es es es gl gl es es es es es en es kn es es es es es es en es kn es es vi es fa fa es es es es es nl es es es es es es es nl es ja pt es fa es ja pt fa es ja es es es es es nl es es es es gn pt kn es es it es kn es es es es es es es es pt es es kn es es es es es en es es es es es es es es es es es en cs es es es cs es es es es es es es es cs es es es es es es es es fr es es es es es es es es es es es es es es es es es es gl gl es es es uk es gl es es es es es it es es es es it es es de es es es es it es pl es es cs es es it pl es es es es es es es es es es es es es es es es es es
Vamos a repetir a lo largo de los siguientes artículos un concepto que quiero explicar para que se sepa a qué nos referimos. Se trata de las "Funciones de efectos" que son aquellas que dispone jQuery para crear efectos especiales en páginas web. Como hemos dicho, en diversos artículos anteriores ya se han explicado y mostrado efectos de diversas de las funciones de efectos disponibles.
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. En este Manual de jQuery ya hemos visto varios ejemplos sobre estas funciones de efectos y a lo largo de los próximos artículos que publicaremos en desarrolloweb .com veremos diversas otras aplicaciones de muestra donde podremos seguir aprendiendo.
Publicado por Unknown en 4:50 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
lunes, 29 de diciembre de 2014
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.
En el Manual de jQuery hemos tratado ya en diversos artículos de los efectos en jQuery. De hecho, éste ya es el cuarto artículo que destinamos a tratar las distintas maneras de crear efectos en este framework Javascript. Hasta la fecha hemos publicado las claves para la creación de efectos simples, el versátil método animate() para realizar la animación de atributos CSS numéricos, o las funciones de para crear efectos de fundido.
Todos estos métodos tratados anteriormente, y algunos más que no hemos revisado todavía 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 que ya hemos superado este primer paso y ya sabemos hacer toda una gama de efectos simples, vamos a aprender a encadenar varios efectos a ejecutar uno detrás de otro. Veremos en este artículo y varios que sucederán, 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.
Publicado por Unknown en 8:58 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
domingo, 28 de diciembre de 2014
Código completo del ejemplo de fading en jQuery
A continuación podemos ver el código completo de trabajo con los métodos de fading disponibles en jQuery.
Mostrar y ocultar elementos de forma suavizada con fading
ocultar toda la lista  |
Ocultar la lista y luego mostrarla
Cambia la opacidad del elemento H1 a:
Cambiar la opacidad de los elementos de la lista por orden
Publicado por Unknown en 8:48 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
sábado, 27 de diciembre de 2014
Los tres métodos que estamos viendo para hacer fading, como cualquiera de los existentes en jQuery, permiten el envío de un parámetro como función callback. Con este código conseguimos que se ejecute un fadeIn() después de un fadeOut(), para conseguir un efecto de parpadeo, en el que primero se oculta el elemento y cuando desaparece se vuelve a mostrar restaurando su opacidad
Como vemos, se está indicando una función callback y dentro de la misma, this es una referencia al objeto jQuery que recibió el anterior método. Osea, con $("#milista").fadeOut() se hace un efecto de fundido para que desaparezca el elemento "#milista". Luego la función callback se ejecutará cuando ese elemento termine de desaparecer. Dentro de esa función callback se accede a $(this) para tener una referencia a "#milista" y sobre ese elemento invocamos al método fadeIn() para hacer que aparezca de nuevo la lista.
Ahora vamos a mostrar otro ejemplo de callback un poco más adelantado, en el que se encadenan varias funciones callback, que se ejecutarían una detrás de la otra.
En este código hacemos un efecto de fadeTo() sobre cada uno de los elemento de la lista. Para definir qué opacidad queremos aplicar a esos elementos utilizamos de nuevo el campo SELECT que habíamos visto anteriormente en este artículo. Pero en esta ocasión utilizamos una manera distinta de acceder al valor de opacidad que hay seleccionado, a través del método attr() de jQuery.
En el código anterior primero se ejecuta el cambio de opacidad en el primer elemento, luego en el segundo y por último en el tercero, siempre hacia la misma "opacidad_deseada" que se había recuperado en el SELECT.
Publicado por Unknown en 8:44 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
viernes, 26 de diciembre de 2014
El método fadeTo es bastante más versátil, como ya se había adelantado. Para hacer un ejemplo interesante con este método tenemos que ver cómo se le pueden pasar distintos valores de opacidad y para ello hemos creado un campo select con distintos valores.
Como se puede ver, este SELECT tiene diferentes OPTION con algunos valores de opacidad. Los valores (atributos value de los OPTION) son números entre 0 y 1. Ahora vamos a mostrar el código de un evento que asociaremos a este campo SELECT, para ejecutar acciones cuando el usuario cambia el valor que aparece en él. Cuando el SELECT cambie, queremos actualizar el valor de opacity de los elementos H1 de la página.
En este código estamos definiendo un evento "onchange" sobre el SELECT anterior. En la primera línea de la función se está extrayendo la opacidad deseada y para ello se accede a la propiedad target del objeto evento que se recibe en la función que enviamos al método change().
Nota: en el objeto evento, target es una referencia al objeto del DOM sobre el que se está codificando el evento. Es decir, en este ejemplo, e.target es una referencia al campo SELECT sobre el que estamos definiendo el evento. Con e.target.options[] tengo el array de options que hay dentro de ese SELECT. Con e.target.selectedIndex obtengo el índice del elemento seleccionado, para poder acceder a la opción seleccionada a través del array de options. Con e.target.options[e.target.selectedIndex].value estamos accediendo a la propiedad value del OPTION que se encontraba seleccionado. Así accedemos a la opacidad deseada que queríamos aplicar.
Una vez tenemos esa opacidad deseada, recogida del value del OPTION seleccionado, podemos ver la siguiente línea de código, en la que hacemos el fadeTo(). Veamos que fadeTo() recibe en principio dos métodos. El primero es la duración en milisegundos del ejemplo. El segundo es el valor de opacidad que queremos aplicar
Publicado por Unknown en 8:41 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
martes, 23 de diciembre de 2014
Ejemplos con efectos de fundido fadeOut() y fadeIn() en jQuery
Para ilustrar el modo en el que se pueden hacer efectos de fundido con el cambio de opacidad hemos hecho un ejemplo de página donde se pueden ver todos los métodos de fading en funcionamiento, con algunas variantes interesantes. Para hacernos una idea de lo que vamos a conseguir en este ejercicio, podemos ver el ejemplo en marcha. En el ejemplo vamos a tener una lista como esta:
Como vemos, tanto la lista (etiqueta UL) como los elementos (etiquetas LI) tienen identificadores (atributos id) para poder referirnos a ellos desde jQuery.
Ahora veamos cómo hacer que la lista desaparezca con un fundido hacia transparente, a partir de una llamada a fadeOut().
Como se puede ver, fadeOut() en principio no recibe ningún parámetro. Aunque luego veremos que le podemos pasar un parámetro con una función callback, con código a ejecutarse después de finalizado el efecto.
Este sería el códio para que la lista vuelva a aparecer, a través de la restauración de su opacidad con una llamada a fadeIn().
Publicado por Unknown en 8:36 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
lunes, 22 de diciembre de 2014
Efectos de cambio de opacidad de los elementos en la página, con los métodos de fading en jQuery, fadeIn(), fadeOut() y fadeTo().
Vamos a conocer otra manera de aplicar efectos a elementos de la página, a través de los métodos de fading de jQuery. Son métodos muy sencillos de aplicar y que sirven para crear efectos bastante atractivos, donde se produce un fundido a través del cambio de la propiedad opacity de CSS. A lo largo del Manual de jQuery que venimos publicando en DesarrolloWeb.com hemos utilizado alguno de estos métodos para hacer efectos rápidos en jQuery, pero ahora los vamos a explicar de manera más detenida. Además, realizaremos nuevas prácticas con estos tipos de efectos de cambio de opacidad y trabajaremos con las funciones callback para realizar una pequeña cadena de efectos, que se ejecutan cuando los anteriores hayan acabado. Recordemos que CSS tiene una propiedad para alterar la opacidad de los elementos. Todos los valores de Opacity se expresan con números de 0 al 1. Con un valor de cero haría que el elemento fuera totalmente transparente y opacity con un valor de 1 sería totalmente opaco. Con los métodos de fading de jQuery se puede cambiar esa propiedad. Existen tres métodos para crear efectos de fundido, los siguientes:
Método fadeOut() Este método hace que el elemento que lo recibe desaparezca de la página a través del cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity cero.
Método fadeTo() El tercer método para hacer efectos de fundidos es fadeTo() y es el más versátil de todos, puesto que permite hacer cualquier cambio de opacidad, a cualquier valor y desde cualquier otro valor. Este método recibe la duración deseada para el efecto, el valor de opacidad al que queremos llegar y una posible función callback.
Publicado por Unknown en 8:30 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
domingo, 21 de diciembre de 2014
Ejemplo jQuery del método animate()
Para acabar vamos a ver un ejemplo del método animate(), pero bastante simplificado. En realidad solo vamos a utilizar el primero de los parámetros, para indicar las propiedades CSS que deseamos animar.
Tendremos un titular en la página H1 con algunos atributos de estilos:
Nuestra animación hará que el borde del elemento pase a tener 20 píxeles de anchura y que el tamaño de la fuente suba para 25pt. Para ponerla en marcha utilizaríamos un código como el siguiente
Como se puede ver, en notación de objeto indicamos dos atributos CSS y los dos valores a los que queremos animarlos. El primero de los valores, que no tiene unidades, es considerado como píxeles. El segundo valor, que se indica en puntos (pt), hará que jQuery utilice ese tipo de unidades en vez de los píxeles. Además, podemos fijarnos que en este caso a animate() solo le hemos pasado unparámetro, con la lista de las propiedades CSS a animar.
Por tanto, dejamos a jQuery que utilice los valores por defecto de tiempo de animación y función de animación. Pero veamos una página que hace uso de ese método, con el código completo. Como veremos, en la página tendremos además dos enlaces, uno para poner en marcha la animación y otro para restaurar el CSS de los elementos a los valores originales. Así que, de paso que vemos como hacer un animate(), aprenderemos además a lanzar la ejecución de las animaciones como respuesta a eventos de usuario.
Trabajando con el método animate:
Vuelvo a lo que había antes:
Publicado por Unknown en 8:22 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
sábado, 20 de diciembre de 2014
Parámetros del método animate()
Para invocar al método animate() tenemos que indicar una serie de parámetros, aunque solo uno de ellos será obligatorio. La lista es la siguiente: .animate( Propiedades, [ Duración], [ Función de animación ], [ Callback ] )
Propiedades: Este es el único parámetro que de debe indicar obligatoriamente y es para indicar qué atributos CSS queremos actualizar, con sus nuevos valores. Se tiene que indicar en notación de objeto, de manera similar a como se puede indicar en el método css() de jQuery y solo permite el cambio de propiedades CSS que tengan valores numéricos. Por ejemplo, podríamos cambiar la anchura de un borde, pero no el tipo de borde (si queremos que sea sólido, con línea de puntos, etc.) porque no tiene valores numéricos. Generamente, si no especificamos otra cosa los valores se entienden en píxeles. Los nuevos valores se pueden indicar de manera absoluta, o incluso de manera relativa, con un string del tipo "+=50", que indica que se debe aumentar en 50 ese atributo. En los ejemplos de este y siguientes artículos que publiquemos en desarrolloweb.com veremos varias maneras de indicar las propiedades para realizar varias animaciones.
Duración: Sirve para indicar la duración de la animación, en un valor numérico en milisegundos, o en un valor de cadena de caracteres como "fast" o "slow".
Función de animación: Esta función sirve para indicar cómo se realizará la animación, si más suave al principio y rápida al final, o igual de rápida todo el tiempo. Es decir, la velocidad con la que se realizará el cambio de valores en diferentes puntos de dentro de la animación. En principio, los dos posibles valores son "swing" (por defecto) y "linear".
Callback: Ofrece la posibilidad de indicar una función a ejecutarse cuando se ha terminado totalmente de producir el efecto. Es decir, una función que se invoca cuando se ha llegado al valor final de los atributos CSS que se solicitaron cambiar.
Publicado por Unknown en 7:59 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
viernes, 19 de diciembre de 2014
jQuery animate(): Animación de propiedades CSS
El método animate() de jQuery permite animar varias propiedades, con valores numéricos, de CSS en un solo paso.
Hemos avanzado bastante en el Manual de jQuery y con los conocimientos adquiridos hasta el momento ya estamos en disposición de aprender cualquier cosa más avanzada en este framework Javascript. Ha llegado el momento de dedicarnos a mostrar las maneras con las que podemos crear efectos para adornar nuestras páginas y hacer que la experiencia de uso sea más atractiva. En pasados artículos de DesarrolloWeb.com ya mostramos algunas maneras de hacer efectos sencillos en jQuery y en adelante vamos a explicar el funcionamiento de otros métodos, más complejos pero también más versátiles.
En el presente artículo vamos a comenzar a aprender cosas sobre el método animate(), uno de los más interesantes para hacer efectos en jQuery a partir de la modificación de propiedades CSS. Este método, como veremos, resulta bastante polivalente, pues con él podemos crear muchos tipos de animaciones, tantos como combinaciones de atributos CSS podemos tener. Sirve básicamente para ofrecer un listado de atributos CSS, con los nuevos valores a los que deseamos actualizarlos y jQuery se encargará de hacer esa modificación de manera que sea bastante suave.
Por ejemplo, tenemos un elemento con los atributos CSS width y height con valores "X e Y" y queremos animarlos para que esos atributos pasen a tener valores "Z y T" Con el método animate() podemos conseguir que esos atributos pasen de unos valores a otros sin cambios bruscos, y en lugar de ello lo hagan con una animación suavizada desde uno a otro valor.
Publicado por Unknown en 6:20 1 comentario:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
jueves, 18 de diciembre de 2014
Conclusión: una envoltura segura y sencilla para tus plugins
Como podemos entender, colocar esa envoltura en tus plugins, no interfiere en nada a cómo se tienen que diseñar y todo lo que hemos aprendido anteriormente sobre creación de plugins se puede aplicar a este pequeño pero interesante truco. No obstante, para completar las informaciones, a continuación se puede ver un plugin donde realizamos un plugin utilizando esta técnica para ocultar el código y utilizar el alias de $.
Como hemos visto en este artículo, utilizar esa envoltura para nuestros plugins es una tarea simple, no requiere mucho código y las ventajas son importantes.
Publicado por Unknown en 4:44 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
miércoles, 17 de diciembre de 2014
Alias personalizado y ocultar código en plugins jQuery
Cómo crear un alias personalizado a $, para mejorar la compatibilidad en todos los contextos, y ocultar el código privado de los plugins jQuery.
En principio un plugin jQuery está pensado para que todas las personas lo puedan usar en sus páginas web y de hecho, hemos aprendido muchas convenciones para potenciarlo a lo largo de los capítulos dedicados a la creación de plugins en el Manual de jQuery. En este artículo vamos a aprender otra buena práctica que ayudará a que nuestros plugins funcionen correctamente en todos los sitios web. Se trata de ocultar de una manera sencilla todo el código de nuestros plugins y utilizar un alias para la variable $ que puede dar conflictos con otras librerías.
Algo que nos ayudará de dos maneras: El símbolo $ se utiliza en muchos otros frameworks y componentes Javascript y si el web donde se coloque el plugin utiliza alguno de ellos, pueden ocurrir conflictos, algo que no ocurrirá en el caso que utilicemos un alias. En el código de los plugins puedes utilizar tus propias variables o funciones, que tendrán el nombre que hayas querido.
Pero alguno de esos nombres puede que ya los utilicen otros programadores en sus páginas, lo que puede generar conflictos también. Por eso no es mala idea ocultar tu código y hacerlo local a un ámbito propio. Todo esto se consigue colocando todo tu código dentro de una función que se invoca según se declara.
//Código de tu plugin
//puedes crear tus variables o funciones
//solo serán visibles aquí
})(); //la función se ejecuta instantáneamente
Además, a esa función podríamos enviarle la variable "jQuery" que contiene toda la funcionalidad del framework. Esa variable la recibirás en el parámetro con cualquier alias, como se puede ver en el siguiente código:
Como la variable jQuery siempre es una referencia al framework correcta, puedes estar seguro que no tendrá conflictos con otras librerías. Luego la recibimos con el nombre $, pero en ese caso ya estamos en el ámbito de la función, donde las variables locales pueden tener el nombre que nosotros queramos.
Nota: En este caso estamos recibiendo la variable jQuery con el nombre $, pero podríamos utilizar cualquier otro nombre para el alias a
Publicado por Unknown en 6:18 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
martes, 16 de diciembre de 2014
Invocar al plugin checkbox personalizado con jQuery
Ya que hemos hecho un checkbox personalizado, por un objeto de options, vamos a mostrar cómo se pueden crear varios
tipos de checkbox con este código. Veamos el siguiente HTML:
Se puede apreciar que tenemos simples elementos SPAN. Por un lado tenemos 3 SPAN con la clase "ch" y por otro lado otro SPAN suelto con identificador "otro". Ahora veamos cómo los convertiríamos en campos de formulario checkbox
Así crearíamos 3 checkbox, en los 3 primeros SPAN que tenían la class "ch". Estos checkbox personalizados se crearían con las opciones por defecto.
activo: 'Buen tiempo :)',
pasivo: 'Buena cara ;)'
border: "1px solid #dd5",
En este segundo caso de invocación al plugin estamos convirtiendo en un checkbox personalizado el último SPAN, que tenía identificador "otro". En este segundo caso estamos utilizando multitud de variables de configuración específicas, que harán que el checkbox tenga un aspecto radicalmente diferente a los anteriores
Publicado por Unknown en 6:17 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
domingo, 14 de diciembre de 2014
Personalización del plugin por medio de objeto de opciones - III
El código está convenientemente comentado para que se pueda entender mejor. Pero lo que queremos mostrar en este caso es que hemos creado dos funciones dentro del código del plugin: activar() y desactivar(). Esas dos funciones, al estar dentro del bloque this.each(), se pueden acceder desde cualquier parte del plugin y comparten el mismo ámbito de variables que el propio plugin, luego podremos acceder desde ellas a cualquier variable definida en el bloque this.each().
Para que quede un poco más clara la estructura completa del plugin, coloco a continuación su código completo:
jQuery.fn.checkboxPersonalizado = function(opciones) {
//opciones de configuración por defecto
var conf = {
padding: "2px 2px 2px 24px",
border: "1px solid #eee",
//Las extiendo con las opciones recibidas al invocar el plugin
var miCheck = $(this);
var activo = conf.activo
var elementoCheck = $(' ');
background: "transparent url(" + conf.imagen.pasivo + ") no-repeat 3px",
background: "transparent url(" + conf.imagen.activo + ") no-repeat 3px",
Publicado por Unknown en 6:16 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
sábado, 13 de diciembre de 2014
Personalización del plugin por medio de objeto de opciones - II
Tal como se puede ver, se han definido varias variables para configurar el objeto, que se dispondrán en un objeto que tenemos en la variable "configuracion". Entre las variables de configuración tenemos una llamada "activo" con un valor boleano para decidir si el elemento checkbox estaría o no seleccionado desde el principio. Tenemos una variable "colorTextos", para definir el color del texto cuando el elemento está activo y pasivo. También tenemos otra serie de configuraciones para los estados de activo y pasivo (seleccionado o no seleccionado), como la imagen que se tiene que mostrar al lado del texto.
Ahora veamos el código del plugin, lo que iría dentro de this.each(). Recordemos que cada variable creada aquí es accesible dentro de todo el bloque de código definido por las llaves del this.each(). Así mismo, las funciones declaradas aquí son accesibles desde cualquier parte de este bloque.
//variables locales al plugin
var miCheck = $(this);
var activo = conf.activo
//el elemento checkbox interno pero no visible
var elementoCheck = $(' ');
//el nombre del checkbox puede ser configurado desde options o con el propio texto del campo
//inserto el checkbox en la página
//aplico estilos que vienen en la configuración
//si el elemento estaba marcado para estar activo
//defino un evento para el elemento
//compruevo la variable activo, definida dentro del plugin
//función local en el plugin para desactivar el checkbox
//cambio los estilos para el elemento a los marcados como pasivos
background: "transparent url(" + conf.imagen.pasivo + ") no-repeat 3px",
//si hay un texto específico para cuando estaba pasivo
//desmarcho el checkbox interno que es invisible, pero que se envía como elemento de formulario.
background: "transparent url(" + conf.imagen.activo + ") no-repeat 3px",
Publicado por Unknown en 6:12 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
viernes, 12 de diciembre de 2014
Personalización del plugin por medio de objeto de opciones - I
Podemos comenzar por ver el principio de código del plugin, donde estamos definiendo las variables de configuración por defecto y las estamos extendiendo con las variables de configuración definidas al invocarlo.
jQuery.fn.checkboxPersonalizado = function(opciones) {
//opciones de configuración por defecto
var conf = {
padding: "2px 2px 2px 24px",
border: "1px solid #eee",
//Las extiendo con las opciones recibidas al invocar el plugin
Publicado por Unknown en 6:10 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
jueves, 11 de diciembre de 2014
Plugin checkbox personalizado con jQuery
Un plugin en jQuery para hacer un campo de formulario checkbox pero con un diseño distinto, totalmente personalizable por el desarrollador.
A veces los campos de formulario que tenemos disponibles en HTML son un poco "aburridos", por decirlo de alguna manera. Quiero decir que son siempre iguales para todas las páginas y existen pocas opciones para configurar su aspecto, sobre todo en el caso de los elementos checkbox. Como diseñadores caprichosos, nosotros podríamos desear que nuestros checkboxes tuvieran un aspecto o color determinado, que haga mejor combinación con otros elementos de nuestro layout. Y estas son cosas que podemos conseguir fácilmente con un poco de jQuery.
En este artículo pretendemos hacer un plugin para crear campos checkbox personalizados, con las mismas funcionalidades de los checkbox normales, pero que tengan un aspecto configurable por el desarrollador.
Para ello utilizaremos el modelo de creación de plugins en jQuery, de modo que haremos todo el trabajo en un plugin que cualquier persona podría utilizar en su sitio web y configurar los checkbox según sus preferencias. Para seguir las explicaciones de este artículo necesitaremos saber acerca de la creación de plugins en jQuery y en concreto vamos a practicar con dos cosas que hemos aprendido recientemente:
• Gestión de opciones en plugins jQuery
• Crear Funciones y variables dentro de plugins jQuery
Para apreciar con exactitud cómo serán algunos ejemplos de checkbox que vamos a realizar, podemos echar un vistazo al ejemplo en marcha.
Publicado por Unknown en 6:09 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
miércoles, 10 de diciembre de 2014
Esquema de programación de un plugin - II
Nota: Antes del this.each() se pueden colocar también variables, pero tenemos que tener en cuenta que existirá una misma copia de esa variable para todos los elementos donde se está aplicando el plugin.
Veamos el siguiente HTML.
Ahora veamos estas dos llamadas al plugin anterior.
Como se puede ver, con la primera llamada se ejecuta el plugin sobre un elemento de la página con id="esteDiv". Es un único elemento de la página, luego el plugin solo se aplica una vez. Sin embargo, en la segunda llamada, se ejecuta el plugin sobre varios elementos con la class de CSS "misspan". En este segundo caso el plugin se ejecutará sobre tres elementos y entonces podremos comprobar que las variables que se habían definido fuera del this.each() solo existen una vez y su valor es común para los tres elementos sobre los que se aplicó el plugin en la segunda llamada.
Lo cierto es que quizás todo esto quede un poco confuso, o no se entienda muy bien para qué podremos querer todas esas variables y funciones locales al plugin. Pero a medida que vayamos trabajando y planteándonos plugins más complicados, veremos que nos son de mucha utilidad para almacenar datos a los que queremos acceder más tarde, o para organizar el código de nuestro plugin en distintas funciones, que se pueden llamar repetidas veces y desde varios sitios.
Para los que conocen un poco de programación orientada a objetos, quizás les aclare un poco este simil: Si un plugin fuese como un objeto, las variables de dentro del bloque this.each() de los plugins serían como las propiedades de ese objeto y las funciones serían como métodos de ese objeto.
Aunque hay que salvar las distancias, porque un plugin no sigue exactamente el modelo que conocemos en las clases de programación orientada a objetos. Para que veamos un caso práctico de plugin que tiene varias variables y funciones locales hemos realizado el ejemplo del siguiente artículo: Checkbox con diseño personalizado con jQuery.
Publicado por Unknown en 6:08 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
martes, 9 de diciembre de 2014
Esquema de programación de un plugin - I
A continuación vamos a mostrar el esquema de código de un plugin que incluye funciones y variables. Este plugin no sirve para nada, simplemente es una prueba que estoy realizando para ver cómo puedo crear esas variables, acceder a ellas y comprobar su ámbito en distintos puntos del código del plugin.
jQuery.fn.miPlugin = function() {
//variables que son comunes a todos los elementos
//que había en el objeto jQuery que recibe el método del plugin
alert("Nueva invocación de plugin. Mi variable común: " + mivariableComun)
//Elemento sobre el que itero y estoy aplicando el plugin
//elem es una variable que podremos utilizar en todo el plugin
//variables específicas para cada elemento
var miVariable = "x";
//miVariable se podrá acceder dentro de todo el código que pongamos aquí
//función que será accesible desde cualquier parte del plugin
//puedo acceder a variables del plugin
//Muestro el contenido de la variable
alert("mi variable local y particular de cada plugin: " + miVariable);
//cambio la variable común a todos los elementos de este plugin
mivariableComun = "Otra cosa común!"
//puedo invocar las funciones del plugin
//evento, que tiene una función. Puedo acceder a variables y funciones del plugin
//puedo acceder a variables del plugin
alert("Dentro del evento: " + miVariable);
//puedo acceder a funciones
Para definir esas variables y funciones locales al plugin, de manera que estén accesibles dentro del plugin y a su vez tengan acceso a todos los datos del mismo, debemos colocarlas dentro de la iteración que se hace con this.each(). Como se puede entender del código del plugin anterior, todas esas variables y funciones se pueden invocar o acceder en cualquier parte, siempre y cuando estemos dentro del this.each(), donde fueron creadas. Este plugin, aunque no valga para mucho, lo hemos publicado y se puede ver en marcha en una página aparte.
Publicado por Unknown en 6:07 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
lunes, 8 de diciembre de 2014
Funciones y variables dentro de plugins jQuery
Las funciones en los plugins pueden verse como funciones y variables privadas del plugin, que nos sirven para definir una mejor lógica de programación y estructura de datos y código.
Igual que en cualquier lenguaje de programación, podemos utilizar funciones para estructurar el código de nuestros plugins. Del mismo modo, en los plugins podemos tener variables, donde guardar datos u objetos que tengan validez dentro del ámbito de ese plugin. Todo ello nos ayudará bastante a hacer un código más claro, autónomo y compacto.
En este artículo vamos a mostrar cómo sería el esquema de programación de un plugin jQuery un poco más avanzado, que incluye las mencionadas variables y funciones "locales" (o "privadas", como las queramos llamar). Veremos también cómo es posible acceder a esas variables y funciones desde cualquier parte del flujo de código de un plugin, incluso desde el código de otras funciones, como los eventos.
Publicado por Unknown en 6:05 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
domingo, 7 de diciembre de 2014
Invocar al plugin con o sin las opciones de configuración
Para acabar, vamos a invocar al plugin del tip con opciones, pero lo vamos a hacer de dos modos, uno con las opciones por defecto y otro con opciones específicas. Así se llamaría al plugin con las opciones por defecto:
En realidad le estamos pasando un parámetro, pero no son las opciones, sino es el texto que tiene que aparecer en el tip. Como no se indican opciones, ya que no hay segundo parámetro, se toman todas las definidas por defecto en el plugin. Las opciones, según se puede ver en el código del plugin, se deberían enviar en un segundo parámetro cuando se llama al plugin, tal como se puede ver a continuación:
Ahora hemos indicado varias opciones específicas, que se tendrán en cuenta al crear el plugin con este segundo código. Para acabar, dejamos un enlace para ver el ejemplo en funcionamiento.
Publicado por Unknown en 6:04 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
sábado, 6 de diciembre de 2014
Código completo del plugin tip con opciones
Veamos todo el código de nuestro primer plugin en implementar el sistema de opciones:
jQuery.fn.creaTip = function(textoTip, opciones) {
var configuracion = {
var miTip = $(' ' + textoTip + ' ');
var miTip = $(this).data("capatip");
left: e.pageX + 10,
top: e.pageY + 5
var miTip = $(this).data("capatip");
Publicado por Unknown en 6:03 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
viernes, 5 de diciembre de 2014
variable "configuracion", con las opciones específicas para el plugin concreto, recibidas por medio del parámetro "opciones". jQuery.extend(configuracion, opciones); Esta sentencia es una llamada al método extend() que pertenece a jQuery.
Esta función recibe cualquier número de parámetros, que son objetos, y mete las opciones de todos en el primero. Luego, después de la llamada a extend(), el objeto del primer parámetro tendrá sus propiedades más las propiedades del objeto del segundo parámetro. Si alguna de las opciones tenía el mismo nombre, al final el valor que prevalece es el que había en el segundo parámetro. Si tenemos dudas con respecto a este método, leer el artículo jQuery.extend().
Así, podemos ver cómo con extend() las propiedades por defecto del plugin se combinan con las que se envíen en las opciones. Luego, en el código del plugin, podremos acceder a las propiedades a través de la variable configuración, un punto y el nombre de propiedad que queramos acceder.
Publicado por Unknown en 6:00 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
jueves, 4 de diciembre de 2014
Plugin Tip con opciones en jQuery
Un ejemplo de plugin en jQuery para hacer un sistema de tip más avanzado, que permite configurarse por medio de unas opciones en el plugin.
Hace poco tiempo publicamos un artículo en DesarrolloWeb.com sobre un plugin para mostrar un tip con un mensaje que aparecería en una capa al pasar el ratón sobre un elemento caliente. Eso es lo que llamamos un tip y lo explicamos en el artículo Plugin jQuery para hacer un Tip simple.
Ahora vamos a hacer una modificación en ese plugin para implementar una serie de opciones, que nos permitirán configurar de una manera más versátil el comportamiento del plugin. Las opciones que vamos a implementar serán las siguientes:
• Velocidad de la animación de mostrar y ocultar el tip
• Animación a utilizar para mostrar el tip
• Animación a utilizar para ocultar el tip
• Clase CSS para la capa del tip Todas esas opciones se definen, junto con los valores por defecto que van a tomar, al crear el código del plugin.
En el anterior artículo ya explicamos de manera general cómo funciona el sistema de options en plugins, que vamos a utilizar a continuación. Comenzamos por especificar, con notación de objeto, las opciones de configuración por defecto para el plugin:
var configuracion = {
Ahora veamos el inicio del código del plugin, donde debemos observar que en la función que define el plugin se están recibiendo un par de parámetros. El primero es el texto del tip, que necesitamos para crear la capa del tip (Este parámetro ya aparecía en el código del plugin del artículo anterior). El segundo son las opciones específicas para configurar el plugin.
jQuery.fn.creaTip = function(textoTip, opciones) {
var configuracion = {
//extiendo las opciones por defecto con las opciones del parámetro.
Publicado por Unknown en 5:55 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
miércoles, 3 de diciembre de 2014
Concusión sobre la configuración de plugins con el objeto de opciones
Hasta el momento no hemos visto más que un código parcial de lo que sería un plugin con options para su configuración. Pero esperamos haber despejado ya algunas dudas. No obstante, veremos mejor cómo funciona todo por medio de un ejemplo en un artículo siguiente.
Continuar la lectura con el ejercicio Plugin Tip con opciones en jQuery.
Publicado por Unknown en 5:52 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
martes, 2 de diciembre de 2014
Invocar al plugin enviando el objeto de opciones
Ahora podemos ver el código que utilizaríamos para invocar al plugin pasando las opciones que deseamos:
O podríamos enviar solo alguno de los datos de configuración, para que el resto se tomen por defecto:
O no enviar ningún dato al crear el plugin para utilizar los valores por defecto en todas las opciones de configuración.
Publicado por Unknown en 5:52 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
lunes, 1 de diciembre de 2014
Definir opciones por defecto en el código del plugin
Con el siguiente código podemos definir las variables de configuración por defecto de un plugin y combinarlas con las variables de options enviadas por parámetro al invocar el plugin.
jQuery.fn.miPlugin = function(cualquierCosa, opciones) {
//Defino unas opciones por defecto
var configuracion = {
dato1: "lo que sea",
//extiendo las opciones por defecto con las recibidas
//donde tenemos la variable configuracion para personalizar el plugin
La función principal del plugin recibe dos parámetros, uno "cualquierCosa" y otro "opciones". El primero supongamos que es algo que necesita el plugin, pero la configuración, que es lo que nos importa ahora, se ha recibido en el parámetro "opciones".
Ya dentro de la función del plugin, se define el objeto con las opciones de configuración, con sus valores por defecto, en una variable llamada "configuracion". En la siguente línea se mezclan los datos de las opciones de configuración por defecto y las recibidas por el plugin al inicializarse. Luego podremos acceder por medio de la variable "configuracion" todas las opciones del plugin que se va a iniciar.
Nota: El modo en cómo se mezclan los datos por medio de extend(), podéis revisar en el artículo sobre el método jQuery.extend().
Publicado por Unknown en 5:51 No hay comentarios:
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
Entradas más recientes Entradas antiguas Inicio
Suscribirse a: Entradas (Atom)
Java dispone del operador incremento (++) y decremento (--). El operador (++) incrementa en una unidad la variable a la que se aplica, mien...
Los Wrappers (envoltorios) son clases diseñadas para ser un complemento de los tipos primitivos. En efecto, los tipos primitivos son los ún...
Redefinición de métodos heredados
Una clase puede redefinir (volver a definir) cualquiera de los métodos heredados de su super-clase que 110 sean final. El nuevo método sust...
La localización mas adecuada para una nueva unidad productiva debe orientarse hacia los mismos objetivos que el tamaño óptimo, es decir haci...
Maps y SortedMaps - Part 1
Un Map es una estructura de datos agrupados en parejas clave/valor. Pueden ser considerados como una tabla de dos columnas. La clave debe ...
Técnicas para Recopilación de Antecedentes
Para obtener antecedentes como las que acabamos de mencionar se han desarrollado técnicas de distinto grado de complejidad. Estas técnicas...
Clases TextArea y TextField
Ambas componentes heredan de la clase TextComponent y muestran texto seleccionable y editable. La diferencia principal es que TextField sól...
LECTURA DE UN ARCHIVO EN UN SERVIDOR DE INTERNET
Teniendo la dilección de Internet de un archivo, la librería de Java permite leer este archivo utilizando 1111 stream. Es una aplicación mu...
Insertar un manejador de evento a la etiqueta A (enlace) que hay en la página
Ahora que ya sabemos cómo y cuando debemos ejecutar las acciones de jQuery que alteren la funcionalidad, contenidos o aspecto de la página,...
Recordemos cómo será la creación de una base de datos con SQL:
1) En primer lugar, tendremos que dar nombre a la base de datos, con la sentencia CREATE DATABASE, si la hay, o con CREATE SCHEMA. 2) A con...
Colas de efectos en jQuery
Código completo del ejemplo de fading en jQuery
Ejemplos con efectos de fundido fadeOut() y fadeIn...
Ejemplo jQuery del método animate()
Parámetros del método animate()
Conclusión: una envoltura segura y sencilla para t...
Alias personalizado y ocultar código en plugins jQ...
Invocar al plugin checkbox personalizado con jQuery
Personalización del plugin por medio de objeto de ...
Personalización del plugin por medio de objeto de ...
Personalización del plugin por medio de objeto de ...
Plugin checkbox personalizado con jQuery
Esquema de programación de un plugin - II
Esquema de programación de un plugin - I
Funciones y variables dentro de plugins jQuery
Invocar al plugin con o sin las opciones de config...
Código completo del plugin tip con opciones
Plugin Tip con opciones en jQuery
Concusión sobre la configuración de plugins con el...
Invocar al plugin enviando el objeto de opciones
Definir opciones por defecto en el código del plugin
Acerca de Este Blog
Mi lista de blogs
NOTICIAS DE TECNOLOGIA Y TELECOMUNICACIONES
Honor Las ventajas de comprar un smartphone con servicio técnico y garantía en Bolivia - HONOR se apega a los estándares de calidad más exigentes de la industria global. Además, brinda un sistema de asistencia personalizado para entregar la ...
Rata de bombeo y eficiencia - Calculo de eficiencia de las bombas - Bomba Triplex - Volumen del cilindro = π.r².L Pi, conversión de radio a diámetro, unidades de conversión y el numero de cámaras son todas calculadas por la siguientes e...
LO QUE SE DE BLOGS
Video CONFIGURA TU ROUTER TP-LINK WR940N COMO REPETIDOR SIN CABLES 100% Inhalambrico -
Telefonos Moviles y Aplicaciones
Video Desayuno de Samsung para los Periodistas, los Galaxy S20 -
Lentes inteligentes que cambian su graduación - Cuando se alcanza cierta edad, la vista comienza a fallar. Muchas personas también sufren problemas de visión de nacimiento, o por una lesión. Si ves mal d...