jQuery frameworks and resources - powered by JQuery

Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip

Back

jQuery User Interface

Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip

Back

jQuery User Interface - Introduction

jQuery UI

  • A comprehensive set of core interaction plugins, UI widgets and visual effects
  • All this using a jQuery-style and a event-driven architecture
  • Focus on web standards, accessiblity, flexible styling, and user-friendly design
  • Compatible with IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, and Google Chrome
JQuery UI main site

How it works

  • As soon as the DOM is loaded, select elements...
  • ...and apply core functions to produce the desired effect/appearance/behaviour

Example 1

Example 2

Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip

Back

jQuery User Interface - Effects

Effects description

  • jQuery UI adds quite a bit of functionality on top of jQuery's built-in effects.
  • jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings.
  • In addition, a full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal.
  • jQuery UI overrides several built-in jQuery methods in order to provide additional functionality.
Overridden methods Core effects List of all effects

Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip

Overridden methods

MethodDescription
.addClass()Adds the specified class(es) to each of the set of matched elements while animating all style changes.
.focus()Asynchronously set focus to an element.
.hide()Hide the matched elements, using custom effects.
.position()Position an element relative to another.
.removeClass()Removes the specified class(es) from each of the set of matched elements while animating all style changes.
.show()Display the matched elements, using custom effects.
.toggle()Display or hide the matched elements, using custom effects.
.toggleClass()Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the switch argument, while animating all style changes.

Core Effects

EffectDescriptionDetails
.addClass()Adds the specified class(es) to each of the set of matched elements while animating all style changes.
.effect()Apply an animation effect to an element.options demo
.hide()Hide the matched elements, using custom effects.options demo
.removeClass()Removes the specified class(es) from each of the set of matched elements while animating all style changes.
.show()Display the matched elements, using custom effects.
.switchClass()Adds and removes the specified class(es) to each of the set of matched elements while animating all style changes.options demo
.toggle()Display or hide the matched elements, using custom effects.
.toggleClass()Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the switch argument, while animating all style changes.
List of effect and options
Back

jQuery User Interface - Widgets

Widgets description

  • Widgets are full-featured UI controls
  • Widgets are fully themeable using a coordinated theme mechanism.
  • List of widgets

Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip

Widgets

WidgetDemo
AccordionTry it
TabTry it
DialogTry it
AutocompletionTry them
Button
Date picker
Progress bar
Slider
Menu
Spinner
Tooltip
Back

jQuery User Interface - Interactions

  • jQuery UI provides a set of mouse-based interactions as building blocks for rich interfaces and complex widgets
  • Interactions add basic mouse-based behaviors to any element.
  • You can
    • create sortable lists,
    • resizable elements,
    • drag & drop behaviors
    • and more ...
  • Click the following buttons and try them!
Draggable Droppable Resizable Selectable Sortable

Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip

Back

jQuery Mobile

Introduction

  • A unified, HTML5-based user interface system for all popular mobile device platforms
  • Built on the rock-solid jQuery and jQuery UI foundation
  • Flexible, easily themeable design
  • Easily embeddable in a native iOS or Android app
  • Note: mixing jQuery Mobile and jQuery UI is not a good idea!
  • You already experienced jQuery Mobile possibilities during this presentation!
jQuery Mobile demos

Basics

  • Make large use of Ajax to retrieve pages
  • Starts from the homepage and incrementally adds content to the DOM
  • Special tag attibutes are used to identify the role of the HTML elements (e.g. data-role="page" identify a page )
  • Basic building blocks are:
    • Page HTML elements
    • Page transitions
    • Listviews
    • Toolbars, headers, footers..
    • Layout grids
    • too much to be discussed here!!
    • But we can have a look at a basic site template and learn by practice!

Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip