Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

jQuery UI Ultimate:Design Amazing Interface Using jQuery UI

Learn to design attractive user interface using jQuery (jQuery UI) and be a professional interface designer from scratch

Created byKunal Asudani

Last updated 11/2019

English

English [Auto],

What you'll learn

Go from a total beginner to an advanced interface designer using jQuery UI.
Get the deep knowledge of the features of jQuery UI.
Hands on to the Interactions with practical coding examples : drag , drop , resize , select and many more
Understand in-depth working of widgets (accordions , sliders , datepicker etc.. ) with different sets of practical example .
Complete Hands on to the effects (hide , show , toggle , animation , class etc..) with practical examples.
Understanding the use of utilities and positioning of different elements professionally in an interface.
Using different options and actions for interactions , widgets and effects with description and programming codes.
Get friendly support on any problem in less than 12 hours.
A certificate of completion at the end.

Course content

17 sections • 69 lectures • 12h 34m total length

Understanding the curriculum.6:59
Explore jQuery UI fundamentals by implementing sortable, accordion, autocomplete, date picker, buttons, menus, progress bar, select menu, spinner, and tabs, with placeholder and effect animations.
inIntroduction to instructor.1:01
Meet the instructor, highlighting eight years in design and development, three years in Android, and two years of user-interface training, with Bootstrap and C and C++ expertise.
Installation of jQuery UI.3:24
Install jQuery UI on your system using free tools like Notepad++ or Dreamweaver, then include CDN libraries and apply icon classes to enable the library's predefined icons.
Conceptual understanding of User Interface2:22
Define the user interface as the visual part of a computer application that enables commands and displays information, and explore command line, menus, and graphical user interfaces with icons.
Introduction to jQuery UI.2:03
Explore jQuery UI, a free, open source JavaScript library that provides a mobile-first framework with animated effects, widgets, and themes, powering the second most popular JavaScript library on the web.
Understanding the features of jQuery UI.2:40
Explore jQuery UI features to build interactive interfaces with draggable, resizable, selectable, and sortable interactions, using widgets like dialog, tabs, and spinner, supported by open source and browser support.

Discussion on draggable options with default functionality.12:40
Learn to make elements draggable with jQuery UI, using the draggable options to control behavior (disabled, distance, delay) or apply actions with $(selector).draggable.
Understanding options - Part 114:30
Learn to configure draggable elements in jQuery UI using disable, distance, and delay options, including how distance affects drag range and delay controls start time.
Using HELPER option in draggable.6:51
Learn how the helper option in draggable clones elements to move a duplicate of content, enabling practical cloning and dragging with jQuery UI.
Understanding the position of cursor in draggable.10:56
Learn to identify the current option in a draggable jQuery UI interface, bind events to capture the option value, and display it in a validation popup.
Discussion on actions used in draggable.12:40
Explore how actions in draggable differ from options, and learn to use destroy, disable, and enable to control movement and state of draggable elements.

Discussion on droppable options with default functionality.14:51
Explore jQuery UI droppable options and default functionality by learning two methods: option method and actions with parameters to enable drag and drop into targets, with scope and class controls.
Understanding options for droppable - Part 119:31
Discover how to use jQuery UI droppable with three key options, including tolerance and disabled, to create intuitive drag-and-drop interfaces with draggable and droppable elements.
Understanding options for droppable - Part 217:39
Understand how to use droppable options in jQuery UI, including accept and scope, to control drop targets, handle drop events, and visually highlight valid drops.
Understanding the concept of classes in droppable.12:21
Learn to create droppable areas with jQuery UI by applying draggable elements and using active and drop classes, configuring drop targets, and displaying a drop message on successful drop.
Discussion on droppable actions with the disable functionality.16:05
Explore the second method of jQuery UI droppable: use disable to prevent dropping and destroy to remove the functionality, and learn applying these actions via class and id patterns.
Understanding events in droppable method.11:59
Explore the jQuery UI droppable events, including activate, drop, and out, with a hands-on example that shows dragging, dropping, and updating messages.

