jQuery: como construir uma extensão Plugins

Como todas as bibliotecas deste tipo também jQuery permite que você estenda sua funcionalidade básica usando plugins real. Respeitando as regras de seu funcionamento, isto é, o retorno é sempre um ponteiro para o item selecionado ou jQuery em si, você pode escrever um plugin com algumas linhas de código. Tomemos por exemplo o código proposto em jQuery contra todos: um benchmark com 5 browser , que foi (após a correção relatado por Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). Css ('cursor', 'ponteiro'). Click (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) next () é (:) 'hidden') slideDown $ (this) next () (); else $ (this) next () slideUp ();....
}
);

Ipotizionamo quer reprocessamento este "recurso" em um método que pode ser chamado diretamente do jQuery. Vamos chamar nosso método simpleAccordion() . Primeiro de tudo, criar um arquivo com a sintaxe:

[nomeplugin].jquery.js

1
jquery. [nomeplugin]. js

Então, no nosso caso:

simpleaccordion.jquery.js

1
jquery.simpleaccordion.js

Dentro desse arquivo, escrevemos:

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 do usuário @
* /
/ **
* Demonstração simpleAccordion Plugins
*
* /
( $ ) { (Função ($) {
( { $. Fn. Extend ({
( options ) { simpleAccordion: function (options) {

{ defaults = {var
velocidade: 'normal'
};
$. extend ( defaults , options ) ; opções var = $ extend (padrões, opções).;

( function ( ) { devolver este. cada função (() {
$ ( this ) ; __e var = $ (this);
. css ( 'cursor' , 'pointer' ) . click ( function ( ) { $ (__e). Css ('cursor', 'ponteiro'). Click (function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) if (.. $ (this) next () é (': hidden'))
) . next ( ) . show ( options. speed ) ; $ (Este) Next () Show (options. velocidade)..;
outro
) . next ( ) . hide ( options. speed ) ; $ (Este) Next () Hide (options. velocidade)..;
});
});
}
});
; }) (JQuery);

Este arquivo deve ser carregado após a biblioteca jQuery, usando a forma usual de inclusão:

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

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

Nossa "extensão" já está disponível e nós podemos tentá-lo com o seguinte código:

1
2
3
) . simpleAccordion ( ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown'). SimpleAccordion (). Click (function () {$ (this). Css ('cor', 'red')});
/ / Ou, alterando os parâmetros padrão
) . simpleAccordion ( { speed : 'slow' } ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown') SimpleAccordion ({velocidade: 'slow'}).. Click (function () {$ (this) Css ('cor', 'red')});.

). No exemplo acima alterações da cor da ( h2 ) para verificar se nossa extensão em conformidade com o padrão puntantore jQuery devolver o item selecionado (neste caso h2.dropdown ). Um esqueleto é então possível:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ **
* JQuery esboços Plugin
*
* /
( $ ) { (Função ($) {
( { $. Fn. Extend ({
( options ) { MyMethod: function (options) {

{ } ; defaults var = {};
$. extend ( defaults , options ) ; opções var = $ extend (padrões, opções).;

( function ( ) { devolver este. cada função (() {
$ ( this ) ; __e var = $ (this);
/ / Todo
Opções / Default / em "opções"
});
}
});
; }) (JQuery);

3 comentários para "jQuery: como construir uma extensão plugins"

  1. 25 setembro de 2008 Lucas :

    Olá,
    finalmente alguém que escreve em italiano como construir um plugin com jquery!

    Eu vou fazer mais um esclarecimento, eu posso? :)
    Normalmente, o padrão é usado jquery. [Nomeplugin]. Js e que inverteu [nomeplugin]. Jquery.js
    É isso aí :)

    PS: Quando você voltar a falar sobre ActionScript3? :)

    Responder Citação
  2. 25 set 2008 Giovambattista Fazioli :

    @ Lucas: finalmente alguém para fora! Eu gosto desta declaração ... na verdade, na documentação oficial do jQuery sintaxe é mostrada para indicar também, ou seja: jquery.[insert name of plugin].js .
    O meu erro ... embora, devo dizer, não quer magoar [insert name of plugin].jquery.js , quase para indicar uma "extensão". No entanto, outros leitores lembrar que o final do exemplo, tudo funciona bem com o nome "errado".
    Volto a falar sobre Actionscript 3, mesmo - espero - em um Flash CS4; acaba de lançar :)

    Responder Citação
  3. 14 outubro de 2008 Simone D'Amico »Blog Archive» Criando um plugin para o jQuery :

    [...] Para criar um plugin, você só tem conhecimento decente de Javascript. Giovambattista Fazioli neste link tem escrito um guia interessante sobre como criar o nosso plugin para o [...]

Deixe um comentário

XHTML PERMIT TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CÓDIGO DE INSERÇÃO: 
 <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