Yahoo Yui Ajax Toolkit

Yui Introduction

Yahoo recently launched the Yui Ajax toolkit, and Yahoo published a series of Ajax design patterns. yahoo's sdks are Ajax sdks launched by Yahoo after it acquired multiple Web websites. The Code annotations are well written and the documents are rich and detailed.

Yui components are also constantly increasing. Yahoo sets up a Yahoo user group for Yui, and emails in the group are very active. Most of the questions are answered, which is more detailed and specific.

Yui is divided into two categories. One is Ajax components, which includes several sdks packaged for the underlying JavaScript, including connection, event, Dom, animation, and DND. it also includes a set of advanced JavaScript controls, including AutoComplete, calendar, container, menu, Slider, and Treeview.

Another type is several useful CSS files. One is CSS page grids, which can be used to easily deploy your webpage. The other two are standard CSS fonts and standard CSS reset, which can achieve consistent effects on fonts in different browsers.

Yahoo's Ajax design pattern is an article commonly used in current Web websites to improve user experience and enhance interaction effects. The format is similar to design pattern. sometimes some examples of websites or webpages are provided, of course, all of them are Yahoo's own websites. The javascript above may not be sorted into Yui, but they are also well-formatted JavaScript, there is no confusion.

Yui utilities (Connection Manager)

Yahoo's JavaScript files have a well-annotated version, a well-formatted version, and a version that removes comments and spaces. To learn more, see the source code. Of course, use the former, when using the web page, you can choose the latter.

1. Connection Manager

This toolkit is used to manage XMLHttpRequest. You can use this toolkit to query the status of the request being executed. You can register the correctly returned callback function and the error handling callback function, you can also conveniently collect and send form fields based on the provided form ID. The code below is the basic call form

VaR callback =

{

Success: function (RES) {/* success handler Code */}, // normal return Handler

Failure: function (RES) {/* failure handler Code */}, // Error Response Handler

Argument: [argument1, argument2, argument3] // variables that can be accessed in the success function and failure Function

}

VaR transaction = Yahoo. util. Connect. asyncrequest ('get', Surl, callback, null );

The following table lists the attribute values that can be obtained by the res parameter when the returned result is correct.

Attribute description

TID transaction representation of the HTTP request

HTTP status code returned by status

String Representation of the status code corresponding to statustext

GetResponseHeader [label] returns the HTTP header value identified by the label name.

String representation of all HTTP headers of getallresponseheader, separated by "\ n"

Responsetext returns a string representation of the content

XML Representation of responsexml returned content

Variables passed in the argument callback function

When an error is returned, you can use the attributes returned by Res.

Attribute description

TID transaction representation of the HTTP request

Status 0

Statustext "communication failure"

Variables passed in the argument callback function

If you want to send form data, use the following code:

Yahoo. util. Connect. setform (formid );

VaR cobj = Yahoo. util. Connect. asyncrequest ('post', 'HTTP: // www.yahoo.com ', callback );

Check whether the request has been processed

VaR cobj = Yahoo. util. Connect. asyncrequest ('get', 'HTTP: // www.yahoo.com ', callback );

VaR callstatus = Yahoo. util. Connect. iscallinprogress (cobj );

Timeout cancellation request

VaR cobj = Yahoo. util. Connect. asyncrequest ('get', Surl, callback );

SetTimeout ("yahoo. util. Connect. Abort (cobj)", 10000 );

Yui utilities (Event)

Using the event Toolkit can simplify the development of the event driver on the browser side. By using simple interfaces, you can customize the code to respond to DOM events and obtain various properties of the browser event object. Through the event toolkit, we can also customize our own events so that the page components can receive these events and respond.

Basic Event code

VaR oelement = Document. getelementbyid ("elementid"); // obtain the event Source

Function fncallback (e) {alert ("click");} // defines the callback function

Yahoo. util. event. addlistener (oelement, "click", fncallback); // registers the callback function. When the click event of oelement occurs, the fncallback function will be called.

// Or simply pass the ID Yahoo. util. event. addlistener ("elementid", "click", fncallback );

Register events that respond to multiple page elements

VaR IDs = ["el1", "EL2", "EL3"]; // This array can contain element IDs, element references, or a combination of the two.

Function fncallback (e) {alert (this. ID );}

Yahoo. util. event. addlistener (IDs, "click", fncallback );

The event package of Yui solves some practical problems. The elements on the first page are usually loaded after the event code is registered in javacrip. at this time, Yui will correctly delay registration, until the element with the specified ID can be accessed. Second, Microsoft's IE browser points to the window object in the event processing function, rather than the element where the event occurs. Yui also correctly transmits the source element of the event. Third, you can pass any object to the event handler.

Create and use custom events

1. Use the customerevent object to create your own event

Function testobj (name ){

This. Name = Name;

This. event1 = new Yahoo. util. customevent ("event1", this );

}

Yahoo. util. customevent = function (type, oscope );

Type indicates the string of the event type.

2. Register a response function for a Custom Event

Function consumer (name, testobj ){

This. Name = Name;

This. testobj = testobj;

This. testobj. event1.subscribe (this. onevent1, this );

}

3. Response Functions

Consumer. Prototype. onevent1 = function (type, argS, me ){

Alert ("this:" + this +

"\ N this. Name:" + this. Name +

"\ N type:" + Type +

"\ N ARGs [0]. Data:" + ARGs [0]. Data +

"\ N me. Name:" + me. Name );

}

4. Trigger custom events

Function testdata (data ){

This. Data = data;

}

VaR T1 = new testobj ("mytestobj1 ″);

VaR C1 = new consumer ("mytestconsumer1", T1 );

VaR d1 = new testdata ("mydata1 ″);

T1.event1. Fire (D1 );

Yui (DOM collection)

The Yui Dom toolkit shields various browser differences. The Dom Toolkit can be used to conveniently operate page elements, including controlling element coordinates and changing the CSS style of elements.

Obtain and set element coordinates

VaR Pos = Yahoo. util. Dom. getxy ('test ');

Yahoo. util. Dom. setxy ('target', POS );

Set the CSS attribute of an element

Yahoo. util. Dom. setstyle (['test', 'test2'], 'opacity ', 0.5 );

VaR opacity = Yahoo. util. Dom. getstyle ('test2', 'opacity ');

Obtain the window size for displaying the current document.

VaR viewport = [

Yahoo. util. Dom. getviewportwidth (),

Yahoo. util. Dom. getviewportheight ()

];

Get and set CSS-related attributes

Getelementbyclassname (classname, tagname, rootnode)

Hasclass (element, classname)

Addclass (element, classname)

Removeclass (element, classname)

Replaceclass (element, oldclassname, newclassname)