writing reusable web components with jquery and jquery ui
DESCRIPTION
Getting started with writing jQuery plugins and jQuery UI Widgets. Concepts, examples and recommended plugins.TRANSCRIPT
Reusable Web Componentswith jQuery and jQuery UI
Slides By: Ynon Perek.
http://ynonperek.com
Friday, February 8, 13
Agenda• Reusable Components
• jQuery Plugins Into
• Writing Our First Plugin
• Popular jQuery Plugins
• jQuery UI Widgets
• Writing Our First Widget
Friday, February 8, 13
Resources
• Microsoft’s Project Silk:
http://msdn.microsoft.com/en-us/library/hh396380.aspx
Friday, February 8, 13
Reusable Component
• Markup + Style + JavaScript
• All are optional
Friday, February 8, 13
Why Reuse
• Use same code within the same project
• Use same code within different projects
Friday, February 8, 13
The Hows
• Roll Your Own
• Extend Existing Framework
Friday, February 8, 13
The Hows
• Roll Your Own
• Extend Existing Framework
Friday, February 8, 13
jQuery Plugins
Friday, February 8, 13
jQuery Plugin
• Reusable JS Code
• Uses jQuery
Friday, February 8, 13
Example Plugins
• http://paweldecowski.github.com/jQuery-CreditCardValidator/
• http://anthonyterrien.com/knob/
• http://www.datatables.net/
• http://stevenbenner.github.com/jquery-powertip/
Friday, February 8, 13
Common Concepts
$('#example').dataTable();
$(".dial").knob();
$('.info').powerTip({ placement: 'ne' });
Friday, February 8, 13
Common Concepts
• Plugins add functionality to jQuery Objects
• Can take options
• Launch and Forget
$('#example').dataTable();
$(".dial").knob();
$('.info').powerTip({ placement: 'ne' });
Friday, February 8, 13
• jQuery plugins are just organized reusable code
Friday, February 8, 13
Let’s Write A Plugin
Friday, February 8, 13
Outliner Plugin
• Our plugin will add outline to an element
Friday, February 8, 13
Writing A Plugin
• Protect the $ with a self invoking function
// Outside $ may be another library (function($) { // But inside it's jQuery }(jQuery));
Friday, February 8, 13
Writing A Plugin
• Extend jQuery with your plugin name
• Plugin is just a function
(function($) { $.fn.outliner = function() { }; }(jQuery));
Friday, February 8, 13
Writing A Plugin
• Do you thing
• this is the jQuery object you’re working on
(function($) { $.fn.outliner = function() { this.css('outline', '2px solid blue'); }; }(jQuery));
Friday, February 8, 13
Writing A Plugin
• end with return this to allow chaining
(function($) { $.fn.outliner = function() { this.css('outline', '2px solid blue'); return this; }; }(jQuery));
Friday, February 8, 13
Using The Plugin
• Here’s how a user may add outline
$('div').outliner();
Friday, February 8, 13
Using The Plugin
• Here’s how a user may add outline
• Or with chaining
$('div').outliner().html('Cool Plugin');
Friday, February 8, 13
Adding Options
• Some users like different color
• Some users like different width
Friday, February 8, 13
Adding Options
• Some users like different color
• Some users like different width
$('div').outliner({ color: 'red', width: 2});
Friday, February 8, 13
Adding Options(function($) { $.fn.outliner = function( options ) { options = $.extend({}, $.fn.outliner.defaults, options); return this.css({ 'outline-color' : options.color, 'outline-width' : options.width + 'px', 'outline-style' : 'solid' }); }; $.fn.outliner.defaults = { color: 'blue', width: 1 }; }(jQuery));
Friday, February 8, 13
Basic Plugin Review
• Protect The $
• Add Your Plugin To $.fn
• Return this
• Add options and defaults
Friday, February 8, 13
Plugin Lab
• Write a “Same Text” plugin
• Activated on input elements
• When a user changes text in one input, text should be copied to other inputs
• Add validation regexp as an option. Copy only if text matches validation
Friday, February 8, 13
Q & A
Friday, February 8, 13
DOM ManipulatingPlugins
Friday, February 8, 13
Simple Autocomplete
• Let’s write a simple autocomplete plugin
Friday, February 8, 13
Solution Outline
• Create The New List Element
• Bind Event Handlers
var list_el = $('<ul class="autocomplete"></ul>'); list_el.on('click', 'li', function(ev) {// type code here}); self.on('input', function(ev) {// type code here});
Friday, February 8, 13
Autocomplete Takeaways
• A plugin can use accompanying CSS file
• A plugin can “bind” event handlers
• Can maintain state using closures
Friday, February 8, 13
Plugin Limitations
• Hard to maintain state
• Hard to destroy
• Hard to extend
Friday, February 8, 13
Meet jQuery UIExtensible UI Library Build On Top of jQuery
Friday, February 8, 13
What’s In The Box
• UI Framework
• UI Components
• Themes Framework
Friday, February 8, 13
jQuery UI Core
WidgetsFactory
Autocomplete Widget
Tabs Widget
Gallery Widget
Enhanced jQuery Plugin
Friday, February 8, 13
Our First Widget$(function($) { $.widget('my.filler', { _create: function() { this.element.html('Hello World'); } });}(jQuery));
// use the widget like a pluginvar widget = $('div').filler();
Friday, February 8, 13
jQUI Basics
• A widget is an object (not a function)
• _create is the entry point
• this.element is the DOM element
• widget name is namespaced
Friday, February 8, 13
Widget Lifecycle
• _create is called on creation
• _init is the default method
• _destroy terminates the widget
Friday, February 8, 13
Fixing Our First Widget$(function($) { $.widget('my.filler', { _create: function() { this.data = { previousContent: this.element.html() } this.element.html('Hello World'); }, _destroy: function() { this.element.html( this.data.previousContent ); } });}(jQuery));
// later in codewidget.filler('destroy');
Friday, February 8, 13
Widget Customizations
• A jQuery UI Widget can take options (just like with plugins)
• Options are automatically merged for you in the factory
• Can respond “live” to changes
Friday, February 8, 13
Start With The Defaults$(function($) { $.widget('my.filler', { options: { text: 'Hello World' }, _create: function() { ... this.element.html( this.option('text') ); }, _destroy: function() { ... } }); }(jQuery));
Friday, February 8, 13
Create Customized
• Pass the options when creating your widget
• No need to pass all.
var widget = $('div').filler({ text: 'Customization Is Cool'});
Friday, February 8, 13
Changing Options• A user can get or set options at runtime
• Use the public method option
var widget = $('div').filler({ text: 'Customization Is Cool'}); console.log( widget.filler('option', 'text') );widget.filler('option', 'text', 'Bye bye');console.log( widget.filler('option', 'text') );
Friday, February 8, 13
Changing Options• A user can get or set options at runtime
• Use the public method option
var widget = $('div').filler({ text: 'Customization Is Cool'}); console.log( widget.filler('option', 'text') );widget.filler('option', 'text', 'Bye bye');console.log( widget.filler('option', 'text') );
Widget Name Method Name
Friday, February 8, 13
Handling Changes
• A widget can detect option change and respond to them by implementing _setOption method
• Remember to call super
_setOption: function(key, val) { this._superApply(arguments); this.element.html( this.option('text') );},
Friday, February 8, 13
Other Public Methods
• Every method of your object which starts with a letter is public
• Call it from the outside using the widget
widget.filler('doSomething')
Friday, February 8, 13
jQuery UI Events• Use _trigger to
trigger a custom event
• Arguments:
• event name
• event object
• hash data
_create: function() { var self = this;
setTimeout(function() { self._trigger('done'); }, 2000);
},
Friday, February 8, 13
jQuery UI Events
• Can bind event handlers
• Better yet - pass callbacks as options
var widget = $('div').filler({ done: function() { console.log('Done !'); }});
Friday, February 8, 13
Extending Widgets
• Extend a widget by passing it as the second argument to widget function
$.widget('my.complex', $.my.simple, { // code goes here});
Friday, February 8, 13
Q & A
Friday, February 8, 13
Lab1
• Write a Progress Bar Widget
• Allow a user to change progress value
• Bonus: Use HTML Progress Element when supported
Friday, February 8, 13
Lab2
• Write a plugin to limit characters in an input field
• Should show how many chars left, and prevent going beyond the limit
Friday, February 8, 13
Selected PluginsjQuery UIOther jQuery Plugins
Friday, February 8, 13
jQuery UI Widgets
• Demo page + Documentation:http://jqueryui.com/demos/
Friday, February 8, 13
Equalize
http://tsvensen.github.com/equalize.js/
Friday, February 8, 13
Zoomoozhttp://janne.aukia.com/zoomooz/
Friday, February 8, 13
dd Slick
http://designwithpc.com/Plugins/ddSlick
Friday, February 8, 13
jQuery Complexityhttp://danpalmer.me/jquery-complexify/
Friday, February 8, 13
Credit Card Validator
http://paweldecowski.github.com/jQuery-CreditCardValidator/
Friday, February 8, 13
Filtering Content
http://luis-almeida.github.com/filtrify/
Friday, February 8, 13
Fresco
http://www.frescojs.com/
Friday, February 8, 13
Responsive Sliderhttp://responsive-slides.viljamis.com/
Friday, February 8, 13
Trunk8http://jrvis.com/trunk8/
Friday, February 8, 13
Tooltipsterhttp://calebjacob.com/tooltipster/
Friday, February 8, 13
Page Slide
http://srobbin.com/jquery-plugins/pageslide/
Friday, February 8, 13
Data Tableshttp://www.datatables.net/
Friday, February 8, 13
Masonryhttp://masonry.desandro.com/
Friday, February 8, 13
What Next
• Find more plugins at:http://plugins.jquery.com/
• Build your own plugins and components
Friday, February 8, 13
Thanks For Listening
• Ynon Perek
• Talk to me: [email protected]
• Find more slides:http://ynonperek.com
Friday, February 8, 13