Date post: | 28-Nov-2014 |
Category: |
Technology |
Upload: | ynon-perek |
View: | 8,615 times |
Download: | 0 times |
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