jquery plugins schulung. Übersicht plugin? beiß es? –was braucht man –javascript plugin oder...
TRANSCRIPT
![Page 1: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/1.jpg)
jQuery PluginsSchulung
![Page 2: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/2.jpg)
Übersicht• Plugin? Beiß es?
– Was braucht man– Javascript Plugin oder jQuery Plugin
• Strucktur– Grund Struktur– Die „Trickkisten“– „This/var“– Optionen– Beispiele
• Ausblick und Ende
![Page 3: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/3.jpg)
jQuery Plugin
Plugin? Beiß es?
![Page 4: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/4.jpg)
jQuery Plugin
jQuery selection
DOM Manipulation
Return Objekt, so dass man
wieter nutzen kann
![Page 5: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/5.jpg)
jQuery Plugin
![Page 6: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/6.jpg)
jQuery PluginWarum soll man das machen?
– Reusability– Zuordnung – Abstration
Was braucht man?– jQuery.js
Dateiname!?– jquery.pluginName.js– mapping.pluginName.js
![Page 7: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/7.jpg)
jQuery Plugin
Javascript Plugin oder jQuery Plugin– Javascript Plugins
• 12,137,211 ops/sec• Schwehre
– jQuery Plugins• 350,557 ops/sec• Einfach
![Page 8: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/8.jpg)
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)})();
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script>
$('#thing').fadeOut(); </script>
![Page 9: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/9.jpg)
jQuery Plugin - Grundaufbau
![Page 10: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/10.jpg)
jQuery Plugin - Grundaufbau
Objektorientiert
Global
![Page 11: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/11.jpg)
Grundaufbau der Trickkiste
![Page 12: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/12.jpg)
jQuery Plugin – Grundaufbau basiert auf den “Trickkiste”
![Page 13: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/13.jpg)
jQuery Plugin – “this/var”
![Page 14: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/14.jpg)
jQuery Plugin - Optionen
![Page 15: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/15.jpg)
jQuery Plugin - Optionen
![Page 16: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/16.jpg)
jQuery Plugin - Optionen
![Page 17: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/17.jpg)
jQuery Plugin
![Page 18: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/18.jpg)
jQuery Plugin
![Page 19: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/19.jpg)
jQuery Plugin• 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.
![Page 20: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/20.jpg)
jQuery Plugin• Ein paar Seiten dazu vielleicht?
• http://learn.jquery.com/plugins/ (jQuery Documentation)
• Step-by-Step Simple Plugin: http://blog.teamtreehouse.com/writing-your-own-jquery-plugins (Einfach Beispiel)
• http://www.smashingmagazine.com/2011/10/essential-jquery-plugin-patterns/ (Mehr über $.extend )
![Page 21: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/21.jpg)
Nächste Schulung...
![Page 22: JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“](https://reader036.vdocuments.pub/reader036/viewer/2022070507/570491cb1a28ab14218ddbd4/html5/thumbnails/22.jpg)
Ende
Danke für‘s zuhören