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