Using jquery (Intermediate), part 3rd: UI Projects

Brief introduction

The jquery UI project is an exciting jquery sub project that promises rapid growth in the next year. The UI library expands very quickly, much faster than the JQuery core library, because UI developers add a lot of features and fixes to each release. Interestingly, however, the UI package is a real collection of user interfaces, and can be divided into 3 main modules: Widgets, which contain pre-built customizable skin user interfaces that can be deployed directly to Web sites; effects (Effect), Very simple and intuitive things you can do on the page (for example, quiver and explosion); The last aspect of the UI package is that you can create your own "themes" for pre-built widgets that you download as if they were made specifically for your Web site.

The history of the JQuery UI project is interesting and more or less helpful in explaining why the project was built in this way and why the 3 parts of the library are so different. This UI library was only a few different plug-ins at the beginning of the year (that is, the end of 2007). The Plug-ins, which were popular at the time and downloaded many times, were created by a master of the JQuery community. They decided to merge these popular plug-ins into a larger plug-in and promote the official expansion of the JQuery core code. This led to the release of the UI version 1.5 in early 2008. However, after the merged UI plugin was released, the developers who tried to use the plug-in in their own code thought (or complained) that it was good, but the differences were too great. After all, these plug-ins are written by different developers who have their own style. Finally, the JQuery community decided to adjust the 3 plug-ins to give them a unified style. This results in the release of the 1.5.x version, which you can see in the history of the UI library.

However, with the release of the 1.6 version of the UI Library, all code refactoring will end and fulfill the promise of a UI library that is consistent in style and code. One drawback of this release is that the UI team decided to remove a few widgets from its code base to get the 1.6 release out early. Therefore, although the 1.5 version has 3 more widgets, the 1.6 version should be faster and simpler. You can consider whether this tradeoff is right for you, but do not expect deleted widgets to appear in future UI libraries.

We've reviewed the history of the UI library and now we can explore its benefits and see why the JQuery team is excited about it. What I personally find more exciting is the potential of the library. For developers who have used AWT in Java™ui, they certainly remember the excitement of introducing Swing, and with the introduction of a new set of widgets, can developers who interact with the user interface adapt? I compared the potential of the UI library to Swing because it was able to add a set of updated user interfaces to the Web design (that is, add more complex widgets to the web designer) and normalize their behavior. Therefore, although the current UI library contains fewer widgets, it is expected to add 10 to 20 new widgets within a year of release 1.6, which developers can use in WEB applications.

Installing the UI Library

Downloading and installing the UI library is not the same as installing the JQuery core code or plug-in. To reduce the need for network traffic and connectivity, the UI team has created a WEB application that allows you to select the UI library portions and compression options you need to use beforehand. You can then download the file directly. The benefit of this is that you can provide only the portion of the UI library you need to use to avoid impacting application performance. The disadvantage of doing this is that if you need to use a section that is not contained in a custom file, you will need to download the entire file again. It's like our life, every coin has two sides.

Effects

The effects module in the UI library contains "interesting" things that can manipulate page elements. I describe them as "interesting" because they are, in general, a random collection of effects. This is similar to browsing through all the effects of microsoft®powerpoint and then making a small number of JavaScript effects. How this small part of the effect is chosen, we do not know at all. How useful these cool effects are for professional Web applications remains to be judged, but the question I'm asking is where and when to use them.

The good news, though, is that they are easy to use. The first set of effects helps you hide/show page elements. They simply extend the built-in hide () and show () functions of the JQuery library, allowing you to specify the type of hidden/displayed effect. Your mind may already have the effect I am talking about, and I will demonstrate the puff effect in Figure 1 through the process diagram, showing the front, middle, and the second 3 phases respectively.

Figure 1. Puff Sample