Introduction to the resizable with default functionality.13:26
Learn how to use the jQuery UI resizable feature with options like ghost helper, distance, delay, and auto-hide, and see a live example of drag-to-resize elements.
Using advance options of resizable - Part 1.10:45
Explore the animate and ghost options in jQuery UI resizable, creating animated resizing and a semitransparent ghost preview. Implement resize1 and resize2 to observe both effects.
Understanding options for resizable - Part 213:11
Configure jQuery UI resizable with distance, delay, and autoHide options in a practical example using 500 ms delay and 30 px distance.
Understanding options for resizable - Part 310:03
Master the resizable option in jquery UI, including the alsoResize feature. Learn how to apply it to two elements so resizing one updates the other.
Discussion on actions used in resizable with functionality.9:13
Explore resizable actions in jQuery UI, including disable, enable, and destroy, and learn how to apply them via the resizable second method to control element resizing.

Introduction to selectables with default functionality.14:55
Discover how the jQuery UI selectable method allows dragging a selection box or using a button to select items individually or in groups, with configurable options.
Using options of selectables Part-116:10
Learn to configure the jQuery UI selectable widget with delay in milliseconds and a distance of 100 pixels to start selections and prevent unwanted selections.
Understanding different actions in selectables.15:04
Learn how the jQuery UI selectable action controls element selectability. Apply enable, disable, or destroy to manage selectable functionality via string actions.
Working with the index in selectables.17:12
Explore using the selected event with jQuery UI selectable to track index values, IDs, and classes. Update the UI to display and style chosen items as they are selected.

Introduction to sortables with default functionality.16:24
Explore jQuery UI sortable with default functionality to reorder lists and grids by dragging items, using options such as axis, cancel, scroll, placeholder, and revert.
Using options in sortables Part-1.11:46
Learn how to use the delay and distance options in sortable to control drag interactions, with a practical example using a 200 ms delay and a 100-pixel distance.
Understanding options in sortables Part-2.10:47
Explore how to implement the placeholder option in jQuery UI sortable lists, including highlighting and dynamic placeholder behavior with delay and distance considerations.
Using advance options in sortable Part-3.15:50
Explore advanced sortable options in jQuery UI by connecting lists and dropping items across teams, enabling interactive drag-and-drop between connected lists.
Introduction to the actions used in sortables.15:49
Master actions in sortable with jQuery UI, learning to cancel, destroy, disable, and enable operations, and read and serialize the sorted order to control interfaces.
Use of events in sortable method.19:31
Explore how to use events in the sortable method to track start, stop, receive, update, change, and create events, and learn to connect two sortable lists for interactive interfaces.

Introduction to accordion with default functionality.12:16
Explore how to implement accordion components in jQuery UI, including collapsible behavior, animation options, and content panels, shown through a hands-on FAQ style example.
Understanding different actions used in accordion.18:00
Learn how to perform actions on accordions, such as destroy, enable, disable, and set options by option name values, using the accordion interface.

Introduction to autocomplete with default functionality.11:33
Learn how autocomplete in jQuery UI filters a list as you type, showing matching suggestions. Configure the source, minimum length, delay, and autofocus to tailor behavior.
Understanding options in autocomplete Part-1.6:08
Explore how to customize jQuery UI autocomplete with options, including autofocus and defocus behaviors, using a source-driven setup and a practical code example.
Using options in autocomplete Part-2.6:07
Learn how to configure jQuery UI autocomplete using minLength and delay, control when suggestions appear, and connect a data source to filter tags as you type.
Understanding options Part-3.8:20
Learn to use the label option with label and value pairs in the complete method, showing how the displayed label maps to the underlying value in a text box.

Introduction to the buttons with default functionality.15:55
Explore creating and configuring various button types in a jQuery UI interface, including disabled states, icons, labels, links, checkboxes, and radios, with hands-on examples of button options and interactions.
Using options in buttons Part-1.11:37
Learn to configure jQuery UI buttons with primary icons on the left and a second icon on the right, control text display, and enable or disable states in Dreamweaver.
Introduction to actions used in buttons.10:07
Explore how to use jQuery UI button actions to disable, destroy, and refresh buttons, and see examples that update button state and label text.

