Download the X distribution file and unzip it into the folder of your choice. Be sure to select the "Use folder names" option when unzipping. After unzipping you will find a folder named Cross-Browser.com
which has several sub-folders. In this root folder you will find a web page, index.html
, which serves as the index for the distribution package.
Under the root folder Cross-Browser.com
are the following sub-folders.
/templates/ General-purpose template files.
/x/ Prebuilt library files: x_core.js
, x_event.js
and x.js
(which is the other two combined).
/x/docs/ X Library documentation files.
/x/examples/ Examples that demonstrate the use of X.
/x/lib/ This is the actual library. It contains all XML and Javascript source files for the X Library.
/x/xc/ Contains executable, source code and project files for the X Tools.
There are very many .js
files in the distribution package. This section summarizes their purposes.
This folder contains a general-purpose, prebuilt library file. In almost every application there will be X functions that you always need. This file contains some of the most commonly used X functions. This file does not constitute the entire X Library itself, which is located in the directory /x/lib/
.
The prebuilt library file "x.js" contains the following X functions. Click a link to see that symbol in the online X Viewer.
NOTE: The files "x_core.js" and "x_event.js" are now combined into "x.js".
x.js xGetElementById, xGetElementsByTagName, xGetElementsByClassName, xMoveTo, xLeft, xTop, xPageX, xPageY, xScrollLeft, xScrollTop, xHasPoint, xResizeTo, xWidth, xHeight, xClientWidth, xClientHeight, xStyle, xOpacity, xGetComputedStyle, xCamelize, xDef, xStr, xNum, xLibrary. xAddEventListener, xRemoveEventListener, xEvent, xStopPropagation, xPreventDefault, xEachId, xEachNum, xOffset.
This folder contains the actual library. It contains .xml
and .js
files. There is an XML file and a Javascript file for every symbol in the library. So, the X Library is not made up of a few files which each contain many functions and objects. All the functions and objects (symbols) in the X Library are each in individual files. This separation into individual files, along with the dependency information in the XML file, allows you to create a library file which only contains the X symbols your application uses. XC completely automates this task.
Read more about the structure of X. Use the online X Viewer to browse the sources and documentation for all X Library symbols.
Start with a copy of one of the template files, or visit one of the demos online and save it as HTML on your computer. For example, make a copy of "html5_template.html" and place it in the x/examples
directory. This file has a script element which loads the "x.js" file, and has another script element in which a listener is registered for the load
event. If you need a function which is not in "x.js" use the online X Viewer to look for it. Add another script element to your HTML file which loads the file from the x/lib
directory.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Template</title> <meta name="author" content="Author"> <meta name="description" content="Description"> <link rel="stylesheet" type="text/css" href=""> <style type="text/css"> </style> <script type="text/javascript" src="../x.js"></script> <script type="text/javascript"> xAddEventListener(window, 'load', function() { }, false ); </script> </head> <body> </body> </html>
Also take a look at the X Tutorial.