2 Reasons you need to know jQueryUI

intro

Reason 1 : setters/getters

A few days ago I choose to build a project with jQueryUI. My goal was to increase my understanding of DOM manipulation and to demystify the setters and getters. Here is an example of how jQueryUI uses them to manipulate the DOM:

Here we can ‘Get’ all our nodes that have the ‘.inner’ class.

$(‘.inner’).draggable();

By passing in an object we can ‘set’ jqueryUI properties like so:

$(‘.inner’).draggable({
containment: ‘parent’,
cursor: ‘move’,
revert: true

});

We’ve now successfully grabbed our DOM node and given it specific properties that will enable us to create an interesting user experience. We can use or build on these when we use functions to handle what happens before, during, and after a user interacts with a website.

Reason 2 : Lifecycles

This may not be the correct terminology, but I found that jQueryUI’s lifecycles handled events very similar to React. For example:

getInitialState: function() { 
return {
nameWithQualifier: ‘Mr. ‘ + this.props.name};
},

React has a ‘getinitialstate’ life cycle that sets the base/starting point for a class/component.

start: function(event, ui) {
return jQuery.data($tmp, “isNew”, true);
},

jQuery handles the event with ‘start’. The similarity continues with Reacts ‘ondidupload’ and jQueryUI’s ‘end’ cycle that manages the end of an events life cycle.

In part 2 I’ll give code examples showing how we can toggle a switch off/on using both React and jQueryUI.

Show your support

Clapping shows how much you appreciated Rob Rosario’s story.