jQuery UI in Action: Build 13 jQuery UI Projects

Course Curriculum

Chapter 1: Introduction to jQuery UI

Lecture 1: What are You Going to Develop?

Lecture 2: What Software You Need?

Lecture 3: What is jQuery UI?

Chapter 2: Set Up the Environment

Lecture 1: Update Regarding Latest Version

Lecture 2: Download Required jQuery UI Files

Lecture 3: Add Offline Reference

Lecture 4: Add Online Reference

Chapter 3: Interaction 1: Draggable

Lecture 1: Introduction to Draggable Interaction

Lecture 2: Restrict Draggability

Lecture 3: Cancel Draggability on Specific Elements

Lecture 4: Set Type, Position and Click-ability of Cursor

Lecture 5: How many Pixels to Move

Lecture 6: Return to the Original Position

Lecture 7: Add a Helper

Lecture 8: Add Magnetic Effect

Lecture 9: Different Methods

Lecture 10: Manage Events

Chapter 4: Interaction 2: Droppable

Lecture 1: Introduction to Droppable Interaction

Lecture 2: Decide which Draggable Elements to be Accepted by the Droppable

Lecture 3: Decide when an Element to be Considered as Dropped

Lecture 4: Decide which Nested Droppable Element to Accept Dropped Element

Lecture 5: Manage the Look of Droppable Based On Draggable's Movement

Lecture 6: Decide whether to Revert or Not

Lecture 7: Manage Events

Chapter 5: Interaction 3: Resizable

Lecture 1: Introduction to Resizable Interaction

Lecture 2: Where to Drag to Resize the Element

Lecture 3: Synchronous Resizing

Lecture 4: Restrict Resizing

Lecture 5: Add a Ghost/Helper

Lecture 6: Maintain Aspect Ratio

Lecture 7: Animate Resizing

Lecture 8: Miscellaneous Options (Options Already Discussed)

Lecture 9: Manage Events

Chapter 6: Interaction 4: Selectable

Lecture 1: Introduction to Selectable Interaction

Lecture 2: Filter Selectables and Non-Selectables

Lecture 3: Manage Events

Chapter 7: Interaction 5: Sortable

Lecture 1: Introduction to Sortable Interaction

Lecture 2: Replace the White Space

Lecture 3: Connect between Sortables

Lecture 4: Make Some Items Sortable

Lecture 5: Miscellaneous Options (Options Already Discussed)

Chapter 8: Widget 1: Accordion

Lecture 1: Introduction to Accordion Widget

Lecture 2: Allow to Collapse All Panels

Lecture 3: Decide which Panel to be Displayed by Default

Lecture 4: Customize the Animation

Lecture 5: When to Hide/Show Content Panels

Lecture 6: Set the Height of the Content Panels

Lecture 7: Set the Header for the Accordion

Lecture 8: Change the Default Icons in Accordion

Lecture 9: Manage Events

Lecture 10: Exercise: Add New Panel to the Accordion

Chapter 9: Widget 2: Tabs

Lecture 1: Introduction to Tabs Widget

Lecture 2: Display External Content

Lecture 3: Animate Hiding and Showing of Panels

Lecture 4: Miscellaneous Options (Options Already Discussed)

Lecture 5: Manage Events

Lecture 6: Exercise: Make the Selected Tab Active

Chapter 10: Widget 3: Autocomplete

Lecture 1: Introduction to Autocomplete Widget

Lecture 2: Select One and Display Another

Lecture 3: Set a Callback Function as the Source

Lecture 4: Load JSON Data

Lecture 5: Specify Minimum Length and Add Focus

Lecture 6: Position the Suggestion List with respect to Input Element

Lecture 7: Highlight Matching Text

Lecture 8: Manage Events

Chapter 11: Widget 4: Dialog

Lecture 1: Introduction to Dialog Widget

Lecture 2: Animate Hiding and Showing of Dialog

Lecture 3: Set the Size and Position of Dialog

Lecture 4: Change Default Functionalities

Lecture 5: Add Modal Behaviour

Lecture 6: Add Buttons to the Dialog

Lecture 7: Manage Events

Lecture 8: Different Methods

Lecture 9: Exercise: Create Two Dialogs

Chapter 12: Widget 5: Datepicker

Lecture 1: Introduction to Datepicker Widget

Lecture 2: Make Dates in a Range Selectable

Lecture 3: Make Weekends/Weekdays Non-Selectable

Lecture 4: Make Specific Dates Non-Selectable

Lecture 5: Make Dates Before Today(Current Day) Non-Selectable

Lecture 6: Style Holidays in Your Calendar

Lecture 7: Animate Hiding and Showing of Datepicker

Lecture 8: Format Date and Alternate Field

Lecture 9: Display Datepicker in Different Ways

Lecture 10: Localize the Datepicker – Part 1

Lecture 11: Localize the Datepicker – Part 2