The interaction helpers add basic mouse-based behaviors to any element; this allows you to create sortable lists, resize elements such as dialog boxes on the fly or even build functionality such as a drag-and-drop based shopping cart. The widgets are UI controls that bring the richness of desktop application functionality to the Web.
Each of the widgets can be fully customized, appearance and their behavior. When working with jQuery UI's widgets, you will come across the widget factory.
This literally creates the basis for all of the visible widgets exposed by the library. It implements the shared API common to all widgets, such as create and destroy methods, and provides the event callback logic.
We will cover the Widget Factory in detail later on in this chapter. Apart from these components and interaction helpers, there are 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.
We'll be looking at these effects in the final chapter of this book, Chapter 14 , UI Effects. 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.
There are plans for many more components in future versions, including a move to merge jQuery Mobile into the library! Users of IE7 may note that there are plans to drop support for this browser too; at the time of writing, this is currently scheduled for Version 1. 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. The library is as flexible as standard JavaScript. 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 events 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 can really help 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 options will be defined separately from the code that calls or uses them.
Throughout this book, we will separate JavaScript and CSS code into separate files; while this is overkill for the purposes of development work, it is 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 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 regular implementations.
I'd like to add here that the jQuery UI library is currently going through a rapid period of expansion, bug-fixing, and development. For this release, the jQuery team is focusing on bug-fixing to help make the library as stable as possible.
Over the longer term, the jQuery UI team is focusing on complete redesigns of each widget's API, ahead of adding a host of new widgets in future releases, and completing a planned merger with jQuery Mobile.
This is a very unrestrictive license that allows the creators to take credit for its production and retain intellectual rights over it, without preventing us developers from using the library in any way that we like on any type of site. 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. You can build applications on top of the library and then sell those applications or give them away for free.
You can put the library in embedded systems such as cell phone OSes and sell them. But whatever you do, leave the original text file with John Resig's name present on it. You can 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 can therefore demand that the users of our software give attribution to us instead of the jQuery team, or pass off the code as our own.
The license is not there to restrict us in any way and is not the same as the kind of license that comes with software that you might purchase and install on your own computer.
In most cases, how the library is licensed will not be a consideration when using it. Plugin authors, however, will want to ensure that their plugins are released under a similar license. Once you've worked with one of the components from the library, you'll instantly feel at home when working with any of the other components, since the methods of each component are called in exactly the same way.
The API for each component consists of a series of different methods. While these are all technically methods, it may be useful to categorize them based on their particular function.
This method is used to initialize the component and is simply the name of the component, followed by parentheses. I will refer to this throughout the book as the plugin method or the widget method. The destroy method can be used with any of the components to completely disable the widget being used and in most cases returns the underlying HTML to its original state. The option method is used by all components to get or set any configuration option after initialization. The enable and disable methods are used by most library components to enable or disable the component.
The widget method, exposed by all widgets, returns a reference to the current widget. Each component has one or more methods unique to that particular component that perform specialized functions. Methods are consistently called throughout each of the different components by passing the method that we'd like to call, as a simple string to the component's plugin method, with any arguments that the method accepts passed as strings after the method name.
For example, to call the destroy method of the accordion component, we would simply use the following code:. See how easy that was! Every single method that is exposed by all of the different components is called in this same simple way. Some methods such as standard JavaScript functions accept arguments that trigger different behavior in the component.
If we wanted to call the disable method on a particular tab in the tabs widget for example, we would use the following code:. The disable method, when used in conjunction with the tabs widget, accepts an integer that refers to the index of the individual tab within the widget.
Similarly, to enable the tab again we would use the enable method as shown in the following code:. Again, we supply an argument to modify how the method is used. Sometimes the arguments that are passed to the method vary between components. The accordion widget, for example, does not enable or disable individual accordion panels, only the whole widget, so no additional arguments following the method name are required.
The option method is slightly more complex than the other common methods, but it's also more powerful and is just as easy-to-use. The method is used to either get or set any configurable option after the component has been initialized. To use the option method in getter mode to retrieve the current value of an option, we could use the following code:. The previous code would return the current value of the navigation option of the accordion widget. So to trigger the getter mode, we just supply the option name that we'd like to retrieve.
In order to use the option method in the setter mode instead, we can supply the option name and the new value as arguments:.
The previous code would set the value of the navigation option to true. Note that an object literal can also be passed to the option method in order to set several different options at once. For example:. As you can see, although the option method gives us the power to use both the get and set configuration options, it still retains the same easy-to-use format of the other methods.
The API for each component also contains a rich event model that allows us to easily react to different interactions. Each component exposes its own set of unique custom events, yet the way in which these events are used is the same, regardless of which event is used. We have two ways of working with events in jQuery UI. Each component allows us to add callback functions that are executed when the specified event is fired, as values for configuration options.
For example, to use the select event of the tabs widget, which is fired every time a tab is selected, we could use the following code:. The name of the event is used as the option name and an anonymous function is used as the option value. We'll look at all of the individual events that are used with each component in later chapters. The other way of working with events is to use the jQuery's on method.
To use events in this way, we simply specify the name of the component followed by the name of the event:. Usually, but not always, callback functions used with the on method are executed after the event has been fired, while callbacks that are specified using configuration options are executed directly before the event is fired. The callback functions are called in the context of the DOMElement that triggered the event.
For example, in a tabs widget with several tabs, the select event will be triggered by the actual tab that is selected and not the tabs widget as a whole. This is extremely useful to us because it allows us to associate the event with a particular tab.
Some of the custom events fired by jQuery UI components are cancelable and if stopped, can be used to prevent certain actions from taking place. The best example of this which we'll look at later in the book is preventing a dialog widget from closing by returning false in the callback function of the beforeClose event:. If the arbitrary condition in this example was not met, false would be returned by the callback function and the dialog would remain open. This is an excellent and powerful feature that can give us fine-grained control over each widget's behavior.
An important feature of using any widget is its ability to accept callbacks. We can use callbacks to run anonymous functions that perform a specific task.
For example, we could fire an alert on screen each time a particular header is clicked in an Accordion widget. Any anonymous functions that we supply as callback functions to the different events automatically pass two arguments: the original, extended or modified event object, and an object containing useful information about the widget. The information contained in the second object varies between components.
As an example, let's take a look at a callback that could be implemented when using the Accordion widget:. Here we've passed the arguments to the function and used them to determine which accordion heading is open, before displaying the result on screen.
The same principle of passing these objects to any callback functions that we define applies to all components; we will cover this in detail in later chapters.
It provides a range of components that can be used quickly and easily out of the box with little configuration. Each component exposes a comprehensive set of properties and methods for integration with your pages or applications that can be leveraged if a more complex configuration is required. Each component is designed to be efficient, lightweight, and semantically correct, all while making use of the latest object-oriented features of JavaScript, and using a concise, well-tested framework.
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 we can add or customize a theme for different widgets, 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 we can get on with using the components of jQuery UI and get down to some proper coding, beginning with a look at the CSS framework. Alex Libby has a background in IT support. He has been involved in supporting end users for almost 20 years in a variety of different environments; a recent change in role now sees Alex working as an MVT test developer for a global distributor based in the UK.
By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife. About this book jQuery UI, the official UI widget library for jQuery, gives you a solid platform on which to build rich and engaging interfaces quickly, with maximum compatibility, stability, and effort.
Publication date: December Publisher Packt. Pages ISBN Chapter 1. Introducing jQuery UI. Downloading the library.
Note If you still need to support IE6 then the legacy Version 1. Using the hosted versions of jQuery UI. Setting up a development environment. Note The structure of the accompanying code download for this book will mirror the local environment we are creating. Understanding the structure of the library. A css folder A development-bundle folder A js folder An index.
Examining the folder structure in detail. A demos folder A docs folder An external folder A themes folder A ui folder.
Note If you select the Stable download option from the main page, you will find that the contents appear different—the Stable download option contains the contents of the development-bundle folder only, and the theme included by default is called Base. Working with ThemeRoller.
Tip Hosted Themes We don't even need to download a theme if we're using one of the themes available from the main site. Categorizing the component categories. Low-level interaction helpers : These components are designed to work primarily with mouse events Widgets : These components produces visible objects on the page Core components : These are the components that the other parts of the library rely on.
Core Widget Mouse Position. Draggable Droppable Resizable Selectable Sortable. Introducing the widget factory and effects. Browser support. Using the book examples. Library licensing. Privacy Policy. New eBooks. Search Engine. Create powerful front-end interfaces for your web applications with jQuery UI. This book is for front-end designers and developers that need to quickly learn how to use the jQuery UI User Interface Library.
Asterisk Gateway Interface 1. This book is intended for developers wishing to utilize Asterisk, system administrators wishing to gain better control over their Asterisk installation, and telephony service providers wishing to deploy Asterisk-based solutions to their infrastructure.
You are expected to have some experience with Asterisk and a basic understanding of programming. No knowledge of Asterisk programming is required Practical Asterisk 1.
0コメント