qx.Website Overview¶
This page is an overview of qx.Website's capabilities. It collects the existing documentation and tries to show the big picture.
Basic Concept¶
The basic concept is simple. qx.Website offers one global object called q
(short for query). This global object's main task is to query the DOM using
selectors and offer convenience methods on the returned collection of elements.
q("#test").setStyle("color", "red");
As you can see in the example above, qx.Website's idea of API design is to have an explicit API with a clear scope and readable names. In most cases, methods come in pairs: a getter and a setter. Another API concept is chaining:
q("#test").setStyle("color", "red").appendTo(document.body);
Unless noted otherwise, methods return the collection for chaining, such as the
setStyle method in the example. It returns the collection created with
q("#test")
on which the append method is called.
q
also offers static utility functions. These functions are usually attached
to q in their own sub object. Let's take a look at a sample:
q.type.get(123); // returns "Number"
The sub object (which could also be called a namespace) in the sample is
type
and contains a function get
which will determine the type of a
given argument.
The code base of q
is organized in modules, as you can see in the API
viewer for qx.Desktop. Using the
generator, you can build your own library containing only the modules you need.
Similarly, it is possible to include your own modules into a single, optimized
file. Take a look at the Documentation of the qx.Website skeleton to learn more.
API Documentation¶
The best documentation is found in the API viewer for qx.Website. It offers a detailed documentation of all available methods, sorted into modules.
CSS Selector Support¶
qx.Website uses the same CSS selector engine as jQuery, which is called Sizzle. Please check the Sizzle Documentation for more details.
q("#id"); // query for id
q("div"); // query for all div's
Plugins¶
qx.Website supports a plugin mechanism. All modules are written as qx.Website plugins. For further details about how to write plugins, take a look at the plugins documentation.
Modules¶
qx.Website is divided into several modules. Besides using a single all-in-one
qx.Website script file (e.g. q-5.0.2.min.js
), which contains every
module, you can also use the modules separately, i.e. only those modules you
need (qx.Website splitted in n files). Note that you always need the core
module when you decide to use the modules separately. So for example you could
use q-core-5.0.2.min.js
, q-animation-5.0.2.min.js
and
q-cookie-5.0.2.min.js
together.