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