jQuery: wie man eine Erweiterung Plugins zu bauen

Wie alle Bibliotheken dieser Art auch jQuery können Sie die grundsätzliche Funktionsweise der Verwendung realer Plugins zu erweitern. Einhaltung der Regeln für ihren Betrieb, das heißt, wieder ist es immer ein Zeiger auf das ausgewählte Element oder jQuery selbst, können Sie ein Plugin mit ein paar Zeilen Code zu schreiben. Nehmen Sie zum Beispiel den vorgeschlagenen Code in jQuery gegen alle: ein Benchmark mit 5 Browser , die (nach der Korrektur durch gemeldet wurde Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). Css ('Cursor', 'Zeiger'). Klicken Sie auf (
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 wollen Aufbereitung dieses "Feature" in eine Methode aufgerufen werden direkt von jQuery. Wir rufen unsere Methode simpleAccordion() . Zunächst erstellen wir eine Datei mit der Syntax:

[nomeplugin].jquery.js

1
jquery. [nomeplugin]. js

In unserem Fall:

simpleaccordion.jquery.js

1
jquery.simpleaccordion.js

In dieser Datei ist, schreiben wir:

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 Benutzer
* /
/ **
* Plugins simpleAccordion Demo
*
* /
( $ ) { (Function ($) {
( { $. Fn. Extend ({
( options ) { simpleAccordion: function (options) {

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

( function ( ) { senden Sie dieses. each (function () {
$ ( this ) ; __e var = $ (this);
. css ( 'cursor' , 'pointer' ) . click ( function ( ) { $ (__e). Css ('Cursor', 'Zeiger'). Click (function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) if (.. $ (this) next () is (': hidden'))
) . next ( ) . show ( options. speed ) ; $ (This) Next () Show (options. Geschwindigkeit)..;
sonst
) . next ( ) . hide ( options. speed ) ; $ (This) Next () Hide (options. Geschwindigkeit)..;
});
});
}
});
; }) (JQuery);

Diese Datei muss nach dem jQuery-Bibliothek geladen werden, wobei die übliche Form der Integration:

<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 >

Unsere "Verlängerung" ist jetzt verfügbar und wir können es mit dem folgenden Code versucht:

1
2
3
) . simpleAccordion ( ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown'). SimpleAccordion (). Klicken Sie auf (function () {$ (this). Css ('color', 'red')});
/ / Oder, indem Sie die Standard-Parameter
) . simpleAccordion ( { speed : 'slow' } ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown') SimpleAccordion ({Geschwindigkeit: 'slow'}).. Click (function () {$ (this) CSS ('color', 'red')});.

). In dem obigen Beispiel wird die Farbe des ( h2 ), um sicherzustellen, dass unsere Erweiterung mit dem Standard jQuery puntantore wieder das ausgewählte Element (in diesem Fall entspricht h2.dropdown ). Ein Skelett wird dann möglich:

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

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

( function ( ) { senden Sie dieses. each (function () {
$ ( this ) ; __e var = $ (this);
/ / Todo
/ / Default-Optionen in "Optionen"
});
}
});
; }) (JQuery);

3 Kommentare zu "jQuery: wie man eine Erweiterung Plugins zu bauen"

  1. 25. September 2008 Lukas :

    Hallo,
    endlich jemand, der in Italien schreibt, wie man ein plugin mit jquery zu bauen!

    Ich werde noch eine Klärung zu machen, kann ich das? :)
    In der Regel wird das Muster jquery verwendet. [Nomeplugin]. Js und du hast [nomeplugin] rückgängig gemacht. Jquery.js
    Das ist es :)

    PS: Wenn Sie wiederkommen, um über ActionScript3 sprechen? :)

    Antwort zitieren
  2. 25. September 2008 Giovambattista Fazioli :

    @ Lukas: endlich jemand aus! Ich mag diese Aussage ... in der Tat in die offizielle Dokumentation von jQuery -Syntax wird gezeigt, dass auch, also angeben: jquery.[insert name of plugin].js .
    Mein Fehler ... obwohl, ich muss sagen, es ist nicht schaden würde entweder [insert name of plugin].jquery.js , fast zu einer "Verlängerung" geben. Um jedoch andere Leser daran erinnern, dass das Ende der beispielsweise alles, was gut funktioniert, mit dem Dateinamen "falsch".
    Ich werde wiederkommen, um zu Actionscript 3 zu sprechen, auch - so hoffe ich - in einer Flash CS4; soeben erschienen :)

    Antwort zitieren
  3. 14. Oktober 2008 Simone D'Amico »Blog Archive» Erstellen eines Plugin für jQuery :

    [...] Um ein Plugin zu erstellen, müssen Sie nur noch anständige Wissen über Javascript. Giovambattista Fazioli unter diesem Link hat eine interessante Anleitung, wie man unser Plugin für erstellen geschrieben [...]

Hinterlasse einen Kommentar

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


Stoppen SOPA