|
INTRODUCTION & SYNTAX OVERVIEW
|
|
|
|
Introduction to jQuery
12:00
|
Preview
|
|
|
How to add jQuery to HTML page ? Using jQuery CDN or Downloaded file
14:00
|
|
|
|
Mini Quiz #1
|
|
|
|
jQuery syntax overview.
13:00
|
Preview
|
|
|
jQuery selectors | How to use selectors ?
5:00
|
|
|
|
Mini Quiz #2
|
|
|
|
The elemet selector in jQuery
4:00
|
|
|
|
The Id selector in jQuery
3:00
|
|
|
|
QUIZ 1
|
|
|
|
The class selector in jQuery
4:00
|
|
|
|
The miscellaneous jQuery selectors (element.class , element.nth-child)
18:00
|
|
|
|
Mini Quiz #3
|
|
|
|
1 module
(4 pages)
|
|
|
EVENT HANDLING IN jQuery
|
|
|
|
jQuery events triggering and Types of events
3:00
|
|
|
|
Trigger Mouse Events in jQuery
11:00
|
|
|
|
Keyboard Events in jQuery
7:00
|
|
|
|
Form Events in jQuery
14:00
|
|
|
|
Document/Window Events in jQuery
10:00
|
|
|
|
jQuery on() and off() methods to handel events
9:00
|
|
|
|
QUIZ 1
|
|
|
|
2 module
(2 pages)
|
|
|
|
Mini Quiz #1
|
|
|
jQuery EFFECTS
|
|
|
|
hide(), side() and toggle() Methods
11:00
|
Preview
|
|
|
fadeIn(), fadeOut(), fadeToggle() and fadeTo() Methods
11:00
|
|
|
|
slideIn(), slideOut() and slideToggle() Methods
11:00
|
|
|
|
animate() method , add CSS animations properties using jQuery
11:00
|
|
|
|
stop(), clearQueue() , finish() Method
10:00
|
|
|
|
jQuery Method Chaining
3:00
|
|
|
|
Mini Quiz #1
|
|
|
|
quiz 1
|
|
|
|
Assign #3
(1 pages)
|
|
|
|
3 module
(3 pages)
|
|
|
jQuery HTML METHODS
|
|
|
|
Get and set Content - text() ,html() and val()
17:00
|
|
|
|
Get and set Content - attr() , data() and prop()
12:00
|
|
|
|
jQuery add element - append(), prepend(), after() and before()
9:00
|
|
|
|
jQuery remove element - remove() and empty() methods
4:00
|
|
|
|
jQuery css classes - addClass(), removeClass() and toggleClass() methods
10:00
|
|
|
|
jQuery css() method - get and set css properties
8:00
|
|
|
|
jQuery Dimensions - get and set width and height
5:00
|
|
|
|
Mini Quiz #1
|
|
|
|
quiz 1
|
|
|
|
Assign #4
(1 pages)
|
|
|
jQuery Traversing
|
|
|
|
What is Traversing ?
4:00
|
|
|
|
jQuery Traversing - Ancestors
10:00
|
|
|
|
jQuery Traversing - Descendants
6:00
|
|
|
|
jQuery Traversing - Siblings
6:00
|
|
|
|
jQuery Traversing - Filtering
7:00
|
|
|
|
has() and is() methods
7:00
|
|
|
|
each() method in jquery
5:00
|
|
|
|
Mini Quiz #1
|
|
|
|
quiz 1
|
|
|
|
5 module
(3 pages)
|
|
|
Exercise 1
|
|
|
|
Image gallery using jQuery
9:00
|
|
|
|
Maximun character validation using jQuery
12:00
|
|
|
|
On-off blub using switch
10:00
|
|
|
|
Course slider
6:00
|
|
|
Events object: Properties & Methods
|
|
|
|
pageX, pageY and offset method
8:00
|
|
|
|
event.type property
4:00
|
|
|
|
event.which property
5:00
|
|
|
|
event.target property
4:00
|
|
|
|
event.preventDefault() and event.isDefaultPrevented() methods
4:00
|
|
|
|
event.stopPropagation() and event.isPropagationStopped()
3:00
|
|
|
|
event.data property
8:00
|
|
|
|
Mini Quiz #1
|
|
|
|
quiz 1
|
|
|
|
6 module
(1 pages)
|
|
|
|
Assign #6
(1 pages)
|
|
|
Exercise - 2
|
|
|
|
I agree validation
7:00
|
|
|
|
Show and Hide Password
9:00
|
|
|
|
Add more row on click.
12:00
|
|
|
|
To do list using jQuery
11:00
|
|
|
jQuery-UI (Introduction and Environment setup)
|
|
|
|
What is jQuery UI ?
7:00
|
|
|
|
Required files for jQuery UI
4:00
|
|
|
|
Adding online and offline refrences
6:00
|
|
|
Interaction: Draggable
|
|
|
|
Introduction to Draggable interaction
4:00
|
|
|
|
Restrict the draggable interaction
6:00
|
|
|
|
Cancel draggable interaction
3:00
|
|
|
|
Set Type, Position and Click-ability of Cursor
7:00
|
|
|
|
Pixles to move using Grid Property.
2:00
|
|
|
|
Return to the Original Position using Revert Property.
3:00
|
|
|
|
Add a helper for draggable elements
5:00
|
|
|
|
Megnetic effect using snap property
8:00
|
|
|
|
Other properties
10:00
|
|
|
|
Managing the events of draggable
7:00
|
|
|
Interaction: Droppable
|
|
|
|
Introduction to Droppable
4:00
|
|
|
|
Decide Which Draggable Elements To Be Accepted
8:00
|
|
|
|
Decide when an Element to be Considered as Dropped
4:00
|
|
|
|
Decide which Nested Droppable Element to Accept Dropped Element
3:00
|
|
|
|
Manage the look of the droppable based on the draggable
6:00
|
|
|
|
Decide whether to revert back or not when missmatch
4:00
|
|
|
|
Manage events in Droppable
7:00
|
|
|
Interaction: Resizeable
|
|
|
|
Introduction to Resizeable
3:00
|
|
|
|
Where to drag to resize ?
4:00
|
|
|
|
Synchronize method
3:00
|
|
|
|
Ghost and Helper Methods
4:00
|
|
|
|
Restrict Resizable
7:00
|
|
|
|
Maintain aspect ratio of resizable
4:00
|
|
|
|
Animate resizing
6:00
|
|
|
|
Manage Events
5:00
|
|
|
Selectable
|
|
|
|
Introduction to selectable
13:00
|
|
|
|
Filter Selectables and Non-Selectables
4:00
|
|
|
Sortable
|
|
|
|
Introduction to sortable
3:00
|
|
|
|
Replace the White Space using placeholder option
2:00
|
|
|
|
Connect between Sortables
4:00
|
|
|
|
Make some items sortable
3:00
|
|
|
Accordion
|
|
|
|
Introduction to Accordion
5:00
|
|
|
|
Allow to Collapse All Panels
|
|
|
|
"Decide which Panel to be Displayed by Default"
2:00
|
|
|
|
Decide which event to be used to display the content
2:00
|
|
|
|
Set the Height of the Content Panels
5:00
|
|
|
|
Change the Default Icons in Accordion
3:00
|
|
|
Tab
|
|
|
|
Introduction to Tabs Widget
3:00
|
|
|
|
Animate Hiding and Showing of Panels
6:00
|
|
|
|
Miscellaneous Options
4:00
|
|
|
Autocomplete
|
|
|
|
Introduction to autocomplete
4:00
|
|
|
|
Select One and Display Another
4:00
|
|
|
|
Some autocomplete options
3:00
|
|
|
|
Position options in autocomplete
10:00
|
|
|
|
Manage Events
7:00
|
|
|
Dialog
|
|
|
|
Introduction to Dialog Widget
4:00
|
|
|
|
Show and Hide effects
4:00
|
|
|
|
Set the size and position of the dialog box
7:00
|
|
|
|
Change Default Functionalities
3:00
|
|
|
|
Add Modal Behaviour
2:00
|
|
|
|
Add Buttons to the Dialog
7:00
|
|
|
|
Manage Events
|
|
|
|
Different methods
5:00
|
|
|
Datepicker
|
|
|
|
Introduction to Datepicker
3:00
|
|
|
|
Make Dates in a Range Selectable
4:00
|
|
|
|
Make Weekends/Weekdays Non-Selectable
5:00
|
|
|
|
Make Specific Dates Non-Selectable
4:00
|
|
|
|
Holiday concept in datepicker
9:00
|
|
|
|
Style Holidays in Your Calendar
4:00
|
|
|
|
Animate Hiding and Showing of Datepicker
4:00
|
|
|
|
Format Date and Text Box
6:00
|
|
|
|
Alternate field and alternate text
3:00
|
|
|
|
Show datepicker in different ways.
7:00
|
|
|
|
Change default datepicker options
5:00
|
|
|
|
Change the language of the datepicker
7:00
|
|
|
|
Control Datepicker Programmatically
5:00
|
|
|
Progress bar
|
|
|
|
Introduction to Progress bar
2:00
|
|
|
|
Customise the progress bar
7:00
|
|
|
|
Change the Value of the Progressbar Programmatically
4:00
|
|
|
Slider
|
|
|
|
Introduction to the slider
4:00
|
|
|
|
Change event in slider
3:00
|
|
|
|
Range Slider
5:00
|
|
|
|
Other options
4:00
|
|
|
|
Manage events
5:00
|
|
|
Menu
|
|
|
|
Introduction to the Menu
5:00
|
|
|
|
Change icons of menu
3:00
|
|
|
|
Divider & items option.
3:00
|
|
|
|
Manage events
6:00
|
|
|
Tooltip
|
|
|
|
Introduction to tooltip
3:00
|
|
|
|
Show & Hide effects for tooltip
3:00
|
|
|
|
Position of the tooltip
2:00
|
|
|
|
Customize the look of tooltip
2:00
|
|
|
|
Customize the content of the tooltip
3:00
|
|
|
|
Events and Methods
5:00
|
|
|
Spinner
|
|
|
|
Introduction to the Spinner
14:00
|
|
|
|
Methods of the Spinner
7:00
|
|
|
Miscellaneous Widgets
|
|
|
|
Button Widget
3:00
|
|
|
|
Checkbox Radio
4:00
|
|
|
|
Selectmenu widget
2:00
|
|
|
|
Control group
5:00
|
|
|
Effects
|
|
|
|
Effect method
7:00
|
|
|
|
Show and Hide method
6:00
|
|