*** 15.5 hours of content***
***Quizzes, Exercises, Hands-On Practices and 5 Unique Projects are Included***
Do you want to develop highly interactive and rich applications easily? jQuery UI is a collection of widgets, interactions, effects and themes built on the top of jQuery library.
"jQuery UI in Action: Build 5 jQuery UI Projects" is a 100% hands-on jQuery UI course with lots of code activities, quizzes, exercises and projects. By completing this course, you will be confident enough to develop jQuery UI projects on your own from scratch.
In this course, you learn what jQuery UI is, how to setup the jQuery UI development environment and how to use different interactions, widgets and effects. Different interactions discussed in this course are draggable, droppable, resizable, selectable and sortable. You will also understand different widgets such as accordion, tabs, autocomplete, dialog, datepicker, progressbar, slider, menu, tooltip, spinner, button, checkboxradio, select menu and control group in detail.
The last section is the Let's Develop section where you will develop 5 jQuery UI projects from scratch. This will help you really boost your confidence in applying your jQuery UI knowledge to develop real-world jQuery UI projects. The projects developed as part of this course are:
So join this wonderful jQuery UI course and have a great time learning jQuery UI.
Have a look at different jQuery UI projects or applications you are going to develop as part of this course
Be ready with the required software before starting the course.
Understand what User Interface (UI) and jQuery UI are. Also learn different features of jQuery UI.
Always make sure that you work with the latest version of jQuery UI.
Learn how to set up the jQuery UI development environment by downloading the required files.
Learn how to add references to the required jQuery and jQuery UI files correctly to start coding.
Learn how to add reference to jQuery UI online.
Learn how easy it is to make an element draggable.
Learn how to constrain the draggability using axis and containment options.
Learn how to cancel the draggability using cancel and disabled options
Learn how to set the type, position and click-ability of cursor using type, position and handle options
Learn to decide the number of pixels to move using grid option
Learn to make the element return to its original position and the duration of return using revert and revertDuration options
Learn how to add a helper element using helper option
Learn how to add magnetic effect to the draggable elements by configuring snapping with snap, snapMode and snapTolerance options
You will learn how to use different methods including enable, disable, destroy and option.
Learn different events like create, start, drag and stop that get triggered at different stages of dragging.
Learn how to make target for draggable elements using droppables
Use accept and scope options to control which draggable elements should be accepted by the droppable element.
Use the tolerance option to decide when an element needs to be considered as dropped and the four values you can set for tolerance are intersect, touch, fit and pointer.
Use the greedy option to make sure that only the child droppable area (not its parent droppable area) accepts the dropped element if the element is dropped into the child droppable area.
Setting value to the revert option of draggable element, you can decide whether the dropped element should move back to its original position or not. The values are valid and invalid.
Learn different events like create, drop, over, out, activate and deactivate that get triggered at different stages of dropping an accepted draggable element into the droppable area.
Learn how to make any element resizable
Use handles option to decide where you need to drag to resize the element.
Use alsoResize option to synchronously resize elements
Use minHeight, minWidth,maxHeight and maxWidth options to restrict the size and use the containment option to restrict the boundary.
Use the option ghost to display a semi-transparent helper and the option helper to display a custom helper.
Use aspectRation option if you want resizing to happen maintaining an aspect ratio.
You can animate resizing using animate, animateDuration and animateEasing options
Learn options like cancel, disabled, delay, distance and grid which was already discussed in previous sections
Learn different events like create, start, resize and stop that get triggered at different stages of resizing.
Learn how to make items selectable using Selectable interaction.
Use the options filter, cancel and disabled properly to filter selectables and non-selectables.
Learn different events including create, start, stop, selecting, selected, unselecting and unselected that get triggered at different stages of selection process.
Learn how to make list of items sortable using Sortable interaction
Use placeholder to replace the white space and customise it the way you want.
Learn to use connectWith and dropOnEmpty options and implement a simple Fruits & Vegetables matching game.
Learn to use items, cancel and disabled options to make some items sortable.
Learn options like axis, containment, delay, distance, cursor, cursorAt, grid, handle, helper, opacity, tolerance and revert
Learn how to design an accordion easily using jQuery UI's Accordion widget.
Use collapse option to collapse all panels
Use active option to decide which panel to be displayed by default.
Use the animate option to customize the animation
Use event option to decide to which event the header should react
Use heightStyle option to set the height of the content panels. You can have any of the three values auto, fill or content for the heightStyle option
Use header option to set the header for the accordion
Use icons option to change the default icons for headers and active headers
Different events that get triggered in case of an accordion are create, beforeActivate and activate.
You can even fetch external content and display in tabs
Use hide and show options to animate hiding and showing of panels
Learn how to use active, collapsible, event and heightStyle options.
Different events that get triggered in case of tabs widget are create, beforeActivate, activate, beforeLoad and load.
Crypters Infotech is a division of Crypters Infosystems and Solutions Pvt. Ltd IT Company. We offer industry-oriented training that helps even fresh heads to become IT giants. Our professional team of trainers provide high quality training with an outlook towards future. We provide training mainly in web development and mobile app development.