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.
Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip
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!
Download me at https://www.mat.unical.it/informatica/Applicazioni%20Enterprise?action=AttachFile&do=get&target=jquery.zip
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