jQuery: how to build an extension Plugins

Like all the libraries of this type also jQuery allows you to extend its basic functionality using real plugins. Respecting the rules of its operation, that is, return it is always a pointer to the selected item or jQuery itself, you can write a plugin with a few lines of code. Take for example the proposed code in jQuery against everyone: a benchmark with 5 browser , which was (after the correction reported by Luca ):

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

Ipotizionamo want to reprocessing this "feature" in a method callable directly from jQuery. We will call our method simpleAccordion() . First of all we create a file with the syntax:

[nomeplugin].jquery.js

1
jquery. [nomeplugin]. js

So in our case:

simpleaccordion.jquery.js

1
jquery.simpleaccordion.js

Within this file, we write:

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
/ **
* @ Author User
* /
/ **
* Plugins simpleAccordion demo
*
* /
( $ ) { (Function ($) {
( { $. Fn. Extend ({
( options ) { simpleAccordion: function (options) {

{ var defaults = {
speed: 'normal'
};
$. extend ( defaults , options ) ; var options = $. extend (defaults, options);

( function ( ) { return this. each (function () {
$ ( this ) ; __e var = $ (this);
. css ( 'cursor' , 'pointer' ) . click ( function ( ) { $ (__e). Css ('cursor', 'pointer'). Click (function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) if ($ (this). next (). is (': hidden'))
) . next ( ) . show ( options. speed ) ; $ (This). Next (). Show (options. speed);
else
) . next ( ) . hide ( options. speed ) ; $ (This). Next (). Hide (options. speed);
});
});
}
});
; }) (JQuery);

This file must be loaded after the jQuery library, using the usual form of inclusion:

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

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

Our "extension" is now available and we can try it with the following code:

1
2
3
) . simpleAccordion ( ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown'). SimpleAccordion (). Click (function () {$ (this). Css ('color', 'red')});
/ / Or by changing the default parameters
) . simpleAccordion ( { speed : 'slow' } ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown'). SimpleAccordion ({speed: 'slow'}). Click (function () {$ (this). Css ('color', 'red')});

). In the above example changes the color of the ( h2 ) to verify that our extension complies with the standard jQuery puntantore returning the selected item (in this case h2.dropdown ). A skeleton is then possible to:

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

{ } ; var defaults = {};
$. extend ( defaults , options ) ; var options = $. extend (defaults, options);

( function ( ) { return this. each (function () {
$ ( this ) ; __e var = $ (this);
/ / Todo
/ / Default options in "options"
});
}
});
; }) (JQuery);

3 comments to "jQuery: how to build an extension plugins"

  1. September 25, 2008 Luke :

    Hello,
    finally someone who writes in Italian how to build a plugin with jquery!

    I'll make one more clarification, I can? :)
    Usually the pattern is used jquery. [Nomeplugin]. Js and you have reversed [nomeplugin]. Jquery.js
    That's it :)

    PS: When you come back to talk about ActionScript3? :)

    Reply Quote
  2. September 25, 2008 Giovambattista Fazioli :

    @ Luke: finally someone out! I like this statement ... in fact in the official documentation of jQuery syntax is shown to indicate too, ie: jquery.[insert name of plugin].js .
    My mistake ... although, I must say, it would not hurt either [insert name of plugin].jquery.js , almost to indicate an "extension". However, other readers to remember that the end of the example, everything works well with the filename "wrong".
    I'll be back to talk about Actionscript 3, even - I hope - in a Flash CS4; just released :)

    Reply Quote
  3. October 14, 2008 Simone D'Amico »Blog Archive» Creating a plugin for jQuery :

    [...] To create a plugin, you just have decent knowledge of Javascript. Giovambattista Fazioli at this link has written an interesting guide on how to create our plugin for [...]

Leave a comment

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <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


Stop SOPA