How to Create Your Own jQuery Plugins and UI Widgets

Presented By: Sasha dos Santos

BarCamp Tampa Bay 2013

http://slidesha.re/142RZOz

This presentation covers creating your own jQuery plugins and UI widgets. Create your own library of reusable code using jQuery as a foundation. It focuses primarily on UI widget authoring using the jQuery UI Widget Factory.

About The Presenter

• ASP .NET Developer w/ interest in JavaScript, GIS and mobile

• Graduate of the University of South Florida• Twitter: @SashaGeekette • Blog: SashaGeekette.wordpress.com• Linked In: http://

www.linkedin.com/in/hiresasha

Let’s Fiddle…

http://bit.ly/NtmpOU

Let’s Fiddle…

http://jsfiddle.net/sashageekette/VjKzU/

Intro to jQuery UI

Intro to jQuery UI Widget Factory

• All jQuery UI widgets built on this reusable base• Use to create stateful plugins• Simplifies common tasks• Create namespace• Merge user options with default options• Event wiring• Pseudo-selector• Inheritance

Lets Fiddle…

Goal: Replicate the basic functionality of the ASP .NET AJAX Control Toolkit’s Rating control

http://bit.ly/14i6HjU

Lets Fiddle…

http://jsfiddle.net/sashageekette/9b7RM/

References

• Project Silk: http://msdn.microsoft.com/en-us/library/hh404085.aspx

• learn.jquery.com: https://github.com/jquery/learn.jquery.com/tree/master/page/jquery-ui/widget-factory

• Widget Factory: http://ajpiano.com/widgetfactory/#slide1

This presentation is available for viewing & download: http://slidesha.re/142RZOz

“See you next time…”