34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Modern web application user interface design requires rapid development and proven results. jQuery UI, a trusted suite of official plug-ins for the jQuery JavaScript library, 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 has a series of ready-made, great-looking user interface widgets and a comprehensive set of core interaction helpers designed to be implemented in a consistent and developer-friendly way. With all this, the amount of code that you need to write personally to take a project from conception to completion is drastically reduced.
Specially revised for version 1.7 of jQuery UI, this book has been written to maximize your experience with the library by breaking down each component and walking you through examples that progressively build upon your knowledge, taking you from beginner to advanced usage in a series of easy-to-follow steps.
In this book, you'll learn how each component can be initialized in a basic default implementation and then see how easy it is to customize its appearance and configure its behavior to tailor it to the requirements of your application. You'll look at the configuration options and the methods exposed by each component's API to see how these can be used to bring out the best of the library.
Events play a key role in any modern web application if it is to meet the expected minimum requirements of interactivity and responsiveness, and each chapter will show you the custom events fired by the component covered and how these events can be intercepted and acted upon.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 438
Veröffentlichungsjahr: 2009
Ähnliche
Table of Contents
jQuery UI 1.7
The User Interface Library for jQuery
Dan Wellman
jQuery UI 1.7
The User Interface Library for jQuery
Copyright © 2009 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: November 2009
Production Reference: 1021109
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847199-72-0
www.packtpub.com
Cover Image by Vinayak Chittar (<[email protected]>)
Credits
Author
Dan Wellman
Reviewers
Marc Grabanski
Akash Mehta
Jörn Zaefferer
Acquisition Editor
Douglas Paterson
Development Editor
Nikhil Bangera
Technical Editors
Vinodhan Nair
Gagandeep Singh
Indexer
Rekha Nair
Editorial Team Leader
Gagandeep Singh
Project Team Leader
Priya Mukherji
Proofreader
Claire Cresswell-Lane
Graphics
Nilesh Mohite
Production Coordinator
Shantanu Zagade
Cover Work
Shantanu Zagade
About the Author
Dan Wellman lives with his wife and three children in his home town of Southampton on the south coast of England. By day his mild-mannered alter-ego works for a small yet accomplished e-commerce production agency. By night he battles the forces of darkness and fights for truth, justice, and less intrusive JavaScript.
He has been writing computer-related articles, tutorials, and reviews for around five years and is rarely very far from a keyboard of some description. This is his third book.
I'd like to thank the Packt editorial team, all of the technical reviewers and the jQuery UI team, without whom this book would not have been possible. Special thanks go to Jörn Zaefferer who provided essential feedback and was always happy to answer my late-night, niggling questions.
Thanks also to my fantastic friends, in no particular order; Steve Bishop, Eamon O' Donoghue, James Zabiela, Andrew Herman, Aaron Matheson, Dan Goodall, Mike Woodford, Mike Newth, John Adams, Jon Field and Vicky Hammond and all the rest of the guys and girls.
About the Reviewers
Marc Grabanski got involved early on with jQuery by authoring what would become the jQuery UI Datepicker. He works, arguably too much, building user interfaces and web software all the day long with his company MJG International.
If I were to thank anyone it would be Jesus Christ for transforming me from a video game addict into something useful to society and the people around me.
Akash Mehta is a web application developer and technical author based in Australia. His area of work covers e-learning solutions, information systems, and developer training. He regularly writes web development articles for Adobe, CNet, the APC Magazine, and other publications in print and online. He is a regular speaker at IT conferences, user groups, and BarCamps. Currently, Akash provides web development, technical writing, consulting, and training services through his website, http://bitmeta.org/.
I would like to thank my parents, for their constant support and encouragement, and Sophie, for her enduring patience and amazing inspiration.
Jörn Zaefferer is a professional software developer from Cologne, Germany. He creates application programming interfaces (APIs), graphical user interfaces (GUIs), software architectures, and designs databases, for both web and desktop applications.
His work focuses on the Java-platform, while clientside-scripting evolves around jQuery. He started contributing to jQuery in mid-2006, and has since co-created and maintained QUnit, jQuery's unit testing framework; released and maintained a half-dozen of very popular jQuery plugins, and contributed to jQuery books as both author and tech-reviewer. He also is a lead developer for jQuery UI.
This book is dedicated to my eternally patient and understanding wife Tammy and my beautiful kids Bethany, Matthew, James, and Jessica. Shining supernovas that light up my life.
Preface
Modern web application user interface design requires rapid development and proven results. jQuery UI, a trusted suite of official plugins for the jQuery JavaScript library, gives you a solid platform on which to build rich and engaging interfaces with maximum compatibility, stability, and a minimum of time and effort.
jQuery UI has a series of ready-made, great looking user interface widgets, and a comprehensive set of core interaction helpers designed to be implemented in a consistent and developer-friendly way. With all this, the amount of code that you need to write personally to take a project from conception to completion is drastically reduced.
Specially revised for version 1.7 of jQuery, this book has been written to maximize your experience with the library by breaking down each component and walking you through examples that progressively build upon your knowledge, taking you from beginner to advanced usage in a series of easy-to-follow steps.
In this book, you'll learn how each component can be initialized in a basic default implementation and then see how easy it is to customize its appearance and configure its behavior to tailor it to the requirements of your application. You'll look at the configuration options and the methods exposed by each component's API to see how these can be used to bring out the best of the library.
Events play a key role in any modern web application if it is to meet the expected minimum requirements of interactivity and responsiveness, and each chapter will show you the custom events fired by the component covered and how these events can be intercepted and acted upon.
What this book covers
Chapter 1, Introducing jQuery UI, gives a general overview and introduction to jQuery UI. You find out exactly what the library is, where it can be downloaded from, and where resources for it can be found. We look at the freedom the license gives you to use the library and how the API has been simplified to give the components a consistent and easy to use programming model.
In Chapter 2, The CSS Framework, we look in details at the extensive CSS framework that provides a rich environment for integrated theming via ThemeRoller, or allows developers to easily supply their own custom themes or skins.
In Chapter 3, Tabs, we look at the tabs component; a simple but effective means of presenting structured content in an engaging and interactive widget.
Chapter 4, The Accordion Widget, looks at the accordion widget, another component dedicated to the effective display of content. Highly engaging and interactive, the accordion makes a valuable addition to any web page and its API is exposed in full to show exactly how it can be used.
In Chapter 5, The Dialog, we focus on the dialog widget. The dialog behaves in the same way as a standard browser alert, but it does so in a much less intrusive and more visitor-friendly manner. We look at how it can be configured and controlled to provide maximum benefit and appeal.
Chapter 6, Slider, looks at the slider widget that provides a less commonly used, but no less valuable user interface tool for collecting input from your visitors. We look closely at its API throughout this chapter to see the variety of ways that in which it can be implemented.
In Chapter 7, Datepicker, we look at the datepicker. This component packs a huge amount of functionality into an attractive and highly usable tool, allowing your visitors to effortlessly select dates. We look at the wide range of configurations that its API makes possible as well as seeing how easy common tasks such as skinning and localization are made.
In Chapter 8, Progressbar, we look at the new progressbar widget; examining its compact API and seeing a number of ways in which it can be put to good use in our web applications.
In Chapter 9, Drag and Drop, we begin looking at the low-level interaction helpers, tackling first the related drag-and-droppable components. We look at how they can be implemented individually and how they can be used together for maximum effect.
Chapter 10, Resizing, looks at the resizing component and how it is used with the dialog widget from earlier in the book. We see how it can be applied to any element on the page to allow it be resized in a smooth and attractive way.
In Chapter 11, Selecting, we look at the selectable component, which allows us add behavior to elements on the page and allow them be selected individually or as a group. We see that this is one component that really brings the desktop and the browser together as application platforms.
Chapter 12, Sorting, looks at the final interaction helper—the sortable component. This is an especially effective component that allows you to create lists on a page that can be reordered by dragging items to a new position on the list. This is another component that can really help you to add a high level of professionalism and interactivity to your site with a minimum of effort.
Chapter 13, UI Effects, is dedicated solely to the special effects that are included with the library. We look at an array of different effects that allow you to show, hide, move, and jiggle elements in a variety of attractive and appealing animations. There is no 'fun with' section at the end of this chapter; the whole chapter is a 'fun with' section.
What you need for this book
Who this book is for
This book is for developers who want to quickly and easily build engaging, highly interactive interfaces for their web applications, or less commonly, for embedded applications.
Nokia was the first mobile phone company to announce that they were adopting jQuery to power parts of their cell phone operating system. I'm sure that by the time this book is published there will be more companies adapting the library for their own needs, and wherever jQuery goes, jQuery UI can follow.
People who are comfortable with HTML, JavaScript, and CSS along with having at least some experience with jQuery itself will get the most benefit from what this book has to offer. However, no prior knowledge of the UI library itself is required.
Consider the following code:
If you cannot immediately see, and completely understand, what this simple code snippet does, you would probably get more from this book after first learning about jQuery itself. Consider reading Karl Swedberg and Jonathan Chaffer's excellent Learning jQuery 1.3, also by Packt Publishing, or visit http://www.learningjquery.com for an excellent foundation in jQuery, and then come back to this book.
Each jQuery UI specific method or property that we work with will be fully covered in the explanatory text that accompanies each code example, and where it is practical, some of the standard jQuery code will also be discussed. CSS and HTML will take a back seat and be covered very briefly, if at all, unless it is completely central to the discussion at hand.
Basic concepts of using jQuery itself won't be covered. Therefore, you should already be familiar with advanced DOM traversal and manipulation, attribute and style getting and setting, and making and handling AJAX calls. You should be comfortable with the programming constructs exposed by jQuery such as method chaining, using JavaScript objects, and working with callback functions.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an email to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Tip
Downloading the example code for the book
Visit http://www.packtpub.com/files/code/9720_Code.zip to directly download the example code.
The downloadable files contain instructions on how to use them.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or web site name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Introducing jQuery UI
Welcome to jQuery UI 1.7: The User Interface Library for jQuery. This resource aims to take you from your first steps to an advanced usage of the JavaScript library of UI widgets and interaction helpers built on top of the hugely popular and easy-to-use jQuery.
jQuery UI extends the underlying jQuery library to provide a suite of rich and interactive widgets along with code-saving interaction helpers, built to enhance the user interfaces of your websites and web applications. It's the official UI library for jQuery and although it is not the only library built on top of jQuery, in my opinion it is without a doubt the best.
jQuery has quickly become one of the most popular JavaScript libraries in use today and jQuery UI will definitely become the extension library of choice, thanks to its ever-growing range of common UI widgets, high levels of configurability, and its exceptional ease of implementation.
jQuery UI runs on top of jQuery and hence the syntax used to initialize, configure, and manipulate the different components is in the same comfortable, easy-to-use style as jQuery. We automatically get all of the great jQuery functionality at our disposal as well. The library is also supported by a range of incredibly useful tools, such as the CSS framework that provides a range of helper CSS classes, and the excellent ThemeRoller application that allows us to visually create our own custom themes for the widgets.
Over the course of this book we'll look at each of the existing components that make up the library. We will also be looking at their configuration options and trying out their methods in order to fully understand how they work and what they are capable of. By the end of the book, you'll be an expert in its implementation.
We already have a basic working knowledge of the components when we add a new component because of the consistency in how we implement the different components that make up the library. Therefore, we only need to learn any widget-specific functionality.
This chapter will cover the following topics:
Downloading the library
To obtain a copy of the library, we should visit the download builder at http://jqueryui.com/download, which gives us a range of different options for building a download package that is tailored for our particular implementational requirements. The following screenshot shows the download builder:
We can either download the complete current release of the library, or a complete package of the legacy 1.6 version, or we can select the components that we want and download a custom package.
Note
This book is specifically tailored towards version 1.7 of jQuery UI (at the time of writing the current stable release is 1.7.2) and is not compatible with legacy versions of the library. jQuery UI 1.7 requires jQuery 1.3.
The page is laid out in a really friendly and easy-to-use way. It lists all of the different components in their respective groupings (core, interaction helpers, and widgets) and allows us to choose from one of 25 different predesigned themes along with providing information about the package (including both its compressed and uncompressed size).
We'll look at the different files found within the library in just a moment, but for now we should download the complete library. It will contain everything we need, including the JavaScript and CSS files, as well as any images from the current theme that different components rely on. It even contains the latest version of jQuery itself, so we don't need to worry about downloading this separately.
For now, just use the Current (stable) link at the top of the page. This will give us the default theme that is called smoothness. We'll look at downloading and using other themes in the next chapter.
Tip
Hosted Files
In reality, we don't even need to download the library in order to implement it in a production web application. Both jQuery and jQuery UI are hosted on Google's content delivery network (CDN), so we can include <script> elements that link to these files instead of using local versions. Only the complete library (not individual components) is available, although there are a range of different releases.
On a live site that receives a lot of international traffic, using a CDN will help ensure that the library files are downloaded to a visitor's computer from a server that is geographically close to them. This helps in making the response quicker for them and saving our own bandwidth. This is not recommended for local development however.
Setting up a development environment
We'll need a location to unpack the jQuery UI library in order to easily access the different parts of it within our own files. We should first create a project folder, into which all of our example files, as well as all of the library and other associated resources can be saved.
Create a new directory on your C: drive, or in your home directory, and call it jqueryui. This will be the root folder of our project and will be the location where we store all of the example files from the code download.
To unpack the library, open it in a compression program, such as the open source 7zip, and choose the extract or unzip command. When prompted for a location to unpack the archive to, choose the jqueryui folder that we just created.
The code examples that we'll be looking at use other resources, mostly images, but occasionally some PHP files too. The accompanying code download available on Packt's website contains all of the images that we'll be using. You should download this now if you can, visit: http://www.packtpub.com/support/book/user-interface-library-for-jquery. You'll need to create a new folder within the jqueryui project folder and call it img, then unpack all of the subdirectories within the img folder in the archive to this new folder.
The code download also contains all the examples files as well as the library itself. It would be incredibly easy to unpack the entire code download to a local directory and run each of the examples as they are.
These files are provided in the hope that they will be used for reference purposes only! I'd urge you to follow the examples in the book on the fly, manually creating each file as it is shown instead of just referring to the files in the code download. The best way to learn code is to code.
This is all we need to do, no additional platforms or applications need to be installed and nothing needs to be configured or set up. As long as you have a browser and some kind of code or text editor then everything is in place to begin developing with the library.
The structure of the library
Let's take a moment to look at the structure of the unpacked library. This will give us a feel for its composition and structure. Open up the jqueryui folder where we unpacked the library. The contents of this folder should be as follows:
The css folder is used to store the complete CSS framework that comes with the library. Within this folder will be a directory that has the name of the theme we chose when building the download package. Inside this is single file that contains all of the CSS, and a folder that holds all the images used by the theme. We can also store the CSS files we'll be creating in the css directory.
The js folder contains minified versions of jQuery and the complete jQuery UI library, with all components rolled into this one file. In a live project, it is the js and css folders that we'd want to drop into our site.
The index is an HTML file that gives a brief introduction to the library and displays all of the widgets along with some of the CSS classes. If this is the first time you've ever used the library, you can take a look to see some of the things that we'll be working with throughout the course of this book.
The development-bundle directory contains a series of resources to help us develop with the library and contains the following subdirectories:
Also present in the directory are the license files, documents showing the version of the library and its main contributors. An uncompressed version of jQuery is also present.
The demos folder contains a series of basic examples showing all of the different components in action. The docs folder contains API documents for each of the different components.
The external folder contains a set of tools that may be of use to developers. They are as follows:
The bgiframe plugin is used to fix the issue in IE6 where <select> elements appear above other content, regardless of z-index. This plugin is due to be removed in release 1.8 of jQuery UI and replaced with the stackfix utility. The cookie plugin makes it easy to use browser cookies. jsDiff is the JavaScript implementation of an algorithm that can be used to compare two strings and show the differences between them.
qunit is jQuery's unit testing suite and can be used to run unit tests on widgets and plugins that we may create. For more information on QUnit visit: http://docs.jquery.com/QUnit. The simulate plugin simulates mouse and keyboard events and allows the functionality of widgets or plugins to be tested automatically.
Other than the cookie plugin (which we use in Chapter 12), we won't be using any of these tools in the examples we'll look at.
The themes folder contains two different themes—the first is the base theme that is a neutral, minimal theme of grey tones. The second is the smoothness theme, which we chose when building our download. It is very similar to the base theme.
The ui folder contains the individual, uncompressed source files of each of the different components of the library.
ThemeRoller
ThemeRoller is a custom tool written with jQuery and PHP. It allows us to visually produce our own custom jQuery UI theme and package it up in a convenient, downloadable archive, which we can drop into our project with no further coding (other than using the stylesheet in a HTML <link> element of course).
ThemeRoller was created by Filament Group, Inc. and makes use of a number of jQuery plugins released into the open source community. It can be found at http://ui.jquery.com/themeroller.
ThemeRoller is certainly the most comprehensive tool available for creating your own jQuery UI themes. We can very quickly and easily create an entire theme comprised of all of the styles needed for targeting elements, including the images we'll need.
If you looked at the index.html file a little earlier on then the ThemeRoller landing page will instantly be familiar as it shows all of the UI widgets on the page, skinned with the default smoothness theme.
The page features an interactive menu on the left that is used to work with the application. Each item within the menu expands to give you access to the available style settings for each part of the widget, such as the content and the clickable elements.
Here we can create our custom theme with ease and see the changes instantly as they are applied to the different visible parts of each widget on the page:
When you're not feeling particularly inspired while creating a theme, there is also a gallery of preconfigured themes that you can instantly use to generate a fully configured theme. Aside from this convenience, the best thing about these preselected themes is that when you select one, it is loaded into the left menu. Therefore, you can easily make little tweaks as required:
Without a doubt, this is the best way to create a visually appealing custom theme that matches the UI widgets to your existing site, and is the recommended method of creating custom skins.
Installing and using the new theme is as easy as selecting or creating it. The Download theme button in the above screenshot takes us back to the download builder, which has the CSS and images for the new theme integrated into the download package.
If it's just the new theme we want, we can deselect the actual components and just download the theme. Once downloaded the css folder within the downloaded archive will contain a folder that has the name of the theme. We can simply drag this folder into our own local css folder, and then link to the stylesheet from our own pages.
We won't be looking at this tool in much detail throughout the book. We'll be focusing instead on the style rules that we need to manually override in our own stylesheet to generate the desired look of the examples.
Component categories
There are two types of components found within the jQuery UI library—low-level interaction helpers that are designed to work primarily with mouse events, and there are the widgets that produce visible objects on the page, which are designed to perform a specific function.
The interaction helpers category includes the following components:
The higher-level widgets included (at the time of writing) are as follows:
The ui.core.js file that is required by all other library components, comes under neither category, but could nevertheless be seen as the core component of the library. This file sets up the construct that all widgets use to function and adds some core functionality which is shared by all of the library components. This file isn't designed to be used standalone, and exposes no functionality that can be used outside of another component.
Apart from these components, there is also a series of UI effects that produce different animations or transitions on targeted elements on the page. These are excellent for adding flair and style to our pages, in addition to the strong functionality of the components. We'll be looking at these effects in the final chapter of the book.
I'd like to add here that the jQuery UI library is currently undergoing a rapid period of expansion and development. It is also constantly growing and evolving with bug fixes and feature enhancements continually being added. It would be impossible to keep entirely up-to-date with this aggressive expansion and cover components that are literally about to be released.
The great thing about jQuery UI's simplified API is that once you have learned to use all of the existing components (as this book will show you), you'll be able to pick up any new components very quickly. As this book is being written, there are already a number of new components nearing release, with many more in the pipeline and all of these components will automatically be ThemeRoller-ready.
Browser support
Like jQuery itself, jQuery UI supports all of the major browsers in use today including the following:
This is by no means a comprehensive list, but I think that it includes the most common browsers currently in use, making jQuery UI very well supported.
The widgets are built from semantically correct HTML elements generated as needed by the components. Therefore, we won't see excessive or unnecessary elements being created or used.
Book examples
The library is as flexible as standard JavaScript, and by this I mean that there is often more than one way of doing the same thing, or achieving the same end. For example, the callback properties used in the configuration objects for different components, can usually take either references to functions or inline anonymous functions, and use them with equal ease and efficiency.
In practice, it is advisable to keep your code as minimal as possible (which jQuery really helps with anyway). But to make the examples more readable and understandable, we'll be separating as much of the code as possible into discrete modules. Therefore, callback functions and configuration objects will be defined separately from the code that calls or uses them.
To reduce the number of files that we have to create and work with, all of the JavaScript will go into the host HTML page on which it runs, as opposed to in separate files. Please keep in mind that this is not advisable for production websites. I'd also just like to make it clear that the main aim throughout the course of this book is to learn how to use the different components that make up jQuery UI. If an example seems a little convoluted, it may simply be that this is the easiest way to expose the functionality of a particular method or property, as opposed to a situation that we would find ourselves coding for in regular implementations.
Library licensing
Like jQuery, the jQuery UI library is dual licensed under the MIT and GPL open source licenses. These are both very unrestrictive licenses that allow the creators of the library to take credit for its production and retain intellectual rights over it, without preventing us as developers from using the library in any way that we like.
The MIT license explicitly states that users of the software (jQuery UI in this case) are free to use, copy, merge, modify, publish, distribute, sublicense, and sell. This lets us do pretty much whatever we want with the library.
The only requirement imposed by this license is that we must keep the original copyright and warranty statements intact.
This is an important point to make. You can take the library and do whatever you like with it. Build applications on top of the library and then sell those applications, or give them away for free. Put the library in embedded systems like cell phone OSs and sell those. But whatever you do, leave the original text file with John Resig's name in it present. You may also duplicate it word for word in the help files or documentation of your application.
The MIT license is very lenient, but because it is not copyrighted itself, we are free to change it. We could therefore demand that users of our software give attribution to us instead of the jQuery team, or pass off the code as our own.
The GPL license is copyrighted, and offers an additional layer of protection for the library's creators and the users of our software. jQuery is provided free and open source and the GPL license ensures that it will always remain free and open source, regardless of the environment it may end up in, and that the original creators of the library are given the credit they deserve. Again, the original GPL license file must be available within your application.
The licenses are not there to restrict us in any way and are not the same as the kind of license that comes with software you might install on your computer. In most cases, how the library is licensed will not be a consideration when using it.
Summary
jQuery UI removes the difficulty of building engaging and effective user interfaces. It provides a range of components that can quickly and easily be used out of the box with little configuration. They each expose a comprehensive set of properties and methods for integration with your pages or applications if a more complex configuration is required.
Each component is designed to be efficient, lightweight, and semantically correct along with making use of the latest object-oriented features of JavaScript. When combined with jQuery, it provides an awesome addition to any web developer's toolkit.
So far, we've seen how the library can be obtained, how your system can be set up to utilize it, and how the library is structured. We've also looked at how the different widgets can be themed or customized, how the API simply and consistently exposes the library's functionality, and the different categories of component.
We've covered some important topics during the course of this chapter, but now, thankfully, we can get on with using the components of jQuery UI and get down to some proper coding!
Chapter 2. The CSS Framework
Version 1.7 of jQuery UI (the latest release at the time of writing) was an exciting release because it introduced the comprehensive new CSS framework. All widgets are effectively and consistently themed by the framework. There are many helper classes that we can use in our implementations, even if we aren't using any of the library components.
In this chapter we'll be covering the following subjects:
The files that make up the framework
There are two locations within the library's structure where the CSS files that make the framework reside. They are:
This folder holds the complete CSS framework, including the theme that was selected when the download package was built. All the necessary CSS has been placed in a single, lean, and mean stylesheet to minimize HTTP requests in production environments.
This version of the framework will contain styles for all the components that were selected in the download builder, so its size will vary depending on how much of the library is being used. The full version of each theme weighs in at 26.7 Kb and is not compressed.
The themes folderAnother version of the framework exists within the development-bundle\themes folder. Two themes are provided in this folder—the base theme and whichever theme was selected when the library was downloaded. The base theme is a grey, neutral theme identical to smoothness.
Within each of these theme folders are all the individual files that make up the framework. Each of the different components of the framework are split into their own respective files.
Component
Use
ui.all.css
All the required files for a theme can be linked by using this file in development. It consists of @import directives that pull in the ui.base.css and the ui.theme.css files.
ui.base.css
This file is used by ui.all.css. It also contains @import directives that pull in the ui.core.css file, as well as each of the widget CSS files. However, it contains none of the theme styles that control each widget's appearance.
ui.core.css
This file provides core framework styles such as the clear-fix helper and a generic overlay.
ui.accordion.css
These files are the individual source files that control the layout and basic appearance of each widget.
ui.datepicker.css
ui.dialog.css
ui.progressbar.css
ui.resizable.css
ui.slider.css
ui.tabs.css
ui.theme.css
This file contains the complete theme and targets of all the visual elements that make up each widget in the library.
Let's take a look at each of these files in more detail.
ui.all.css
The all file makes use of CSS imports using the @import rule to read in two files—the ui.base.css file and the ui.theme.css file. This is all that is present in the file and all that is needed to implement the complete framework and the selected theme. From the two directives found in this file, we can see the separation between the part of the framework that makes the widgets function and the theme that gives them their visual appearance.
ui.base.css
This file also consists of only @import rules, and imports the ui.core.css file along with each of the individual widget files. At this point I should mention that the Resizable component has its own framework file, along with each of the widgets.
ui.core.css
The core file provides generic styles for the framework that are used by all components. It contains the following classes:
Class
Use
.ui-helper-hidden
Hides elements with display:none.
.ui-helper-hidden-accessible
Hides elements by positioning them offscreen so that they are still accessible to assistive technology.
.ui-helper-reset
This is the reset mechanism for jQuery UI (it doesn't use a separate reset stylesheet), which neutralizes the margins, padding, and other common default styles applied to common elements by browsers. For an introduction to see the importance of resetting default browser styling, visit: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
.ui-helper-clearfix:after
These classes provide a cross-browser solution for automatically clearing floats. Whenever an element is floated, this class is added to its parent container to clear the float.
.ui-helper-clearfix
* html .ui-helper-clearfix
.ui-helper-clearfix
.ui-helper-zfix
The .ui-helper-zfix class provides rules that are applied to iframe elements in order to fix z-index issues when overlays are used.
.ui-state-disabled
This class sets the cursor to default for disabled elements and uses the !important directive to ensure that it is not overridden.
.ui-icon
This rule is the library's method of replacing the text content of an element with a background image. The responsibility of setting the background images for the different icons found in the library is delegated to the ui.theme.css file and not here.
.ui-widget-overlay
This class sets the basic style properties of the overlay that is applied to the page when dialogs and other modal pop ups are shown. As images are used by the overlay, some styles for this class are also found in the theme file.
The core file lays the ground for the rest of the framework. We can also give these class names to our own elements to clear floats or hide elements whenever we use the library.
