JQuery UI Widgets Introduction Tutorial for Beginner - PowerPoint PPT Presentation

About This Presentation
Title:

JQuery UI Widgets Introduction Tutorial for Beginner

Description:

JQuery UI widgets Tutorials for Beginners provides the best oppurtunity to learn JQuery from our free tutorials. – PowerPoint PPT presentation

Number of Views:83

less

Transcript and Presenter's Notes

Title: JQuery UI Widgets Introduction Tutorial for Beginner


1
JQuery UI Widgets Introduction Tutorial Videos
for Beginner by
2
Highlights
  • JQuery UI Widgets Introduction
  • Types of Widgets

3
JQuery UI Widgets Introduction
  • JQuery UI is a widget and interaction library.
  • Also known as top of the JQuery JavaScript
    Library
  • Useful to create very interactive web
    applications.
  • Widgets are fully featured UI controls that bring
    the richness to desktop applications
  • jQuery UI offers a combination of interaction,
    effects, widgets, utilities, and themes.

4
Types of Widgets
  • JQuery has following widgets

5
Accordion widget
  • Expandable and collapsible content holder
  • Useful when you want to compute between hiding
    and showing large amount of content.
  • Broken into two logical sections which looks like
    tabs.
  • accordion() method will be used in two forms,
    they are
  • (selector, context).accordion (options)
    Method, (selector, context).accordion
    ("action", params) Method

6
Dialog widget
  • Allows displaying content inside a floating
    window.
  • It can moved, resized and closed.
  • Modal Dialog with Buttons, Open Dialog on Click,
    Hide the Close Button/ Title bar, Change Dialog
    Position, Load Content via AJAX, Size to Fit
    Content uses dialog widgets
  • dialog widget has fixed width and auto height.

7
Date picker widget
  • Adds date picker functionality to web pages.
  • Provides customization of date format and
    language, restrict the selectable date ranges and
    add in buttons and navigation options.
  • Uses the jQuery UI CSS framework to style its
    look and feel.
  • Manipulates element values programmatically.
  • Requires some specific functional CSS, otherwise
    it won't work.

8
Tabs widget
  • Tab Widget is the AJAXified plugin which loads
    content by demand, and thus it makes the plugin
    incredibly lightweight.
  • Swaps between content that is broken into logical
    sections.
  • Displays a list of tab labels representing each
    page in the parent's tab collection.
  • Tabs widget contains TabHost named object which
    is used to add labels, add the callback handler,
    and manage callbacks.

9
Slider widget
  • Slider widgets makes selected elements into
    sliders.
  • slider widget will create handle elements with
    the class on initialization.
  • EX ui-slider-handle
  • We can specify custom handle elements by creating
    and appending the elements and adding
    the ui-slider-handle class before initialization.
  • Requires some functional Cascading Style Sheets,
    otherwise it won't work
  • Wordpress Sliding Widgets Plugin will help your
    to create a sliding panel dynamically 

10
Auto Complete Widget
  • Enables users to quickly locate and pick from a
    pre populated list of values as they type,
    leveraging searching and filtering.
  • provides suggestions while you type into the
    field.
  • Any field that can receive input can be converted
    into an Auto complete
  • When typing in the auto complete field, the
    plugin starts searching for entries that match
    and displays a list of values to choose from.
  • It used to select earlier entered tags or email
    addresses

11
Feedback
Like It ? Hate It?
We would love to hear from you whatever you think
about the course.
Click HERE to share what you think!
12
Thank you
Thank You for Watching JQuery UI Widgets
Introduction Tutorial Videos for Beginner by
http//www.courseing.com
Write a Comment
User Comments (0)
About PowerShow.com