User Interface Design and Usability jQuery, jQuery UI & jQuery Plugins Korab Zhuja, MSc Cacttus Education korab@zhuja.com 049 720 770

What is jQuery jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. Currently we can use jQuery 3.

jQuery History jQuery was originally released in January 2006 at BarCamp NYC by John Resig and was influenced by Dean Edwards' earlier cssQuery library. It is currently maintained by a team of developers led by Timmy Willison (with the jQuery selector engine, Sizzle, being led by Richard Gibson).

jQuery Usage jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 72.9% of all websites. Microsoft and Nokia bundle jQuery on their platforms.

What is Ajax Ajax is a client-side script that communicates to and from a server/database without the need for a post-back or a complete page refresh. The best definition I've read for Ajax is “the method of exchanging data with a server, and updating parts of a web page – without reloading the entire page.”

jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. jQuery UI is built for designers and developers alike. We've designed all of our plugins to get you up and running quickly while being flexible enough to evolve with your needs.

jQuery UI | Accordion Displays collapsible content panels for presenting information in a limited amount of space.

jQuery UI | Datepicker Select a date from a popup or inline calendar. The datepicker is tied to a standard form input field. Focus on the input to open an interactive calendar in a small overlay.

jQuery UI | Buttons Enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.

jQuery UI | ToolTip Customizable, themeable tooltips, replacing native tooltips.

jQuery UI | Dialog Open content in an interactive overlay. The basic dialog window is an overlay positioned within the viewport and is protected from page content shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.

jQuery Plugin | CurvedText CurvedText is a simple jQuery plugin that allows you to align text on any curve. Link: www.olivermusebrink.de/beta/curvedtext/

jQuery Plugin | formvalidation.io Best jQuery plugin to validate form fields Designed for Bootstrap 3/4, Foundation 5/6, Pure, Semantic UI, UIKit, etc; Link: http://formvalidation.io/

jQuery Plugin | ClockPicker ClockPicker is a clock-style timepicker for jQuery or Bootstrap. Link: github.io/clockpicker/

jQuery Mobile jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Link: demos.jquerymobile.com

Class Practice Building a form with HTML & jQuery UI; The exercise is explained by a word document that you will have in class.

ASK You are encouraged to ask always anything related to course materials and projects.