Free Sample
+ Collection
Code Files

jQuery UI Development [Video]

Ben Fhala

Tips and tricks to master the jQuery UI library and set up your own custom widgets and cool components
RRP $84.99

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Video Details

ISBN 139781782162964
Course Length2 hours 6 minutes and 44 Seconds

About This Video

  • Utilize jQuery UI to its full potential
  • Create your own interactions and widgets
  • Understand how to skin jQuery UI elements and themes quickly

Who This Video Is For

If you want to save hundreds of hours on building your own components, this video course is ideal for you. We will demonstrate how to easily design elegant and powerful front-end interfaces for web applications. A working knowledge of JavaScript and a familiarity with jQuery would be useful, but are not vital.

Table of Contents

Getting Started with jQuery UI
Getting Started with jQuery UI
An Overview of jQuery
An Overview of jQuery UI
Working with jQuery Locally or through a CDN
Choosing Our Delivery Options in jQuery UI
Creating Our First Page Using jQuery UI Widgets
What Tools Am I Using?
Working with the CSS Framework
All about CSS
Adding Our Second Widget
Switching Styles in jQuery UI
The Library Minification Functionality
Optimizing Your Project
Themes - Under the Hood
Creating Your Own Themes Using ThemeRoller
Working with Widgets
Setting up Expectations
Creating a Dialog Widget
Options, Methods, and Events
Working with Widget Options
Changing a Dialog's Title
Discovering the Widget's Methods
Adding Interactivity with Callbacks
Adding Interaction
Setting up Expectations
Integrating Events into Widgets
Updating the Site When a Widget is Dropped
Being More Efficient with Events
Digging into Event Properties: the ui Property
Exploring the Event Object
Cleaning up Our Project
More about Widgets
Setting up Expectations
jQuery UI Tooltip
jQuery UI Spinner
jQuery UI Menu
jQuery UI Slider
jQuery UI Accordion
jQuery UI Tabs
Course Recap
Course Recap

What You Will Learn

  • Set up a custom jQuery UI library
  • Minify your library and make it more efficient
  • Get to grips with components and how to skin them quickly
  • Use the ThemeRoller to create custom themes in a jiffy
  • Understand how events work in jQuery UI
  • Hands-on demonstrations with detailed explanations and code
  • Drag-and-drop elements using the jQuery UI features
  • Work with over 9 key components

In Detail

jQuery UI is a trusted suite of official plug-ins for the jQuery JavaScript library, which gives you a solid platform on which to build rich and engaging interfaces with maximum compatibility and stability, and minimum time and effort.

jQuery UI training is made easy in this video, with step-by-step examples, useful tips, and quick tricks. This course breaks down complex tasks into bite-sized chunks, making it the best resource for you to use if you want to start using jQuery UI. Learn how to save hundreds of hours in development using jQuery UI's awesome components.

Even in the HTML 5 world of today, there are many oft used components and functionalities that still aren't part of a browser out of the box; this library is the critical solution, which will save you hundreds of hours while building highly sophisticated components for your applications. We'll cover the basics, and then build our first component – the datePicker - and we'll customize its characteristics. We'll discuss the ThemeRoller application for quickly skinning components, and the dialog component in all its detail. You'll also learn how to discover component features on your own, how to listen in on variables and changes, as well as how to trigger and listen to events. We'll then kick it up a notch with jQuery UI's drag-and-drop capabilities and build a working example that uses all of these features. We'll use components effectively, examine event properties in detail, and even clean up our code to make it more presentable. We'll wrap up by demonstrating as many of jQuery UI's essential and popular components as we can, followed by a brief course recap and summary.



Read More