JQuery [6]Matteo Magni

Jquery UI

Jquery UI

jQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery. Ogni componente è costruito secondo l'architettura di JQuery ed è completamente personalizzabile. Fornisce interazioni ed animazioni, effetti avanzati e widgets. (wikipedia)

Quattro aree• Interactions :

drag&drop, ridimensionamento, ordinamento e selezione;

• WidgetsComponenti già pronti come accordion, datepicker...

• EffectsTransizioni animate

• UtilitiesUtilità di basso livello da usare per le interazioni, i widgets e gli effetti

Interazioni• Draggable

Rende gli elementi draggable

• Droppable Controlla dove gli elementi dragged possono essere droppati

• ResizableRende gli elementi ridimensionabili

• Selectable Avanzate caratteristiche di selezione per liste di elementi

• Sortable Liste di elementi facilmente ordinabili

Esempio

$(function() {

  $( "#resizable" ).resizable();

});

Widgets

• Accordion classico container Accordion

• Autocomplete Auto-completamento basato su ciò che l'utente digita

• Button Pulsante avanzato

• Datepicker Date-picker avanzato

Datepicker

$(function() {

 $( "#datepicker" ).datepicker();

});

Widgets [2]

• Dialog Mostra dialog box sopra altri contenuti

• Progressbar Progress bar, animate e non

• Slider Slider completamente customizzabile con varie features

• Tabs Tabbed user interface handling, con content sia inline che ondemand

Dialog

Effetti• Color Animation

Animazione attraverso il passaggio da un colore ad un altro

• Toggle Class, Add Class, Remove Class, Switch Class Animazione basata sul passaggio da uno style ad un altro

• Effect Varietà di effetti (appear, slide-down, explode, fade-in, etc.)

• ToggleSwitch su un effetto On oppure Off

• Hide, ShowSimile all'effetto di cui sopra

Utilities

• Position Imposta la posizione relativa di un elemento rispetto ad un altro (alignment)

Themeroller

http://jqueryui.com/themeroller/

ThemeRoller è un applicativo online che ci consente di generare il tema di base di jQuery UI.

Inoltre ci mette a disposizione alcuni temi già fatti.

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

matteo@magni.me