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
- <script src="Scripts/jquery-2.1.4.js"></script>
- <script src="Scripts/jquery-ui-1.11.4.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#mydemo").draggable();
- $("#x-axis").draggable({
- axis: "x"
- })
- $("#y-axis").draggable({
- axis: "y"
- })
- });
- </script>
CSS Section
- #mydemo {
- width: 100px;
- height: 100px;
- padding: 0px;
- background-color: red;
- margin-left: 50%;
- }
Body Section
- <form id="form1" runat="server">
- <div id="mydemo" class="ui-widget-content">
- <p style="color:white; margin:auto">Drag me around</p>
- </div>
- <div id="x-axis" style="width: 200px; margin-left:50%; height: 100px; padding:0px; background-color:lightblue" class="ui-widget-content">
- <p style="color:white; margin:auto">Drag me around x-axis only</p>
- </div>
- <div id="y-axis" style="width: 100px; height: 100px; margin-left:50%; padding:0px; background-color:lightgreen" class="ui-widget-content">
- <p style="color:white; margin:auto">Drag me around y-axis only</p>
- </div>
- </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.
- $(function() {
- $("#draggableElement").draggable();
- $("#droppableElement").droppable({
- drop: function(event, ui) {
- $(this)
- .addClass("ui-state-highlight")
- .find("p")
- .html("Dropped!");
- }
- });
- });
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:
- <link href="Content/themes/base/all.css" rel="stylesheet" />
- <style>
- #resizable {
- width: 150px;
- height: 150px;
- padding: 0.5em;
- }
-
- #resizable h3 {
- text-align: center;
- margin: 0;
- }
- </style>
Script for resizable method
- <script src="Scripts/jquery-2.1.4.js"></script>
- <script src="Scripts/jquery-ui-1.11.4.js"></script>
- <script>
- $(function() {
- $("#resizable").resizable();
- });
- </script>
My Body
- <div id="resizable" class="ui-widget-content">
- <h3 class="ui-widget-header">Resize accordingly</h3>
- </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
- <link href="Content/themes/base/all.css" rel="stylesheet" />
- <style>
- #resizable {
- width: 150px;
- height: 150px;
- padding: 0.5em;
- }
-
- #resizable h3 {
- text-align: center;
- margin: 0;
- }
- </style>
-
- <script src="Scripts/jquery-2.1.4.js"></script>
- <script src="Scripts/jquery-ui-1.11.4.js"></script>
- <script>
- $(function() {
- $("#resizable").resizable();
- });
- </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
- $(function() {
- $("#selectableElement").sortable();
- $("#selectableElement").disableSelection();
- });
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.