JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“

Präsentation zum Thema: "JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“"—  Präsentation transkript:

1 jQuery Plugins Schulung

2 Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“ –„This/var“ –Optionen –Beispiele Ausblick und Ende

3 jQuery Plugin Plugin? Beiß es?

4 jQuery Plugin jQuery selection DOM Manipulation Return Objekt, so dass man wieter nutzen kann

5 jQuery Plugin

6 Warum soll man das machen? –Reusability –Zuordnung –Abstration Was braucht man? –jQuery.js Dateiname!? –jquery.pluginName.js –mapping.pluginName.js

7 jQuery Plugin Javascript Plugin oder jQuery Plugin –Javascript Plugins 12,137,211 ops/sec Schwehre –jQuery Plugins 350,557 ops/sec Einfach

8 jQuery Plugin –Javascript –jQuery var s = document.getElementById('thing').style; s.opacity = 1; (function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})(); $('#thing').fadeOut();

9 jQuery Plugin - Grundaufbau

10 Objektorientiert Global

11 Grundaufbau der Trickkiste

12 jQuery Plugin – Grundaufbau basiert auf den “Trickkiste”

13 jQuery Plugin – “this/var”

14 jQuery Plugin - Optionen

15

16

17 jQuery Plugin

18

19 Daran denken! –Immer “return this;” am Ende, wenn die Plugin auf einen Object ($.fn) basiert ist, sonst –J77 Mapping System Nutzen, für die Bindung des jQuery Plugins.

20 jQuery Plugin Ein paar Seiten dazu vielleicht? http://learn.jquery.com/plugins/ (jQuery Documentation)http://learn.jquery.com/plugins/ Step-by-Step Simple Plugin: http://blog.teamtreehouse.com/writing-your-own- jquery-plugins (Einfach Beispiel) http://blog.teamtreehouse.com/writing-your-own- jquery-plugins http://www.smashingmagazine.com/2011/10/essen tial-jquery-plugin-patterns/ (Mehr über $.extend )http://www.smashingmagazine.com/2011/10/essen tial-jquery-plugin-patterns/

21 Nächste Schulung...

22 Ende Danke für‘s zuhören