Getting Started with jQuery UI

JQuery UI enable our applications to have a cool user interface and animation in a faster way. It is the set of plug-ins that include interface interactions, effects, animations, widgets and themes built on the JavaScript Library. JQuery is used to create cohesive and consistent APIs. It is a method that we can use to extend jQuery prototype objects. By that prototype object you can enable all jQuery objects to inherit any method that you add.

Interactions:

We can use interactions for basic mouse-based behaviours to any element. Few examples of Interactions are the following:
  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

Draggable: We can use this method for dragging and dropping elements around horizontally, around vertically and around all others.

Example: We need to add jQuery UI plugin in scripts folder of our project. And then use both the .js and ui.js scripts in our head section.

My Scripts section

  1. <script src="Scripts/jquery-2.1.4.js"></script>
  2. <script src="Scripts/jquery-ui-1.11.4.js"></script>
  3. <script type="text/javascript">
  4. $(function() {
  5. $("#mydemo").draggable(); //Around all
  6. $("#x-axis").draggable({
  7. axis: "x"
  8. }) // move only arround x-axis
  9. $("#y-axis").draggable({
  10. axis: "y"
  11. }) // move only arround y-axis
  12. });
  13. </script>
CSS Section
  1. #mydemo {
  2. width: 100px;
  3. height: 100px;
  4. padding: 0px;
  5. background-color: red;
  6. margin-left: 50%;
  7. }

Body Section

  1. <form id="form1" runat="server">
  2. <div id="mydemo" class="ui-widget-content">
  3. <p style="color:white; margin:auto">Drag me around</p>
  4. </div>
  5. <div id="x-axis" style="width: 200px; margin-left:50%; height: 100px; padding:0px; background-color:lightblue" class="ui-widget-content">
  6. <p style="color:white; margin:auto">Drag me around x-axis only</p>
  7. </div>
  8. <div id="y-axis" style="width: 100px; height: 100px; margin-left:50%; padding:0px; background-color:lightgreen" class="ui-widget-content">
  9. <p style="color:white; margin:auto">Drag me around y-axis only</p>
  10. </div>
  11. </form>

Output

Figure : Image before dragging
Figure : Image after dragging
Droppable: In this method we have the need of two elements droppable, and target for draggable elements.

Example: You can use this function.

  1. $(function() {
  2. $("#draggableElement").draggable();
  3. $("#droppableElement").droppable({
  4. drop: function(event, ui) {
  5. $(this)
  6. .addClass("ui-state-highlight")
  7. .find("p")
  8. .html("Dropped!");
  9. }
  10. });
  11. });

Output

Figure: Droppable image before dropping
Figure: Dropable image after dropping

Resizable: In this we can resize our element accordingly.

Example

You can resize with the cursor; grab the right or bottom border and drag to the width or height. But your code cannot work without resizable.css file.

My CSS is below:

  1. <link href="Content/themes/base/all.css" rel="stylesheet" />
  2. <style>
  3. #resizable {
  4. width: 150px;
  5. height: 150px;
  6. padding: 0.5em;
  7. }
  9. #resizable h3 {
  10. text-align: center;
  11. margin: 0;
  12. }
  13. </style>

Script for resizable method

  1. <script src="Scripts/jquery-2.1.4.js"></script>
  2. <script src="Scripts/jquery-ui-1.11.4.js"></script>
  3. <script>
  4. $(function() {
  5. $("#resizable").resizable();
  6. });
  7. </script>

My Body

  1. <div id="resizable" class="ui-widget-content">
  2. <h3 class="ui-widget-header">Resize accordingly</h3>
  3. </div>

Output

Figure: Image before resizing

Figure: image after resizable

Selectable

By this method you can select single element from a list or multiple elements from the list by pressing ctrl key.

Example: In this example you can select single or multiple elements.

My CSS and Scripts

  1. <link href="Content/themes/base/all.css" rel="stylesheet" />
  2. <style>
  3. #resizable {
  4. width: 150px;
  5. height: 150px;
  6. padding: 0.5em;
  7. }
  9. #resizable h3 {
  10. text-align: center;
  11. margin: 0;
  12. }
  13. </style>
  15. <script src="Scripts/jquery-2.1.4.js"></script>
  16. <script src="Scripts/jquery-ui-1.11.4.js"></script>
  17. <script>
  18. $(function() {
  19. $("#resizable").resizable();
  20. });
  21. </script>

Output


Figure: Image before selection

Figure: Image after selection

Sortable

By using this method you can select any element from the list and replace it to other one, means you can sort your list accordingly.

Example: You can click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

You can use this function for sorting

  1. $(function() {
  2. $("#selectableElement").sortable();
  3. $("#selectableElement").disableSelection();
  4. });

Output

Figure: Image before sorting the elements

Figure: Image after sorting the elements

Summary

Thanks for reading. I hope this article provided you the effective understanding of jQuery UI Plugin and there use. You can learn about jQuery UI Widgets, Effect Control, and Utilities Control by reading my next article.