Writing Reusable Web Components with jQuery and jQuery UI

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


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/


http://paweldecowski.github.com/jQuery-CreditCardValidator/




http://anthonyterrien.com/knob/

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 jQuery Objects

• Can take options

• Launch and Forget

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

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

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


• 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

• Protect the $ with a self invoking function

// Outside $ may be another library (function($) { // But inside it's jQuery }(jQuery));


Writing A Plugin

• Extend jQuery with your plugin name

• Plugin is just a function

(function($) { $.fn.outliner = function() { }; }(jQuery));


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


Writing A Plugin

• end with return this to allow chaining

(function($) { $.fn.outliner = function() { this.css('outline', '2px solid blue'); return this; }; }(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 different color

• Some users like different width

$('div').outliner({ color: 'red', width: 2});


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 ManipulatingPlugins


Simple Autocomplete

• Let’s write a simple autocomplete plugin


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


Autocomplete Takeaways

• A plugin can use accompanying CSS file

• 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 UIExtensible UI Library Build On Top of jQuery


What’s In The Box

• UI Framework

• UI Components

• Themes Framework


jQuery UI Core

WidgetsFactory

Autocomplete Widget

Tabs Widget

Gallery Widget

Enhanced jQuery Plugin


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

// use the widget like a pluginvar 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($) { $.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');


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($) { $.widget('my.filler', { options: { text: 'Hello World' }, _create: function() { ... this.element.html( this.option('text') ); }, _destroy: function() { ... } }); }(jQuery));


Create Customized

• Pass the options when creating your widget

• No need to pass all.

var widget = $('div').filler({ text: 'Customization Is Cool'});


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


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


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') );},


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


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

},


jQuery UI Events

• Can bind event handlers

• Better yet - pass callbacks as options

var widget = $('div').filler({ done: function() { console.log('Done !'); }});


Extending Widgets

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

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


Q & A


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 field

• Should show how many chars left, and prevent going beyond the limit


Selected PluginsjQuery UIOther jQuery Plugins


jQuery UI Widgets

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


http://jqueryui.com/demos/

http://jqueryui.com/demos/

Equalize

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




Gridster

http://gridster.net/




Zoomoozhttp://janne.aukia.com/zoomooz/


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

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

dd Slick

http://designwithpc.com/Plugins/ddSlick


http://designwithpc.com/Plugins/ddSlick#demo

http://designwithpc.com/Plugins/ddSlick#demo

jQuery Complexityhttp://danpalmer.me/jquery-complexify/


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

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

Credit Card Validator







Filtering Content

http://luis-almeida.github.com/filtrify/




Fresco

http://www.frescojs.com/


http://www.frescojs.com

http://www.frescojs.com

Responsive Sliderhttp://responsive-slides.viljamis.com/


http://responsive-slides.viljamis.com

http://responsive-slides.viljamis.com

Trunk8http://jrvis.com/trunk8/


http://jrvis.com/trunk8/

http://jrvis.com/trunk8/

Tooltipsterhttp://calebjacob.com/tooltipster/


http://calebjacob.com/tooltipster/

http://calebjacob.com/tooltipster/

Page Slide

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




Data Tableshttp://www.datatables.net/




Masonryhttp://masonry.desandro.com/


http://masonry.desandro.com/

http://masonry.desandro.com/

What Next

• Find more plugins at:http://plugins.jquery.com/

• Build your own plugins and components


http://plugins.jquery.com/

http://plugins.jquery.com/

Thanks For Listening

• Ynon Perek

• Talk to me: [email protected]

• Find more slides:http://ynonperek.com


mailto:[email protected]

mailto:[email protected]



Writing Reusable Web Components with jQuery and jQuery UI

Technology

Transcript of Writing Reusable Web Components with jQuery and jQuery UI