Using a jQuery Plugin
Problem
You’ve made use of jQuery in all of your applications, but it doesn’t support some func‐
tionality you need, such as sliding an element in from the side of the web page, or
providing a color animation.
Solution
Use a jQuery UI plugin to provide the additional functionality. I’m
using the jQuery UI Toggle plugin to show and hide a block of text based on a button
clicked event. The effect I’m using is fold, which creates a nice paper fold effect as the
content is shown. I’m also starting with the block hidden with the style setting on the
element, with a value of display: none
Showing and hiding a block of text using a jQuery UI effect
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery fold demo</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<style>
#extra {
width: 600px;
height: 200px;
background-color: floralwhite;
padding: 10px;
margin-bottom: 20px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<div id="extra" style="display: none">Lorem ipsum dolor sit amet, consectetur ad
ipiscing elit. Integer in erat semper, condimentum erat nec, porttitor ipsum. Ma
uris id erat luctus, finibus quam a, luctus est. Morbi id metus magna. Sed inter
dum vel arcu sed accumsan. Etiam quis ultrices elit. Maecenas efficitur in orci a efficitur. Duis id elit commodo, malesuada lorem nec, aliquet lacus. Praesent
sit amet laoreet eros, eu pulvinar libero. Sed vel dolor ac orci congue vulputat
e. Donec pulvinar risus magna, non feugiat sem aliquet eget. Nullam viverra vive
rra nunc et rutrum. Sed sed tellus a lorem porta vestibulum vel ac lacus. Suspen
disse potenti. Curabitur ac tristique lorem, sed ullamcorper odio. Mauris at acc
umsan lacus. Pellentesque at faucibus neque, nec aliquet mauris.</div>
<button id="choice">Show additional info</button>
<script>
$("#choice").click(function() {
$( "#extra" ).toggle( "fold" , {horizFirst: true});
});
</script>
</body>
</html>
EXPLAIN
jQuery is a slim library providing core functionality that allows us to manipulate the
DOM simply and easily. To keep it slim, any additional functionality is added via plugins,
each of which are created to work within the jQuery infrastructure.
The jQuery UI is a set of plugins and is probably one of the better known jQuery ex‐
tensions. As the name implies, we can use it to create a nice variety of visual effects to
add some liveliness to the page—and without having to spend days coding the effect.
In the solution, the code links to a stylesheet, as well as two JavaScript libraries: the
primary jQuery library, and the jQuery UI. The stylesheet ensures that the effects meet
our expectations, as the jQuery UI plugins are all involved with appearance.
Why Not Just Use HTML5 and CSS3 for Managing Visual Effects?
Some of the functionality in jQuery and the plugins is now implemented declaratively
in HTML5 and CSS3. Declarative functionality is the ability to specify what we want,
and it just happens. Instead of having to code a transition, we declare it in CSS and trust
that the browser handles the transition properly.
The following CSS modifies the extra div element.
Now, when the
mouse cursor is over the element, it shrinks until disappearing completely. Move the
mouse cursor out, and it transitions back to its full size:
#message {
width: 600px;
height: 200px;
background-color: floralwhite;
padding: 10px;
margin-bottom: 20px;
-webkit-transition:width 2s, height 2s, background-color 2s,
-webkit-transform 2s;
transition:width 2s, height 2s, transform 2s;
}
#message:hover {
-webkit-transform:scaleundefined0);
transform:scaleundefined0);
}
The advantage to this approach is it works even if JavaScript is turned off. And the browser developers can optimize the transition effect—increasing both the efficiency and the overall appearance of the effect. It seems like a win-win. The limitation to using CSS3/HTML5 is trying to trigger the effect based on the button’s click event. In addition, you don’t have complete control over appearance or effect.
This is particularly true with HTML5 elements. If you’re using the new HTML5 input elements, such as date, the browser creates the appropriate container, but you’ll find that the container’s appearance can differ dra‐ matically from browser to browser. Firefox just provides a field, while Opera pops up a calendar picker when you click in the field.
The color input pops up the system color picker in Firefox and Chrome, but an odd drop-down color picker in Opera. If it’s important for appearance and behavior to be consistent across all agents and in all environments, depending on the declarative power of HTML5 and CSS3 is probably not going to be the best option.
They can be a useful addition, but not a complete replacement.
Plugin? Or Plug-in?
I use both “plug-in” and “plugin” in the book. The proper word usage is plug-in, hy‐
phenated, but as you’ll notice, many communities (e.g., the jQuery community) use
plugin without hyphenation. Eventually, I expect plugin without the hyphenation to
become the standard.
Ultimately, though, we all know what we’re talking about, so use whatever is comfortable
for you, or whatever maps to what the community uses.
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment