JQuery UI

JQuery Course Content

Overview of jQuery

  •  What’s jQuery and what’s so good about it?
  •  Who is using it?
  •  Cross-browser compatibility
  •  jQuery UI and Plugins

Getting started with jQuery

  •  Downloading and including jQuery
  •  Google and Microsoft CDN
  •  Developer vs. Production versions (compressed vs uncompressed)
  •  jQuery name space and jQuery ‘$’ alias
  •  Revisiting HTML DOM
  •  Debugging jQuery problems
  •  Accessibility concerns

Using jQuery

  •  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
  •  Callback functions
  •  Event handlers
  •  Adding and removing HTML elements
  •  Modifying content

Advanced Animations

  •  Animating with CSS
  •  Color animation
  •  Easing
  •  Bouncy Content Panes
  •  Animation Queues
  •  Chaining Actions
  •  Animating Navigation
  •  jQuery User Interface (UI) Library

Handling User Scrolling

  •  The scroll event
  •  Floating navigation
  •  Scrolling the document
  •  Customizing scroll bars

Handling Resizing

  •  The resize event
  •  Layout switcher
  •  Re Sizable elements(text area, plane splitter)

Images and Slide shows

  •  Building our own light box
  •  Using Color Box plugin
  •  Cropping images with jCrop plug in
  •  Slide shows
  •  Faders (cross, roll over)
  •  Timers
  •  Using Cycle plugin
  •  Scrolling
  •  Thumbnails
  •  Customizing events that trigger scrolling

Menus

  •  Expandable and collapsible menus
  •  Open-closed indicators
  •  Expand on hover
  •  Hover intents
  •  Drop-down menus
  •  Accordion menus
  •  Simple
  •  Multi-level
  •  jQuery UI

Tabs

  •  Basic tabs
  •  jQuery UI tabs
  •  Tab options and controls

Panels and Panes

  •  Slide-downs
  •  Sliding overlay

Tool tips

  •  Simple
  •  Advanced (using sprites)

Ajax with jQuery

  •  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

Forms

  •  Simple form validation
  •  The submit event
  •  Validation plug in
  •  Form hints
  •  Check box checker
  •  In line editing
  •  Auto complete
  •  Star rating input
  •  Controls
  •  Date picker
  •  Date validation
  •  Sliders
  •  Drag and drop
  •  Sorting with jQuery UI’s sortable
  •  Progress bar