jQueryUI

Rumman Ansari   Software Engineer   2023-03-23   133 Share
☰ Table of Contents

Table of Content:

jQueryUI Introduction

jQueryUI is also a javascript library built on top of jQuery. It has a rich set of plugins for the developers to make a highly interactive website with less effort.

  • To include jQueryUI library in your page download the .js file and .css file from the jQueryUI website or use CDN links. The same procedure you followed for jQuery which you must be familiar by now.

  • Once you include the jQueryUI in your page, you have access to the big pool of plugins the jQueryUI offers.

  • You will be introduced to some basic plugins and their demos in next few cards.

Interaction using jQueryUI

  • Interaction is something that makes an activity fun, let it be a presentation or a website.

  • jQueryUI offers some built in plugins for interactions such as selectable, sortable, droppable, resizable and draggable.

  • Let us see the usage of some of these plugins in next few cards.

Widgets

Widgets can be defined as plugins with extended functionality. Some of the jQueryUI plugins are accordion, datepicker, progressbar, tabs etc.,

accordion()

  • This is to make a set of elements expandable and collapasible.

  • If you use this widget, all contents of the element will be hidden and only the heading will be visible.

  • Once the user clicks the heading, then the contents are made visible.

Syntax:


$.(selector).accordion()(parameters)

Parameters are key value pairs like active:"true", collapsible:"false" etc.,

Check out the Usage at Codepen.io

draggable() and resizable()

draggable()

If you want to make a element dragable in the page then use this plugin.

Syntax:


$.(selector).draggable(parameters)

Parameters are key value pairs that may or may not be added to a draggable element Eg: appendTo: "body", scroll: "false" etc.

Check out the usage at: Codepen.io

resizable()

Similarly to make an element resizable, this plugin is used.

Syntax:


$.(selector).resizable()(parameters)`

Parameters are key value paires such as: maxWidth:20px, maxHeight:50px, etc.

Check out the usage at: Codepen.io

Animation Effects - jQueryUI

jQueryUI offers few special animation plugins. Using these plugins, you can add visual effects to your page with less coding effort. Some jQueryUI effects are addClass(), switchClass(), removeClass(), easing(), etc.,

addClass()

This effect adds a class to an element and animates all the changes that the element undergoes.

Syntax:


$(selector).addClass( "className",parameter );

The parameters include, duration , callbackfunction, etc.

Similarly, you can use removeClass to remove any class and animate the changes.

Check out the Usage at: Codepen.io

Widgets - tabs()

  • This widget allows you to add tabs to your pages.

  • All the tab heading should be included within an <ol> or <ul> list.

  • Each tab "Heading" should be included in <li> and wrapped by <a> with an href attribute that points to content.

  • The content of tab can be any HTML element and the id should be associated with the <a> tag's href.

Syntax: $(selector).tabs();

Check out the Usage at: Codepen.io

Method - effect()

This method allows you to access a variety of custom effects such as bounce, scale, size, etc. that can be added to an element using selector.

Syntax:

$(selector).effect( effectName,options);

Options can be duration of animation, function that will execute after calling effect() etc.

Check the Usage at: Codepen.io

These effects can be combined with methods such as show, hide and toggle to get some custom effects.

Appart form this you can also create your own widget in jQueryUI and use them in you website. Follow this guide to create your own widget: jQuery - create widget

‹ Previous not possible this is first one.
‹ Next