What is jQuery UI?Explain


jQuery UI  is a library which is built on top of JQuery library.  It can be called as one of the JavaScript plug-in that allows to create animations, sortables list, draggle list . This is developed as separate JavaScript File. This can be downloaded from http://ui.jquery.com/download (ui.jQuery.js).
jQuery UI  responsible for widgets,  components , themes , advanced effects , animation  and interaction mechanism that is UI related things.
Accordions, sliders, dialog boxes, date pickers, and more. All these are ready to be used right now.
jQuery UI  can be used to build highly interactive web applications.
You need to include latest jQuery , UI Core and Flora theme style sheet to work with jQuery UI.
In addition to the above source files you may need to refer each of the component files like ui.draggable.js, ui.resizable.js, ui.accordian.js etc .
or  you may will have to refer jquery.ui.all.js script that contains all component .js files . But do not refer all if you are not using . It is advised to refer only the required files. You can also build the custom download .js file by selecting the required widgets .
This is used for Resizing (resizable method is plugged in jQuery UI), Exploding or animations.
The following is an example code that uses  jQuery UI.
Refer the script files.
view sourceprint?
<link rel="stylesheet" href="themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="ui/ui.core.js"></script>
Refer the required Components
view sourceprint?
<script src="ui/ui.draggable.js"></script>
<script src="ui/ui.resizable.js"></script>
<script src="ui/ui.accordion.js"></script>
view sourceprint?
$(document).ready(function() {
  $("#dragme").draggable();
  $("#dragme-x").draggable({ axis: "x" });
  $("#accordionDemo").accordion({ event: "mouseover" });
  $("#dragme-resize").draggable().resizable();
})
jQuery UI future is hope to be expecting excited and positive.

0 comments:

Post a Comment