Código de JQuery - Ejemplo de creación de un plugin para jquery que hace parpadear unas notificaciones

Imágen de perfil

Ejemplo de creación de un plugin para jquery que hace parpadear unas notificacionesgráfica de visualizaciones


JQuery

Publicado el 17 de Abril del 2012 por Xavi
7.193 visualizaciones desde el 17 de Abril del 2012. Una media de 35 por semana
En este código, se muestra un ejemplo de como se realiza un sencillo plugin para jquery para hacer que nuestas notificaciones tengan un efecto de parpadeo.

Versión 1

Publicado el 17 de Abril del 2012gráfica de visualizaciones de la versión: Versión 1
7.194 visualizaciones desde el 17 de Abril del 2012. Una media de 35 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Las caracteristicas de un plugin tienen que ser:

- Nombre: El archivo que crees con el código de tu plugin lo debes nombrar como jquery.NombreTuPlugin.js
- fn: Añade las funciones como nuevos métodos por medio de la propiedad fn del objeto jQuery, para que se conviertan en métodos del propio objeto jQuery.
- this: Dentro de los métodos que añades como plugins, la palabra "this" será una referencia al objeto jQuery que recibe el método. Por tanto, podemos utilizar "this" para acceder a cualquier propiedad del elemento de la página con el estamos trabajando.
- ;: Debes colocar un punto y coma ";" al final de cada método que crees como plugin, para que el código fuente se pueda comprimir y siga funcionando correctamente. Ese punto y coma debes colocarlo después de cerrar la llave del código de la función.
- return this: El método debe retornar el propio objeto jQuery sobre el que se solicitó la ejecución del plugin. Esto lo podemos conseguir con un return this; al final del código de la función.
- This.each: Se debe usar this.each para iterar sobre todo el conjunto de elementos que puede haber seleccionados. Recordemos que los plugins se invocan sobre objetos que se obtienen con selectores y la función jQuery, por lo que pueden haberse seleccionado varios elementos y no sólo uno. Así pues, con this.each podemos iterar sobre cada uno de esos elementos seleccionados. Esto es interesante para producir código limpio, que además será compatible con selectores que correspondan con varios elementos de la página.
- Asignación: Asigna el plugin siempre al objeto jQuery, en vez de hacerlo sobre el símbolo $, así los usuarios podrán usar alias personalizados para ese plugin a través del método noConfict(), descartando los problemas que puedan haber sido por plugins con el mismo nombre.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
 
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- <script src="jquery.parpadea.js"></script> -->
<script type="text/javascript">
jQuery.fn.parpadea = function() {
    this.each(function(){
        elem = $(this);
        elem.fadeOut(250, function(){
            $(this).fadeIn(250);
        });
    });
    return this;
};
</script>
<style>
    BODY            {margin:0px;}
    #notificacion   {background-color:#f00;font-weight:bold;padding:10px;}
</style>
</head>
 
<body>
<div id='notificacion'>Este texto es una notificación</div>
 
<h1>Ejemplo de creación de un plugin para jquery</h1>
 
<p style='cursor:pointer;'><b>Pulsa aqui para hacer parpadear las notificaciones</b></p>
 
<script type='text/javascript'>
    $("p").click(function() {
        $("#notificacion").parpadea();
    });
</script>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2173