jQuery: cómo construir una extensión de Plugins

Al igual que todas las bibliotecas de este tipo también jQuery le permite extender su funcionalidad básica el uso de plugins real. Respetando las reglas de su funcionamiento, es decir, el retorno es siempre un puntero al elemento seleccionado o jQuery sí mismo, usted puede escribir un plugin con unas pocas líneas de código. Tomemos por ejemplo el proyecto de código en jQuery contra todos: un punto de referencia con 5 explorador , que era (después de la corrección reportados por Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). Css ('cursor', 'puntero'). Haga clic en (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; si (.. $ (this) siguiente () es (:) "ocultos") slideDown $ (this) al lado de () (); más $ (this) siguiente () slideUp ();....
}
);

Ipotizionamo quiere reprocesamiento esta "característica" en un método que se invoca directamente de jQuery. Vamos a llamar a nuestro método simpleAccordion() . En primer lugar creamos un archivo con la sintaxis:

[nomeplugin].jquery.js

1
jQuery. [nomeplugin]. js

Así, en nuestro caso:

simpleaccordion.jquery.js

1
jquery.simpleaccordion.js

Dentro de este archivo, escribimos:

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
/ **
* @ Autor del usuario
* /
/ **
* Plugins demostración simpleAccordion
*
* /
( $ ) { (Function ($) {
( { $. Fn. Extend ({
( options ) { simpleAccordion: function (options) {

{ por defecto var = {
velocidad: 'normal'
};
$. extend ( defaults , options ) ; var opciones = $ extender (por defecto, las opciones).;

( function ( ) { devolver este. cada función (() {
$ ( this ) ; __e var = $ (this);
. css ( 'cursor' , 'pointer' ) . click ( function ( ) { $ (__e). Css ('cursor', 'puntero'). Haga clic en (function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) si (.. $ (this) siguiente () es (': oculto'))
) . next ( ) . show ( options. speed ) ; $ (This) siguiente () Show (options. velocidad)..;
más
) . next ( ) . hide ( options. speed ) ; $ (This) siguiente () Hide (options. velocidad)..;
});
});
}
});
; }) (JQuery);

Este archivo debe ser cargado después de la librería jQuery, en la forma habitual de inclusión:

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

1
"text/javascript" src = "jquery.simpleaccordion.js" >< / script > < script de type = "text / javascript" src = "jquery.simpleaccordion.js"> </ script de >

Nuestro "extensión" ya está disponible y podemos intentarlo con el siguiente código:

1
2
3
) . simpleAccordion ( ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown'). SimpleAccordion (). Haga clic en (function () {$ (this). Css ('color', 'rojo')});
/ / O, cambiando los parámetros por defecto
) . simpleAccordion ( { speed : 'slow' } ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown) SimpleAccordion ({velocidad: "lento"}).. Haga clic en (function () {$ (this) Css (' color ',' rojo')});.

). En el ejemplo anterior cambia el color de la ( h2 ) para verificar que nuestra extensión cumple con el estándar de jQuery puntantore devolver el elemento seleccionado (en este caso h2.dropdown ). Un esqueleto es entonces posible:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ **
* Bocetos plugin de jQuery
*
* /
( $ ) { (Function ($) {
( { $. Fn. Extend ({
( options ) { MyMethod: function (options) {

{ } ; por defecto var = {};
$. extend ( defaults , options ) ; var opciones = $ extender (por defecto, las opciones).;

( function ( ) { devolver este. cada función (() {
$ ( this ) ; __e var = $ (this);
/ / Todo
Opciones / / por defecto en "opciones"
});
}
});
; }) (JQuery);

3 comentarios para "jQuery: cómo construir una extensión de plugins"

  1. 25 de septiembre 2008 Lucas :

    Hola,
    por fin alguien que escribe en italiano cómo construir un plugin de jQuery con!

    Voy a hacer una aclaración más, ¿verdad? :)
    Por lo general, el patrón se utiliza jQuery. [Nomeplugin]. Js y usted ha invertido [nomeplugin]. Jquery.js
    Eso es todo :)

    PS: Cuando usted se vuelve a hablar de ActionScript3? :)

    Responder Citar
  2. 25 de septiembre 2008 Giovambattista Fazioli :

    @ Lucas: por fin alguien! Me gusta esta declaración ... de hecho en la documentación oficial de jQuery se muestra la sintaxis para indicar también, es decir: jquery.[insert name of plugin].js .
    Mi error ... aunque, debo decir, que no estaría mal tampoco [insert name of plugin].jquery.js , casi para indicar una "extensión". Sin embargo, otros lectores recordar que la final del ejemplo, todo funciona bien con el nombre "equivocado".
    Vuelvo a hablar de Actionscript 3, incluso - espero - en un Flash CS4, acaba de publicar :)

    Responder Citar
  3. 14 de octubre 2008 Simone D'Amico »Blog Archive» La creación de un plugin para jQuery :

    [...] Para crear un plugin, que acaba de tener un conocimiento decente de Javascript. Giovambattista Fazioli en este enlace ha escrito una interesante guía sobre cómo crear nuestro plugin para [...]

Deja un comentario

XHTML PERMISO TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL