[Yui] [translation] Yahoo! User Interface Libray

Document directory

• Chapter 1 Introduction
• Chapter 2 component Introduction

[Yui] Yahoo! User Interface Libray

-Written by prodigal son @ cnblogs.com (06-08-21)

Chapter 1 Introduction

Yahoo! User Interface Library (yui) is a tool and control Library written in JavaScript. It uses DOM scripts, DHTML, and AJAX to construct Web programs with rich interaction functions. Yui also contains several core CSS files. All components in yui have been released as open source. They comply with the BSD Protocol and are free to use. You can download the complete project file from the Sourceforge site, including related documents and examples.

Yui project developer's BLOG: YUI Blog, communication community: ydn-javaScript on Yahoo! Groups.

Preparations:

1. Download yui

The yui project file has been published on the Sourceforge site. The file contains relevant documents, examples, and code.

Note: Yahoo does not provide a free running environment for yui running. You need to run it on an out-of-the-box Web server.

2. Add the class library file you need To Your webpage.

To use the components in yui, you must use <script> to specify the library file address of the related components in your page file. If the component depends on other components, you must use <script> to specify the library file address of the dependent component.

3. Add a CSS file to the page if necessary.

Some yui controls contain a corresponding CSS file to set the style of the control. In this case, you must use <style> to specify the address of the corresponding CSS file on the page. You can modify the corresponding CSS file to achieve the desired effect.

4. Browse related documents and Examples

Each component contains detailed API documentation and provides common examples. After learning, let's review all the APIS, so you can be aware of them. Because the quality of API understanding will affect your use of yui.

 

Chapter 2 component Introduction

Yui components are divided into two categories: Toolkit and control library

Yui Toolkit

The Yui toolkit uses DOM scripts to simplify in-browser devolvement development in the browser, and uses the features of DHTML and AJAX to develop all Web programs.

Animation: create a "cinematic effects" on your page by specifying the position, size, transparency, or other features of the page element )". These effects will give users a better experience when your page changes.

Connection Manager: This toolkit helps you manage XMLHttpRequest (usually called AJAX) transactions. It provides error handling for form submission) and callbacks. This toolkit also supports file upload management.

DOM: the DOM toolkit provides a simpler way to call DOM scripts, including the management of element positions and CSS styles.

Drag and Drop: Creates Drag-and-Drop objects. To provide rich interaction functions (such as dragging an object to the target location), you may need to write a lot of code. This Toolkit can capture all operational transactions in all supported browsers and ensure their stable operation.

Event: This magic Management Library provides you with a simple and secure way to access browser events (such as click and keyboard operations ). This event package also contains Custom Event objects, which provide a mechanism for publishing and subscribing to events for your program interaction.

 

Yui control:

The yui control library provides a set of highly interactive visual elements for your page. These elements are completely created and maintained on the client, and you do not need to request the server to refresh the page.

These controls include:

AutoComplete control: the AutoComplete control provides a progressive user experience (streamline user interactions) for text input ). The control provides a list of similar items and a type-ahead functionality based on a variety of data-source formats ), you can also use XMLHttpRequest to access data on the server.

Calendar control: a dynamic graphical Control for date selection.

Container controls: A group of controls that mimic windows styles, including Tooltip, Panel, Dialog, and SimpleDialog. The Module and Overlay controls provide an extensible platform for you to control custom controls that mimic windows styles.

Logger control: provides a fast and simple way to record logs. It directly outputs log information to the on-screen console and FireBug, an extension component of Firefox, or the Javascript console of Safari. The Debug component of yui completely records the output and debugging information.

Menu Control: This control can be used to design a dynamic Menu with just a few lines of simple code. You can use javascript to construct a menu, which can be layered on top of semantic unordered lists.

Slider control: provides a slide widget that allows you to change the Slider position within a certain range (X axis, Y axis.

TreeView control: provides a node-scalable tree control. Nodes can be links, custom attributes, and can be dynamically loaded. You can modify the display of node elements through CSS, such as the folder view, TO-DO task list, or other visual processing.

 

Chapter 3 CSS resources of yui

In order to make CSS conform to browser (A-Grade browsers) Standards of different levels, we think A lot. We share these as part of the yui class library, hoping to be promoted here for a concise, maintainable and outstanding design in the browser.

Page grid style (CSS Page Grids): seven basic Page frameworks that use css to organize sub-components, supporting 130 different Page la S.

Standard CSS Fonts: Standard cross-browser font style and size display.

Standard CSS Reset: These CSS statements are used to exclude blank parts of the page and the style of common elements is compatible with the display of various browsers.