Table of Content 1) JqueryUI Home 2) JqueryUI Overview 3) JqueryUI Environmental Setup 4) JqueryUI Draggable 5) JqueryUI Droppable 6) JqueryUI Resizable 7) JqueryUI Selectable 8) JqueryUI Sortable 9) JqueryUI Accordion 10) JqueryUI Autocomplete 11) JqueryUI Button 12) JqueryUI Datepicker 13) JqueryUI Dialog 14) JqueryUI Menu 15) JqueryUI Progressbar 16) JqueryUI Slider 17) JqueryUI Tabs 18) JqueryUI Tooltip 19) JqueryUI Add class 20) JqueryUI Color Animation 21) JqueryUI Effect 22) JqueryUI Hide 23) JqueryUI Remove Class 24) JqueryUI Show 25) JqueryUI Switch Class 26) JqueryUI Toggle 27) JqueryUI Toggle class 28) JqueryUI Position 29) JqueryUI Widget Factory 30) Developer’s best practice JqueryUI Tutorial JqueryUI is the most popular front end frameworks currently. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you basics of JqueryUI Framework, which you can use to create complex web applications GUI with ease. This Tutorial is divided into sections such as JqueryUI Basic Structure, JqueryUI CSS, JqueryUI Layout Components and JqueryUI Plugins. Each of these sections contains related topics with simple and useful examples. Audience This tutorial has been prepared for anyone who has a basic knowledge of HTML and CSS and has an urge to develop websites. After completing this tutorial you will find yourself at a moderate level of expertise in developing web projects using Twitter JqueryUI. Prerequisites Before you start proceeding with this tutorial, I'm making an assumption that you are already aware about basics of HTML and CSS. If you are not well aware of these concepts then I will suggest to go through our short tutorial on HTML Tutorial and CSS Tutorial. JqueryUI - Overview JqueryUI is a powerful JavaScript library built on top of jQuery JavaScript library. UI stands for User interface, It is a set of plugins for jQuery that adds new functionalities to the jQuery core library. The set of plugins in JqueryUI includes interface interactions, effects, animations, widgets, and themes built on top of jQuery JavaScript Library. It was released in September 2007, announced in a blog post by John Resig on jquery.com. The latest release, 1.10.4, requires jQuery 1.6 or later version. jQuery UI is a free, open source software, licensed under the MIT License. Features JqueryUI is categorized into four groups, interactions, widgets, effects, utilities. These will be discussed in detail in the subsequent chapters. The structure of the library is as shown in the image below − Interactions − These are the interactive plugins like drag, drop, resize and more which give the user the ability to interact with DOM elements. Widgets − Using widgets which are jQuery plugins, you can create user interface elements like accordian,datepicker etc. Effects − These are built on the internal jQuery effects. They contain a full suite of custom animations and transitions for DOM elements. Utilities − These are a set of modular tools the JqueryUI library uses internally. Benefits of JqueryUI The below are some of the benefits of Jquery UI − Cohesive and Consistent APIs. Comprehensive Browser Support. Open Source and Free to Use. Good Documentation. Powerful Theming Mechanism. Stable and Maintenance Friendly. queryUI - Environment Setup This chapter will discuss about download and set up of JqueryUI library. We will also briefly study the directory structure and its contents. JqueryUI library can be used in two ways in your web page − Downloading UI Library from its official website Downloading UI Library from CDNs Download UI Library from Its Official Website When you open the link http://jqueryui.com/, you will see there are three options to download JqueryUI library − Custom Download − Click on this button to download a customized version of library. Stable − Click on this button to get the stable and latest version of JqueryUI library. Legacy − Click on this button to get the previous major release of the JqueryUI library. Custom Download with Download Builder Using Download Builder, you can create a custom build to include only those portions of the library that you need. You can download this new customized version of JqueryUI, depending on the chosen theme. You will see the following screen (same page is split into two images) −