Writing Reusable Web Components with jQuery and jQuery UI

Reusable Web
Components
with 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


Resources

• Microsoft’s Project Silk:

http://msdn.microsoft.com/en-us/
library/hh396380.aspx


Reusable Component

• Markup + Style + JavaScript
• All are optional


Why Reuse

• Use same code
within the same
project

• Use same code
within different
projects


The Hows

• Roll Your Own

• Extend Existing
Framework


jQuery Plugins


jQuery Plugin

• Reusable JS Code
• Uses jQuery


Example Plugins
• http://paweldecowski.github.com/
jQuery-CreditCardValidator/
• http://anthonyterrien.com/knob/
• http://www.datatables.net/
• http://stevenbenner.github.com/
jquery-powertip/


Common Concepts

$('#example').dataTable();

$(".dial").knob();

$('.info').powerTip({
placement: 'ne'
});


Common Concepts

• Plugins add
functionality to $('#example').dataTable();

jQuery Objects $(".dial").knob();

$('.info').powerTip({
• Can take options placement: 'ne'
});

• Launch and Forget


• jQuery plugins are just organized
reusable code


Let’s Write A Plugin


Outliner Plugin

• Our plugin will add outline to an
element


Writing A Plugin

// Outside $ may be another library

(function($) {
• Protect the $ with a
self invoking
// But inside it's jQuery
function
}(jQuery));


Writing A Plugin

(function($) {
• Extend jQuery with
your plugin name $.fn.outliner = function() {

};
• Plugin is just a

function }(jQuery));


Writing A Plugin

• Do you thing
(function($) {

• this is the $.fn.outliner = function() {
this.css('outline', '2px solid blue');
jQuery object };

you’re
working on }(jQuery));


Writing A Plugin

(function($) {

• end with $.fn.outliner = function() {
return this this.css('outline', '2px solid blue');
return this;
to allow };

chaining
}(jQuery));


Using The Plugin

• Here’s how a user may add outline

$('div').outliner();


Using The Plugin
• Here’s how a user may add outline
• Or with chaining

$('div').outliner().html('Cool Plugin');


Adding Options

• Some users like
different color

• Some users like
different width


Adding Options

• Some users like
$('div').outliner({
different color
color: 'red',
width: 2
• Some users like
});
different width


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));


Basic Plugin Review

• Protect The $
• Add Your Plugin To $.fn
• Return this
• Add options and defaults


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


Q&A


DOM
Manipulating
Plugins


Simple Autocomplete

• Let’s write a simple
autocomplete
plugin


Solution Outline

var list_el = $('<ul
class="autocomplete"></ul>');

• Create The New list_el.on('click', 'li',
List Element function(ev) {
// type code here
});
• Bind Event
self.on('input', function(ev) {
Handlers // type code here
});


Autocomplete Takeaways

• A plugin can use accompanying CSS
ﬁle
• A plugin can “bind” event handlers
• Can maintain state using closures


Plugin Limitations

• Hard to maintain state
• Hard to destroy
• Hard to extend


Meet
jQuery UI
Extensible UI Library Build
On Top of jQuery


What’s In The Box

• UI Framework
• UI Components
• Themes Framework


jQuery UI Core

Autocomplete
Widget

Tabs Widgets Enhanced
Widget Factory jQuery Plugin

Gallery
Widget


Our First Widget
$(function($) {
$.widget('my.filler', {
_create: function() {
this.element.html('Hello World');
}
});
}(jQuery));

// use the widget like a plugin
var widget = $('div').filler();


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


Widget Lifecycle

• _create is called on creation
• _init is the default method
• _destroy terminates the widget


Fixing Our First Widget
$(function($) {

this.data = { previousContent: this.element.html() }
this.element.html('Hello World');
},
_destroy: function() {
this.element.html( this.data.previousContent );
}
});
}(jQuery));

// later in code
widget.filler('destroy');


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


Start With The Defaults
$(function($) {

options: {
text: 'Hello World'
},

...
this.element.html( this.option('text') );
},

_destroy: function() { ... }
});

}(jQuery));


Create Customized

• Pass the options
when creating your var widget = $('div').filler({
text: 'Customization Is Cool'
widget });

• No need to pass all.


Changing Options
• A user can get or set options at runtime
• Use the public method option

var widget = $('div').filler({
});

console.log( widget.filler('option', 'text') );
widget.filler('option', 'text', 'Bye bye');


Changing Options
• A user can get or set options at runtime
• Use the public method option

});

widget.filler('option', 'text', 'Bye bye');

Widget Name Method Name

Handling Changes

• A widget can detect
option change and
_setOption: function(key, val) {
respond to them by this._superApply(arguments);

implementing this.element.html(
_setOption method this.option('text') );
},

• Remember to call
super


Other Public Methods
• Every method of
your object
which starts
with a letter is
public widget.filler('doSomething')

• Call it from the
outside using
the widget


jQuery UI Events
• Use _trigger to
trigger a custom
event _create: function() {
var self = this;
• Arguments: setTimeout(function() {
self._trigger('done');
• event name }, 2000);

},
• event object

• hash data


jQuery UI Events

• Can bind event
handlers done: function() {
console.log('Done !');
}
• Better yet - pass });
callbacks as options


Extending Widgets
• Extend a widget by passing it as the
second argument to widget function

$.widget('my.complex', $.my.simple, {
// code goes here
});


Lab1

• Write a Progress Bar Widget
• Allow a user to change progress value
• Bonus: Use HTML Progress Element
when supported


Lab2

• Write a plugin to limit characters in an
input ﬁeld
• Should show how many chars left, and
prevent going beyond the limit


Selected
Plugins
jQuery UI
Other jQuery Plugins


jQuery UI Widgets

• Demo page + Documentation:
http://jqueryui.com/demos/


Equalize
http://tsvensen.github.com/equalize.js/


Gridster
http://gridster.net/


Zoomooz
http://janne.aukia.com/zoomooz/


dd Slick
http://designwithpc.com/Plugins/ddSlick


jQuery Complexity
http://danpalmer.me/jquery-complexify/


Credit Card Validator
http://paweldecowski.github.com/jQuery-
CreditCardValidator/


Filtering Content
http://luis-almeida.github.com/ﬁltrify/


Fresco
http://www.frescojs.com/


Responsive Slider
http://responsive-slides.viljamis.com/


Trunk8
http://jrvis.com/trunk8/


Tooltipster
http://calebjacob.com/tooltipster/


Page Slide
http://srobbin.com/jquery-plugins/pageslide/


Data Tables
http://www.datatables.net/


Masonry
http://masonry.desandro.com/


What Next

• Find more plugins at:
http://plugins.jquery.com/
• Build your own plugins and
components


Thanks For Listening

• Ynon Perek
• Talk to me: ynon@ynonperek.com
• Find more slides:
http://ynonperek.com


Writing Reusable Web Components with jQuery and jQuery UI

More Related Content

What's hot

Viewers also liked

Similar to Writing Reusable Web Components with jQuery and jQuery UI

More from Ynon Perek

Recently uploaded

Writing Reusable Web Components with jQuery and jQuery UI