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

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
Introduction to jQuery UI.2:03
Understanding the features of jQuery UI.2:40

Discussion on droppable options with default functionality.14:51
Understanding options for droppable - Part 119:31
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
Understanding options for resizable - Part 213:11
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

Introduction to selectables with default functionality.14:55
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
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
Introduction to the actions used in sortables.15:49
Use of events in sortable method.19:31

Introduction to autocomplete with default functionality.11:33
Understanding options in autocomplete Part-1.6:08
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

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

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: