jQuery PluginsSchulung

Übersicht• Plugin? Beiß es?

– Was braucht man– Javascript Plugin oder jQuery Plugin

• Strucktur– Grund Struktur– Die „Trickkisten“– „This/var“– Optionen– Beispiele

• Ausblick und Ende

jQuery Plugin

Plugin? Beiß es?

jQuery Plugin

jQuery selection

DOM Manipulation

Return Objekt, so dass man

wieter nutzen kann

jQuery Plugin

jQuery PluginWarum soll man das machen?

– Reusability– Zuordnung – Abstration

Was braucht man?– jQuery.js

Dateiname!?– jquery.pluginName.js– mapping.pluginName.js

jQuery Plugin

Javascript Plugin oder jQuery Plugin– Javascript Plugins

• 12,137,211 ops/sec• Schwehre

– jQuery Plugins• 350,557 ops/sec• Einfach

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>

jQuery Plugin - Grundaufbau

jQuery Plugin - Grundaufbau

Objektorientiert

Global

Grundaufbau der Trickkiste

jQuery Plugin – Grundaufbau basiert auf den “Trickkiste”

jQuery Plugin – “this/var”

jQuery Plugin - Optionen

jQuery Plugin - Optionen

jQuery Plugin - Optionen

jQuery Plugin

jQuery Plugin

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.

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 )

Nächste Schulung...

Ende

Danke für‘s zuhören