Writing Reusable Web Components with jQuery and jQuery UI

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

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

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

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

• Write a Progress Bar Widget

• Allow a user to change progress value

• Bonus: Use HTML Progress Element when supported

• 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/

Equalize

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

Gridster

http://gridster.net/

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

dd Slick

http://designwithpc.com/Plugins/ddSlick

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

Credit Card Validator

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

Filtering Content

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

Fresco

http://www.frescojs.com/

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

Trunk8http://jrvis.com/trunk8/

Tooltipsterhttp://calebjacob.com/tooltipster/

Page Slide

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

Data Tableshttp://www.datatables.net/

Masonryhttp://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

Technology