MooTools "Ten"-the expansion of windows and the colorful world

One. MooTools framework for Windows extension:

The browser's Window object itself provides many of our methods of acquiring or setting the properties of the browser itself, but we also know that because of the lack of uniformity of standards between the major browsers, many methods function in different ways, mootools for us to unify our most commonly used methods:

MooTools's Window.Base.js, the main implementation of the DOM tree creation completed event monitoring. Previously, we could often write JavaScript code at the end of the HTML code by adding the defer attribute to ensure that the HTML the JavaScript code is to manipulate is loaded before the JavaScript code (if not, JavaScript will not get the target element, but it still looks too cluttered and Pau is not the highest. In fact, like IE words can be based on the document's ReadyState attribute to determine the establishment of the tree of documents, and some browsers after the creation of the document tree will trigger the onload event, MooTools wrapped it up to form a unified custom event "Domready" , you can add the listener method for the Domready event to the window just as you would add other listeners:

Window.addevent (' Domready ', function () {

Alert (' The DOM is ready ');

});

NOTE:---This is why you always add events to the page by using the MooTools frame: window.addevent (' Domready ', function () {//operation content ...} The reason for the start. This ensures that the HTML the JavaScript code will manipulate is preceded by the JavaScript code mount (if not, JavaScript will not get the target element and error)

In addition, there is a quick way to effect the same as the above:

Window.ondomready (function (e) {

Alert (' DOM is ready!!! ');

});

MooTools's Window.Size.js provides a series of tool methods related to the size of the browser window.

Window extension methods:

GetWidth: Gets the window's current height (does not contain the scroll volume of the scroll bar, which is currently visible

View height)

GetHeight: Gets the current width of the window (does not contain the scroll of the scroll bar, that is, the current visibility width)

Getscrollwidth: Gets the window's current height (including the entire content area, which is also counted in the scrolling section)

Getscrollheight: Gets the current width of the window (contains the entire content area, which is also counted in the scrolling section)

Getscrollleft: Gets the horizontal offset of window scrolling

Getscrolltop: Gets the vertical offset of window scrolling

GetSize: Get the data provided by several methods above window, format:

{

' Size ': {' x ': This.getwidth (), ' Y ': This.getheight ()},

' Scrollsize ': {' x ': This.getscrollwidth (), ' Y ': This.getscrollheight ()},

' Scroll ': {' x ': This.getscrollleft (), ' Y ': This.getscrolltop ()}

}