jQuery Plugins
Introduction
In this eHandout, I will introduce you to several jQuery "plugins" which appear to be very useful.
A "plugin" is JavaScript and jQuery code that is packaged for easy use, and which makes a certain task easier than using even plain jQuery code.
jCanvas
jCanvas brings jQuery's powerful syntax and capability to the HTML5 canvas. Quickly create canvas-based apps that can utilize layers, animations, events, and much more. jCanvas works on all modern browsers and platforms, including iOS and Android.
jCanvas was written by Caleb Evans.
You can download jCanvas at the jQuery.com site, here.
I suggest that you use the fourth green button, "jCanvas (cdnjs)", so you don't need to actually download the plugin. This cdnjs version is just like jQuery itself, hosted on a CDN server.
I further suggest that on the jcanvas cdnjs page, you highlight and copy the fifth version of the URL, which looks like this:
https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.3/jcanvas.js
You will, of course, need to add a <script> tag to the <head> section of your page, like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.3/jcanvas.js"></script>
The homepage of the jCanvas plugin site is here .
A good documentation page for jCanvas is here.
Following is an example page which shows how to use the <canvas> tag with standard JavaScript code, and also with the jCanvas plugin. This is page jCanvasExample.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Samples2.css">
<title>jQuery with HTML and CSS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.3/jcanvas.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Draw a standard JavaScript rectangle:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
// Draw a jCanvas ellipse:
$('canvas').drawEllipse(
{
strokeStyle: '#36c',
strokeWidth: 4,
x: 150, y: 100,
width: 200, height: 100
});
// Draw a jCanvas line with several segments:
$('canvas').drawLine({
strokeStyle: '#000',
strokeWidth: 10,
rounded: true,
x1: 80, y1: 50,
x2: 100, y2: 150,
x3: 200, y3: 100,
x4: 150, y4: 200
});
// Draw a jCanvas pentagon:
$('canvas').drawPolygon(
{
fillStyle: '#589',
strokeStyle: '#000',
x: 220, y: 200,
radius: 50,
sides: 5,
rotate: 25
});
// Draw some jCanvas text:
$('canvas').drawText(
{
fillStyle: '#cfc',
strokeStyle: '#000',
strokeWidth: 2,
x: 20, y: 200,
fontSize: '50pt',
fontFamily: 'Arial',
text: 'Hello',
// Measure (x, y) from the text's top-left corner
fromCenter: false,
// Rotate the text by 30 degrees
rotate: 30
});
});
</script>
<style type="text/css">
body { font-family: Arial,sans-serif; }
#mainDiv { width: 400px; margin: 0 auto; }
</style>
</head>
<body onload="writeTime();">
<div id="mainDiv">
<h3>An HTML Canvas with jCanvas</h3>
<canvas width="300" height="300" id="myCanvas"></canvas>
</div>
</body>
</html>
autoNumeric — Currency formatting made easy
autoNumeric is a jQuery plugin that automatically formats currency (money) and numbers as you type on form inputs. It supports most International numeric formats and currency signs including those used in Europe, North and South America, Afirica, Asia and India (lakhs**).
autoNumeric was written by Robert (Bob) Knothe.
You can download autoNumeric at the jQuery.com site, here.
The "Download now" button will download a ZIP file of the plugin to your computer.
Unzip the downloaded ZIP file.
Copy the autoNumeric.js file to the directory where your HTML pages are.
Add a jQuery source/include <script> tag to the <head> section of the HTML page.
Also add a source/include <script> tag for the autoNumeric.js file that you copied to your
page's directory, like this:
<script src="autoNumeric.js"></script>
The homepage and documentation page of the autoNumeric plugin site is here.
Following is an example page which shows how to use the autoNumeric plugin. This is page autoNumericExample.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Samples2.css">
<title>autoNumeric Plugin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="autoNumeric.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#Price').autoNumeric('init', {aSign:'$', pSign:'p'});
});
</script>
<style type="text/css">
body { font-family: Arial,sans-serif; }
#mainDiv { width: 400px; margin: 0 auto; }
</style>
</head>
<body onload="writeTime();">
<div id="mainDiv">
<h3>An HTML form with autoNumeric</h3>
<form method="post" action="">
Price:
<input type="text" name="Price" id="Price" autofocus>
</form>
</div>
</body>
</html>
imagesLoaded
JavaScript is all like "You images done yet or what?" imagesLoaded detects when images have been loaded.
imagesLoaded was written by David DeSandro.
You can download imagesLoaded at the jQuery.com site, here.
- Click the "Download now" button.
- Click the "Install" link at the top right.
- I suggest using one of the "CDN" libraries. Copy one of the two <script> tags and paste it into the <head> section of your HTML page.
A good documentation page for imagesLoaded properties is here.
Following is an example page which shows how to use the imageLoaded plugin. This is page imagesLoadedExample.html:
Please note that this example page uses a jQuery Deferred object. This deferred object allows us to use a series of "chained" result methods such as .always, .done, .fail, and .progress.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>imagesLoaded Plugin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#imageContainer').imagesLoaded()
.always( function( instance ) {
$('#resultsDiv').append('<br>All images loaded');
})
.done( function( instance ) {
$('#resultsDiv').append('<br>All images successfully loaded');
})
.fail( function() {
$('#resultsDiv').append('<br>All images loaded, at least one is broken');
})
.progress( function( instance, image ) {
var result = image.isLoaded ? '<span class="loaded">loaded</span>' : '<span class="broken">broken</span>';
$('#resultsDiv').append('<br>Image is ' + result + ' for ' + image.img.src );
});
});
</script>
<style type="text/css">
body { font-family: Arial,sans-serif; }
#mainDiv { width: 1020px; margin: 0 auto; }
#resultsDiv {margin-top: 1em;}
.loaded { color: #0A0; }
.broken { color: #F00; }
</style>
</head>
<body>
<div id="mainDiv">
<h3>An HTML page with imagesLoaded</h3>
<div id="imageContainer">
<img src="images/Shuttle0.jpg">
<img src="images/Shuttle1.jpg">
<img src="images/Shuttle2.jpg">
<img src="images/Shuttle3.jpg">
<img src="images/Shuttlex.jpg">
<img src="images/Shuttle4.jpg">
<img src="images/Shuttle5.jpg">
<img src="images/Shuttle6.jpg">
</div>
<div id="resultsDiv"></div>
</div>
</body>
</html>
UI Bounce Effect
UI Bounce Effect bounces an element horizontally or vertically n times.
UI Bounce Effect was written by the jQuery Foundation and other contributors.
You can download UI Bounce Effect at the jQuery.com site, here.
This plugin uses the jQuery UI site for its downloads.
- Click the "Components", "Toggle All" checkbox to clear all of the default selections.
- In the last section, "Effects", check the "Bounce Effect" checkbox.
- Click the "Download" button.
- Unpack/Extract the ZIP file that is downloaded.
- Copy the files jquery-ui.js and jquery-ui.css to your site's local directory.
- Include these two files into your HTML page, in the <head> section.
- <script src="jquery-ui.js"></script>
- <link rel="stylesheet" type="text/css" href="jquery-ui.css">
A good documentation page for UI Bounce Effect is here.
Following is an example page which shows how to use the UIBounce plugin. This is page UIBounceExample .html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>UIBounce Plugin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('button').click(function()
{
$('h1').toggle("bounce", {times: 5, distance: 40}, "slow");
});
});
</script>
<style type="text/css">
body { font-family: Arial,sans-serif; }
#mainDiv { width: 1020px; margin: 0 auto; }
#resultsDiv {margin-top: 1em;}
.loaded { color: #0A0; }
.broken { color: #F00; }
</style>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="mainDiv">
<h3>An HTML page with UIBounce</h3>
<button>Click to Toggle the Bounce Effect</button>
<h1>Watch This Area</h1>
</div>
</body>
</html>