A Brief Introduction to Yahoo Yui

Yui is Yahoo! The abbreviation of user interface is Yahoo! The developed tool library contains a variety of program tools, function libraries, and webpage operation interfaces, allowing you to quickly develop highly interactive and rich website applications, especially those web pages that use Dom, DHTML, and Ajax. All Yui uses javas.It is an open source software that is publicly available for free.
Why should I use Yui?

At present, Yui is still developing. The latest version is 2.0x. You can download all the suites on the official website of Yui, as well as detailed description files. Currently, almost all Yui resources are in English.

One of the most important functions of Yui is to help reduce the differences between different browser, so that you can use only one method to access all browser, it can also reduce the memory-consuming problem of IE.
Therefore, Yui is indispensable! Yui will be widely used in future examples.
Yui family member

Yui contains many things, which can be roughly divided into three parts: tool function libraries, CSS tools, and operation interface libraries. The content of each item is described as follows:
Tool Library (Yui library utilities ):

The Yahoo Global Object: this is the core object of Yui. Each page that uses Yui must first load this object. It is mainly used to provide a single namespace for all programs in the Yui and some common object methods ).

Event utility: An event tool used to handle events on a webpage, such as mouse pressing, mouse passing, and form sending... And so on. It also provides the ability to listen to events and customize events.

Dom collection: Dom tool. When you want to dynamically change elements in a Webpage Through Dom, especially for dynamically changing CSS styles and avoiding differences between different browser, this tool is very useful.

Connection Manager: A Connection Management Program. Ajax is required! This tool greatly simplifies the use of XMLHttpRequest objects.

Drag and Drop utility: Drag tool. Do you want to create an operation interface that can be dragged by mouse on the webpage? That's it! I have not tried the new version of Yahoo! Mailbox? You can drag and drop it like Outlook!

Animation utility: an animation tool. Do you want to add an animation effect to a webpage, but do not rely on flash? This tool is used for animation effects such as movement, scaling, and alpha (fade in and out. From now on, it's much easier to use DHTML for animation!

 

CSS tools (Yui library CSS tools ):

CSS page grids: a webpage layout tool. Do you often have a headache when using CSS to cut pages? With this tool, you don't have to worry about the layout of two, three, or multiple columns!

CSS fonts: a font tool that unifies fonts, spacing, and other styles for different browser widgets to avoid differences between different browser widgets.

CSS Reset: This is also used to unify the differences between different browser, but for all the webpage element styles.

 

Operation interface library (Yui library controls ):

AutoComplete: Automatic completion.

Calendar: Calendar.

Container: container? Contains modules, overlapping layers, panels, tooltip, dialog boxes, and simple dialog boxes. The user interface used to design an application is displayed.

Logger: provides a simple way to read and write messages in the code, which is very convenient for debugging. Stop using stupid alert!

Menu: menu. It is easy to choose from common menus, pop-up menus, and right-click menus.

Slider: A slide slider that can be pulled. For example, this slide slider is used to set the inside of a blog and adjust the transparency.

Treeview: tree menu. Do you want to create a tree menu like the archive manager? Or you can expand the menu in multiple layers. There are ready-made items available for you!

 

Go to Yui's official website to check out?

Css basics (CSS tools) Although CSS is easy to use, when you are very familiar with it, you will find many problems, such as Yahoo! Someone is writing a CSS architecture. You can regard Yui as the foundation necessary for a webpage: it helps you solve the problem of different preset styles, font sizes, and even complicated typographical solutions for each browser. I strongly recommend that you use this tool (you can refer to the link below) and embed it on every webpage as the foundation!

JavasCore: If you ask me about javasWhat are the most commonly used functions of notebook? My answer is event processing, DOM object acquisition and setting, and browser detection! However, these basic functions have different practices in different browser browsers. They are really big, because no matter what you write, you have to solve the problem of cross-browser, this will increase the code backup! Yui knows the pain of developers and develops other functions to pack these core functions effectively and effectively.
Remember that any function of Yui must contain the core Yahoo, event, and Dom library!

JavasIn addition to core functions, the developers tool group (utilities) provides advanced functions such as animation effects, drag, and Ajax. Yui wraps these functions like a Swiss knife, which is lightweight and easy to use.
It is worth mentioning that the method of getting DOM objects using CSS and XPath syntax is also implemented in the select tool group. If you like jquery, you can consider switching:-D.

JavasThe controls/widgets Control item is different from the tool group in that it has an interface, while the Yui tool group has no and only has functionality. Like you are on Yahoo! During the typing search, some search suggestions and the page selection group in the middle, and common HTML editors belong to this category.
Starting from 2.4.0, Yui provides chart control items, using the same javasThanks, you can easily generate a chart made of flash. Such a mix is so awesome!