jQuery UI in Action: Build 5 jQuery UI Projects
4.5 (32 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
466 students enrolled
Wishlisted Wishlist

Please confirm that you want to add jQuery UI in Action: Build 5 jQuery UI Projects to your Wishlist.

Add to Wishlist

jQuery UI in Action: Build 5 jQuery UI Projects

A 100% jQuery User Interface (jQuery UI) Hands-On Course!! jQuery UI Exercises, jQuery UI Quizzes & jQuery UI Projects
Best Seller
4.5 (32 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
466 students enrolled
Created by Crypters Infotech
Last updated 7/2017
English
Curiosity Sale
Current price: $10 Original price: $150 Discount: 93% off
30-Day Money-Back Guarantee
Includes:
  • 15.5 hours on-demand video
  • 11 Articles
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn jQuery UI from scratch
  • Understand jQuery UI interactions and widgets in detail
  • Enhance jQuery and jQuery UI knowledge
  • Develop real-world jQuery UI projects from scratch
  • Become a jQuery UI expert
View Curriculum
Requirements
  • Basic knowledge of HTML, CSS, JavaScript and jQuery would be helpful
Description

*** 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:

  1. Fruits Matching Game
  2. Password Strength Meter
  3. Video Speed Controller
  4. To Do List Application
  5. Train Enquiry System

So join this wonderful jQuery UI course and have a great time learning jQuery UI.

Who is the target audience?
  • People who want to learn jQuery UI from scratch
  • People who want to enhance their jQuery and jQuery UI knowledge
  • Developers who want to develop highly interactive applications easily
Students Who Viewed This Course Also Viewed
Curriculum For This Course
140 Lectures
15:34:29
+
Introduction to jQuery UI
3 Lectures 10:33

Have a look at different jQuery UI projects or applications you are going to develop as part of this course

Preview 04:23

Be ready with the required software before starting the course.

What Software You Need?
00:22

Understand what User Interface (UI) and jQuery UI are. Also learn different features of jQuery UI.

What is jQuery UI?
05:48
+
Set Up the Environment
4 Lectures 19:33

Always make sure that you work with the latest version of jQuery UI.

Update Regarding Latest Version
02:33

Learn how to set up the jQuery UI development environment by downloading the required files.

Download Required jQuery UI Files
07:25

Learn how to add references to the required jQuery and jQuery UI files correctly to start coding.

Add Offline Reference
05:03

Learn how to add reference to jQuery UI online.

Add Online Reference
04:32
+
Interaction 1: Draggable
10 Lectures 01:19:26

Learn how easy it is to make an element draggable.

Preview 08:25

Learn how to constrain the draggability using axis and containment options.

Restrict Draggability
08:39

Learn how to cancel the draggability using cancel and disabled options

Cancel Draggability on Specific Elements
06:16

Learn how to set the type, position and click-ability of cursor using type, position and handle options

Set Type, Position and Click-ability of Cursor
09:08

Learn to decide the number of pixels to move using grid option

How many Pixels to Move
03:29

Learn to make the element return to its original position and the duration of return using revert and revertDuration options

Return to the Original Position
04:43

Learn how to add a helper element using helper option

Add a Helper
06:54

Learn how to add magnetic effect to the draggable elements by configuring snapping with snap, snapMode and snapTolerance options

Add Magnetic Effect
09:01

You will learn how to use different methods including enable, disable, destroy and option.

Different Methods
15:48

Learn different events like create, start, drag and stop that get triggered at different stages of dragging.

Manage Events
07:03

Quiz: Draggable Interaction
5 questions
+
Interaction 2: Droppable
7 Lectures 41:32

Learn how to make target for draggable elements using droppables

Introduction to Droppable Interaction
03:59

Use accept and scope options to control which draggable elements should be accepted by the droppable element.

Decide which Draggable Elements to be Accepted by the Droppable
08:46

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.

Decide when an Element to be Considered as Dropped
05:01

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.

Decide which Nested Droppable Element to Accept Dropped Element
03:33

Manage the Look of Droppable Based On Draggable's Movement
07:43

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.

Decide whether to Revert or Not
04:41

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.

Manage Events
07:49

Quiz: Droppable Interaction
5 questions
+
Interaction 3: Resizable
9 Lectures 40:49

Learn how to make any element resizable

Introduction to Resizable Interaction
03:07

Use handles option to decide where you need to drag to resize the element.

Where to Drag to Resize the Element
06:44

Use alsoResize option to synchronously resize elements

Synchronous Resizing
02:22

Use minHeight, minWidth,maxHeight and maxWidth options to restrict the size and use the containment option to restrict the boundary.

Restrict Resizing
07:18

Use the option ghost to display a semi-transparent helper and the option helper to display a custom helper.

Add a Ghost/Helper
04:24

Use aspectRation option if you want resizing to happen maintaining an aspect ratio.

Maintain Aspect Ratio
03:54

You can animate resizing using animate, animateDuration and animateEasing options

Animate Resizing
05:46

Learn options like cancel, disabled, delay, distance and grid which was already discussed in previous sections

Miscellaneous Options (Options Already Discussed)
04:04

Learn different events like create, start, resize and stop that get triggered at different stages of resizing.

Manage Events
03:10

Quiz: Resizable Interaction
5 questions
+
Interaction 4: Selectable
3 Lectures 26:56

Learn how to make items selectable using Selectable interaction.

Introduction to Selectable Interaction
08:25

Use the options filter, cancel and disabled properly to filter selectables and non-selectables.

Filter Selectables and Non-Selectables
03:51

Learn different events including create, start, stop, selecting, selected, unselecting and unselected that get triggered at different stages of selection process.

Manage Events
14:40
+
Interaction 5: Sortable
5 Lectures 34:45

Learn how to make list of items sortable using Sortable interaction

Introduction to Sortable Interaction
03:09

Use placeholder to replace the white space and customise it the way you want.

Replace the White Space
02:26

Learn to use connectWith and dropOnEmpty options and implement a simple Fruits & Vegetables matching game.

Connect between Sortables
08:57

Learn to use items, cancel and disabled options to make some items sortable.

Make Some Items Sortable
04:59

Learn options like axis, containment, delay, distance, cursor, cursorAt, grid, handle, helper, opacity, tolerance and revert

Miscellaneous Options (Options Already Discussed)
15:14
+
Widget 1: Accordion
10 Lectures 40:46

Learn how to design an accordion easily using jQuery UI's Accordion widget.

Introduction to Accordion Widget
06:12

Use collapse option to collapse all panels

Allow to Collapse All Panels
01:41

Use active option to decide which panel to be displayed by default.

Decide which Panel to be Displayed by Default
03:19

Use the animate option to customize the animation

Customize the Animation
04:13

Use event option to decide to which event the header should react

When to Hide/Show Content Panels
02:36

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

Set the Height of the Content Panels
06:41

Use header option to set the header for the accordion

Set the Header for the Accordion
03:09

Use icons option to change the default icons for headers and active headers

Change the Default Icons in Accordion
03:46

Different events that get triggered in case of an accordion are create, beforeActivate and activate.

Manage Events
08:47

Exercise: Add New Panel to the Accordion
00:22
+
Widget 2: Tabs
6 Lectures 39:09
Introduction to Tabs Widget
05:16

You can even fetch external content and display in tabs

Display External Content
04:10

Use hide and show options to animate hiding and showing of panels

Animate Hiding and Showing of Panels
10:08

Learn how to use active, collapsible, event and heightStyle options.

Miscellaneous Options (Options Already Discussed)
05:46

Different events that get triggered in case of tabs widget are create, beforeActivate, activate, beforeLoad and load.

Manage Events
13:32

Exercise: Make the Selected Tab Active
00:17
+
Widget 3: Autocomplete
6 Lectures 37:19
Introduction to Autocomplete Widget
05:33


Set a Callback Function as the Source
08:59

Specify Minimum Length and Add Focus
02:47

Position the Suggestion List with respect to Input Element
08:29

Manage Events
06:58
11 More Sections
About the Instructor
Crypters Infotech
4.5 Average rating
456 Reviews
4,583 Students
8 Courses
Career Enhancement Training Solutions

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.