Introduction to datepicker with default functionality.11:45
Learn to implement a jQuery UI date picker with default functionality, enabling single-date selection from a calendar that updates the input field and supports format and navigation options.
Creating an inline datepicker.4:50
learn to implement an inline datepicker with jquery ui, and compare it to the normal datepicker, showing the calendar inline without a text field while wiring up the script.
Using options in datepicker Part-1.10:09
Master jquery datepicker options by configuring date format, alternate field and alternate format, using appendix to set display order and managing two IDs for main and alternate dates.
Using options in datepicker Part-2.15:25
Learn to configure jQuery UI datepicker with options like show week, animation, RTL, week header, step month, focus and button modes, and custom button text for versatile calendar interactions.
Introduction to actions with functionality.7:37
Explore jQuery UI datepicker actions and learn to perform tasks like destroy, show, hide, and set date on a calendar by calling datepicker actions with string commands and optional arguments.

Requirements

I will take you from beginner to expert so no coding experience is necessary.
Any computer or OS will work.
A basic understanding of HTML and CSS will be a plus , but not must ! Every programming will represent how HTML / CSS is working behind.

Description

***Top rated jQuery (jQuery UI ) course on udemy***.

jQuery-"Write less do more" , let's use this concept to design amazing user interfaces using jQuery.

Are you dreaming to be a professional User Interface (UI) developer?? or

You want to develop an awesomely attractive Graphical User Interface(GUI)??or

You want to be a freelancer UI developer and earn $$$$???

This 12+ hours of content will transform yu as a complete user interface designer using jQuery.

If your answer to any of these questions is yes , then why not to choose jQuery?.

jQuery , a very small name , which can be used to perform website animations , used to create mobile apps , and also user interfaces which you are going to learn in this course.

It is proved that jQuery is said to be the easiest programming language if your dream is to design an user interface .

This jQuery User Interface (UI) course is just for you and your search for a complete UI course ends here.

Benifits / Advantages of this course:

1). No matter you are a beginner or an expert , this course is designed from scratch.

2). Every programming example will start from a blank page and will ends up with a desired output.

3). A line to line description of every single code is provided in a descriptive manner.

4). This course will work as a "ZERO to HERO" , so at the end you will be an expert in designing interfaces and using javascript libraries effectively.

Sections included in this course:

1). Introduction to instructor , Jquery UI , understanding about what you are going to learn in coming lectures with different uses and utilisations of jQuery UI.

2). Hands on to interactions which are:

2.1) Draggable

2.2) Droppable

2.3) Resizable

2.2) Selectable

2.2) Sortable.

3). Understanding the practical uses of widgets:

3.1). Accordion

3.2) Autocomplete

3.3) Button

3.4) Datepicker

3.4) Dialog

3.5) Menu

3.6) Progressbar

3.7) Selectmenu

3.8) Slider

3.9) Spinner

3.10) Tabs

3.11) Tooltip

4). Applying different effects :

4.1) Hide

4.2) Show

4.3) Toggle

4.4) AddClass

4.5) RemoveClass

4.6) SwitchClass

4.7). Easing effects

And now you can develop the complex graphical user interface with confidence.

Who this course is for:

Take this course if you want to be a professional Interface designer using jQuery UI.
Take this course if you want to understand how jQuery can be used to design interface with an ease.
Take this course if you are a beginner with no prior knowledge about interface design.

jQuery UI Ultimate:Design Amazing Interface Using jQuery UI

What you'll learn

Explore related topics

Course content

Introduction to the course and instructor with installation of jQuery UI.6 lectures • 18min

Interaction 1 - Draggable in jQuery UI.5 lectures • 58min

Interaction 2 - Droppable in jQuery UI.6 lectures • 1hr 32min

Interaction 3 - Resizable in jQuery UI.5 lectures • 57min

Interaction 4 - Selectables in jQuery UI.4 lectures • 1hr 3min

Interaction 5 - Sortables in jQuery UI.6 lectures • 1hr 30min

Widgets 1 - Using accordion in jQuery UI.2 lectures • 30min

Widgets 2 - Using autocomplete method in jQuery UI.4 lectures • 32min

Widget 3 - Concept of Buttons in jQuery UI.3 lectures • 38min

Widget 4 - Using datepicker in jQuery UI.5 lectures • 50min

Requirements

Description

Who this course is for: