Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: How To: Eige jQuery-Funktion erstellen



Ranking: 0   Kommentare: 1   |   Bewertung: Keine Berechtigung!  

jQuery, vereinfacht vieles. Vorallem für diejenigen, die sich mit Javascript im Allgemeinen nicht sonderlich viel beschäftigt haben, bietet dieses mächtige Werkzeug viel Effekt auch für Anfänger.

Die stetig wachsene Anzahl an Plugins kommt auch nicht von ungefähr, denn es ist fast genauso ein Kinderspiel eine eigene Funktion (und damit später ein Plugin) zu schreiben, wie eine bloß einzufügen.

Zugegeben, die Grundkenntnisse von jQuery sind auch hierfür unverzichtbar, wie auch in meinem anderen Tutorial "Schritt-fuer-Schrit-zum-eigenen-jQuery-Slider", gebe ich hier zu Anfang eine Empfehlung für die jQAPI Documentation ab.

Damit hätten wir die "Formalitäten" erledigt, und springen gleich hinein ins Vergnügen.

Vorweg, am besten lagert ihr gleich alles von Anfang an aus, d.h. neue Datei, meinetwegen jqfunctions.js o.ä.

Um jQuery mitzuteilen, dass diese jqfunctions.js Funktionen beinhaltet, die später mit $().deineFunktion aufgerufen werden kann, wird zuerst folgendes an den Anfang gesetzt:

jqfunctions.js:

Code:


(function ($) {



Damit sind die Festspiele eröffnet :D, wir können unsere eigenen Funktionen definieren. Und das geschieht bei jeder neuen Funktion immer gleich und zwar wie folgt:

Code:




$.fn.deineFunktion = function(){

     //Mach was

};




Ab jetzt ist deine eigene Funktion jederzeit mit

Code:


$('Element').deineFunktion()


aufrufbar.

Und eigentlich wären wir hier auch schon am Ende, wenn da nicht noch die Sache mit den Parametern wäre.
Wir möchten ja schließlich "deineFunktion" auch Eigenschaften zuordnen können, und dies geschieht über einfache Parameter.
Dazu gehen wir wieder in die jqfunctions.js und ergänzen unsere Funktion wie folgt:

Code:




$.fn.deineFunktion = function( options ) {        // options, in der die Werte aus .deinerFunktion() gespeichert werden

var settings = {                                             // beinhaltet die Default-Werte

                       'eigenschaft1'  :  'wert1',

                       'eigenschaft2'  :  'wert2'

};

};



myOptions = $.extend(settings, options);       //Es werden, je nachdem, ob es Werte gibt, Default-Werte (settings) oder von .deineFunktion() geschickte Werte (options) an myOptions angehängt



};




Um nun die Eigenschaften anwenden zu können, kannst du nun, z.b. ganz normal die jQuery-internen-Funktionen benutzen und somit die verschiedenen Elemente im DOM verändern.

Code:




$('Element').css({"color":myOptions.eigenschaft1});





Die jqfunctions.js können wir nun erstmal links liegen lassen, und widmen uns unserer Seite, in der wir zuvor diese natürlich über (<script type="text/javascript" src="jqfunctions.js"></script>) eingebunden haben.

Hier muss noch .deineFunktion( ) samt Eigenschaften, auf ein Element angewendet werden.

Dies geschieht wie folgt; die Anweisung für die Eigenschaften ist in etwa die, aus der jqfunctions.js.

Code:




$('Element').deineFunktion({

'eigenschaft1'  :  'wert1',

'eigenschaft2'  :  'wert2'

});





Applaus, Klaus, das wars....

Und hier nochmal die Zusammenfassung (für die Lesefaulen Copy-Paster unter euch):

jqfunctions.js:

Code:




$.fn.deineFunktion = function( options ) {        // options, in der die Werte aus .deinerFunktion() gespeichert werden

var settings = {                                             // beinhaltet die Default-Werte

                       'eigenschaft1'  :  'wert1',

                       'eigenschaft2'  :  'wert2'

};



$('Element').css({"color":myOptions.eigenschaft1});  // Anweisung, was die Eigenschaften genau bewirken.



};




index.html:

Code:




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

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



<script type="text/javascript">

$(document).ready(function(){



$('Element').deineFunktion({

           'eigenschaft1':'wert1',

           'eigenschaft2':'wert2'

});



});

...





Bei Fragen und Problemen, bitte einfach melden....

Veröffentlicht von: vanDerb
Veröffentlicht am: 25 Nov. 2010
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: funktion javascript jQuery


Themenverwandte Tutorials


Kommentar(e) (1)


deleted_1456821596 sagt:

Naja jQuery ist nicht wirklich mächtig. Im Gegenteil - jQuery dient eigentlich nur dazu, ein wenig DOM rumzuschubsen. Mächtig wären ExtJS oder YUI. Aber jQuery ist es wirklich nicht. Das mit den Plugins ist eine schöne Sache- ich mach auch viel mit jQuery. Wenn man allerdings das ganze etwas mehr strukturieren möchte, stößt man bei jQuery schnell an seinen Grenzen.

Am besten du Packst außen rum noch:

Code:


(function(jQuery) {

...

}(window));



So kannst du sicher gehen dass es nicht komplett im globalen Namensraum rumhängt.

15 Dec. 2010 11:22:06 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder