HTML5, CSS3 and JavaScript Metro Style Tiles

Welcome to AcidJs.Tiles!

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the Windows 8 Metro tiles in terms of look and feel, functionality and behaviors and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like 3D CSS3 animations. The tiles can be used as placeholder of virtually anything - from simple text, to sophisticated markup and forms.

Mouseover the top, right, bottom and left sides of each tile to experience the animations.

One of the coolest possible applications of AcidJs.Tiles could be found on this page.

Table of Contents

Documentation and API

Since AcidJs.Tiles makes async calls to load certain assets, this demo page should be deployed on a web-server, because ajax calls will not work if done from the local file system. For better insight and understanding of configuration, usage and trouble shooing AcidJs.Tiles, please reload the page and use your browser's console, development tools and the source code of the demos.

Adding AcidJs.Tiles to the Page

1. Copy the AcidJs.Tiles/ folder into the root* directory of your website.

2. Add the JavaScript runtime of AcidJs.Tiles at the bottom of the page, just before the closing </body> tag. You may also want to upgrade jQuery to it's latest version.

<script src="AcidJs.Tiles/lib/jQuery/jquery-1.10.2.min.js"></script>
<script src="AcidJs.Tiles/classes/Tiles.js"></script>
            

* If you would like, you can copy the AcidJs.Tiles/ folder as a child of another folder. In such cases you will have to use the appRoot configuration property in order to instruct the script runtime of the component to resolve correctly paths to assets, which are loaded automatically.

3. Create an empty <div id="tiles-1"></div> on the page. This element will be used to render the tiles. You can have as many tile list as you need, just make sure you supply the placeholders with unique ID's.

4. Copy the code below in a <script></script> tag after the scripts you've added in Step 1 and keep reading this manual or refer to the source code of this page.

Configuration

To create your first tiles list, use the code below and check the comments next to each property to learn how to set different options.

// instantiate the "Welcome to AcidJs.Tiles" tiles list in div#tiles-1
window.tiles1 = new window.AcidJs.Tiles({
    appRoot: "", // [optional] default: ""; If the AcidJs.Tiles/ folder is not in the root of your website, you should set the "path/to/it/here/"
    title: "Welcome to AcidJs.Tiles", // default: ""; [optional] Tiles list title.
    boundingBox: $("#tiles-1"), // [required] default: null; The element, which will be used as a rendering node (div#tiles)
    tileSize: 128, // [optional] default: 256; Height and with of a normal sized tile in pixels.
    bgColor: "#fff", // [optional] default: "#fff"; Tiles list background color.
    tileSpacing: 2, // [optional] default: 2; Space between tiles in pixels.
    breakAfter: 4, // [optional] default: 4; Used to calculate the width of the tiles list (tileSize + tileSpacing * breakAfter)
    tileBgColor: "random", // {HexColorString|"random"} [optional] default: "#2d89f0"; Default tile color. If "random" is set, each tile color will be different, unless defined explicitly in the "tiles" array
    cssClasses: [ // [optional] default: []; Array of additional CSS classes that can be added to the boundingBox element
        "additional-bounding-box-css-class-00",
        "additional-bounding-box-css-class-01"
    ],
    onRendered: function(data) { // Optional callback, which will be executed when the tiles list is fully rendered. Returns the "tiles" array and the boundingBox DOM node
        window.console.log("[callback] onRendered", data);
    },
    // Tiles array
    tiles: [{
        bgColor: "#ff651d", // [optional] background color of the tile. If not set, the value of tileBgColor will be used (hex color or random)
        cssClasses: [ // [optional] Additional CSS classes that can be applied to that particular tile.
            "icon",
            "html5",
            "acidjs-tiles-tile-clickable"
        ]
    },{
        content: "", // [optional] default: "". Content of the tile. You can add anything here or you can use the setTileContent(id, content) method to programmatically add/change the content of a tile
        bgColor: "#008fd4",
        cssClasses: [
            "icon",
            "css3",
            "acidjs-tiles-tile-clickable"
        ]
    },{
        bgColor: "#0769ad",
        cssClasses: [
            "icon",
            "jquery",
            "acidjs-tiles-tile-clickable"
        ],
        size: "half"
    },{
        bgColor: "#2f343a",
        cssClasses: [
            "icon",
            "wms",
            "acidjs-tiles-tile-clickable"
        ],
        size: "half" // [optional] Size of the tile. If not set, the tileSize will be used. "half" will set tileSize / 2, "double" will set tileSize * 2
    },{
        content: "",
        size: "half"
    },{
        content: "",
        size: "half"
    },{
        content: "",
        //sizeHorizontal: "half", // [optional] Half the horizontal size if "size" is "double"
        sizeVertical: "half" // [optional] Half the vertical size size if "size" is "double"
    },{
        content: "",
        sizeVertical: "half"
    },{
        content: "",
        size: "double",
        bgColor: "#006ac1"
    },{
        bgColor: "#2f343a",
        cssClasses: [
            "icon",
            "wemakesites"
        ]
    },{
        bgColor: "#2f343a",
        cssClasses: [
            "icon",
            "cat"
        ]
    },{
        content: ""
    },{
        content: ""
    }]
});

// Listen to the "acidjs-tiles-rendered" of tiles1 and execute custom code
window.tiles1.boundingBox.on("acidjs-tiles-rendered", function(e, data) {
    window.tiles1.log("[event]", e.type, data);
    window.tiles1.setTileContent(8, "

AcidJs.Tiles is just a placeholder, which you can use to add virtually anything. From simple text, to complex HTML and form controls.

Each tile is fully customizable, and you can listen to the \"acidjs-tiles-rendered\" and \"acidjs-tiles-tile-clicked\" events to do your fancy stuff.

Check the source code and documentation on this page to discover everything.

"); }); // Listen to the "acidjs-tiles-tile-clicked" of tiles1 and execute custom code window.tiles1.boundingBox.on("acidjs-tiles-tile-clicked", function(e, data) { window.tiles1.log("[event]", e.type, data); if(links[data.tileId]) { window.open(links[data.tileId], "_blank"); } }); // render tiles1 window.tiles1.init();

Methods

init()

The main rendering method of AcidJs.Tiles. You can call it right after you have instantiated a tiles object or asynchronously at a later stage.

// render window.tiles1
window.tiles1.init();            
            

setTileContent(id, content)

Programmatically set html content to a tile by it's zero-index id.

// set content to the first tile (0)
window.tiles1.setTileContent(0, "

Lorem ipsum dolor...

";

getBoundingBox()

The method returns the rendering node (boundingBox) of the tiles list.

// get the boundingBox of window.tiles1
window.tiles1.getBoundingBox();
            

getTileById(id)

The method will return the content node of a tile, defined by it's zero-index id.

// get the DOM node of second tile (1)
window.tiles1.getTileById(1);      
            

disableTile(id)

Use this method to disable a tile, defined by it's zero-index id programmaticaly by adding the acidjs-tiles-tile-disabled CSS class to it.

This method is not available in the free version of the component.

// disable the second tile (1)
window.tiles1.disableTile(1);
            

enableTile(id)

Use this method to enable a tile, defined by it's zero-index id programmaticaly. The method will kick-in, if that tile has already been disabled by the disableTile(id) method or if the acidjs-tiles-tile-disabled CSS class has been applied to it in the cssClasses array of the tile configuration.

This method is not available in the free version of the component.

// enable the second tile (1)
window.tiles1.enableTile(1);
            

getData()

The method returns an object, containing the boundingBox and the tiles array of a tiles list.

// get the DTO of window.tiles1
window.tiles1.getData();
            

destroy()

Use this method to fully dispose a tiles list. Once the method is executed, the html of a tiles list will be removed and all event handlers - unbound.

This method is not available in the free version of the component.

// Dispose window.tiles1
window.tiles1.destroy();
            

log(arguments)

Safe utilization of browser's console.log(arguments), which can be used for debugging.

// log a console message
window.tiles1.log("AcidJs.Tiles rocks!");
            

Callbacks

onRendered(Function)

This is an optional function, set in the configuration object that can be executed when a tiles list is rendered (when the "acidjs-tiles-rendered") event is triggered.

// Optional callback, which will be executed when the tiles list is fully rendered. Returns the "tiles" array and the boundingBox DOM node
onRendered: function(data) {
    window.console.log("[callback] onRendered", data);
}
            

Events

"acidjs-tiles-rendered"

The event is triggered when a tiles list is fully initialized and rendered in it's boundingBox. It can be listened to like this:

// Listen to the "acidjs-tiles-rendered" of tiles1 and execute custom code
window.tiles1.boundingBox.on("acidjs-tiles-rendered", function(e, data) {
    window.tiles1.log("[event]", e.type, data);
    window.tiles1.setTileContent(8, "

AcidJs.Tiles is just a placeholder, which you can use to add virtually anything...

"); });

"acidjs-tiles-tile-clicked"

The event is triggered on tile click, and returns an object, containing the clicked tileId, the boundingBox DOM node and the tiles array. It can be listened to like this:

// Listen to the "acidjs-tiles-tile-clicked" of tiles1 and execute custom code
window.tiles1.boundingBox.on("acidjs-tiles-tile-clicked", function(e, data) {
    window.tiles1.log("[event]", e.type, data);
    if(links[data.tileId]) {
        window.open(links[data.tileId], "_blank");
    }
});
            

Auxiliary CSS Classes

The AcidJs.Tiles/styles/Tiles.css class contains a several predefined CSS classes that you can use straight out of the box by defining them in the cssClasses array of the tile configuration:

Supported Browsers

List of the currently supported browsers.

* Older versions of Internet Explorer are also supported, but due to the lack of proper CSS3 support the look and feel is slightly different.

Differences Between the Trial and the Full Versions

The trial version of AcidJs.Tiles is for testing purposes only and using it on a production domain is strictly forbidden. Apart from that, only the first 3 tiles are enabled and some API methods are not included.

If you wish to unlock the full version of AcidJs.Tiles and use it on a live server, you need to purchase a license.