This chapter demonstrates about the jQuery UI Tutorial which is nothing but a set of plugins for jQuery and which adds some functionalities to the jQuery Library and following are the concepts covered in this chapter.
jQuery UI Introduction
jQuery Features
jQuery UI Introduction
Description
jQueryUI stands for jQuery interface. Which is a set of animated visual effects, graphical user interface widgets, and themes are implemented with jQuery, CSS, HTML, and JavaScript? These new plug-ins add plenty of recent functionalities within the jQuery core library. jQuery UI is used to increase the jQuery library by providing an expensive set of interactive widgets and ways to reinforce web pages and applications.
It is a very common and powerful mobile initial front-end framework used for quicker and easier net development. according to a survey, it's used on over 176000 websites, creating it the second most well-liked JavaScript library on the web.
Good for extremely interactive web applications
Open supply and unengaged to use
jQuery have Powerful theme mechanism.
jQuery is maintenance friendly and stable.
jQuery have browser support extensively.
Examples
In jQuery user will get several examples according to the topic here is a simple example of jQuery i.e jQuery draggable as shown below.
[html]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; background:#ADFF2F;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>I am draggable!</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The user can Hold and drag the box is as shown in below image.
jQuery Features
Description
jQuery UI is employed to increase the jQuery library by providing an expensive set of interactive widgets and strategies to reinforce web pages and applications following are some features os jQuery as shown below.
jQueryUI facilitates you to form extremely interactive web applications.
jQuery is open source and liberal to use.
jQuery provides a strong theme mechanism.
jQuery is maintenance and friendly terribly stable.
jQuery provides an in-depth browser support and Good documentation.
Getting jQuery UI
Getting jQuery UI is nothing, however, a group of plugins for jQuery, Which adds new capabilities and functionalities to the core jQuery Library. A user can get the jQuery Library from the official page of jQuery in which user can get the latest version of the jQuery which is shown in below image.
The user can also create a custom download of jQuery UI Library and tack together them per project necessities.
History of jQuery
jQuery is an open source software which is free and released in the year of 2007 September. Which is distributed by the jQuery foundation under MIT license? After that, there have been several versions released with additional functionalities.
Summary
Key Points
jQueryUI stands for jQuery interface.
jQuery UI is nothing, however, a group of plugins for jQuery.