
This course teaches the participants how to tap into the power of jQuery to build extremely rich yet elegant Web UIS using one of the simplest and most popular cross-browser JavaScript Libraries.
2 Days
Must Have
- Web development experience with HTML, CSS & JavaScript
Good to Have
- Exposure to any server technology (J2EE, .NET, Ruby etc)
- What’s jQuery and what’s so good about it?
- Who is using it?
- Cross-browser compatibility
- jQuery UI and Plugins
- Downloading and including jQuery
- Google and Microsoft CDN
- Developer vs. Production versions (compressed v/s uncompressed)
- jQuery namespace and jQuery ‘$’ alias
- Revisiting HTML DOM
- Debugging jQuery problems
- Making sure that the page is ready
- Selections using CSS3
- Filters
- Multiple item selectors
- Best practices
- Decorating with CSS
- Changing styles
- Adding/removing classes
- Effects with jQuery (e.g. hiding, revealing, and toggling elements)
- Basic Animations
- Call back functions
- Event handlers
- Adding and removing HTML elements
- Modifying content
- The scroll events
- Floating navigation
- Scrolling the document
- Customizing scroll bars
- The resize event
- Layout switcher
- Resizable elements (text area, plane splitter)
- Overview of Ajax
- Loading content asynchronously
- Fetching JSON data
- jQuery’s Ajax facilities – Common settings – GET and POST requests – Ajax Events – Consuming XML – Sending HTML form data –
- Loading external scripts dynamically
- Interactive Ajax
- Spinners and progress indicators
- Endless scrolling
- Simple form validation
- The submit event
- Validation plugin
- Form hints
- Date picker – Date validation –
- Sliders
- Drag and drop
- Sorting with jQuery UI’s sortable
- Progress bar
- Simple modal dialog
- jQuery UI dialog
- Growl-style notifications
- 1-up notification
- Best Practices
- Clean code
- Comments
- Map objects
- Name spacing
- Scoping
- Client-side templating
- Why browser-sniffing should be avoided
- Feature detection – Plugins – tExtending jQuery – tCoexisting with other JavaScript libraries (like prototype.js) – tQueing and dequeuing animations – tThemes – tBuilding custom themes using the Theme builder