Tutorial - Layout Reorderer Selectors

Selectors

The Layout Reorderer needs to know which HTML elements are the containers, and which are the modules. This is accomplished using CSS selectors.

Default Selectors

Overriding the Default Selectors

If you don't want to use the default selectors, you can define your own, and pass them to the Layout Reorderer in the options parameter to the creator function.

Using the original example above (the one without the classes added), you might choose selectors that look like this:


var myOptions = {
    selectors: {
        columns: "#left-column, #right-column",
        modules: "#left-column>div, #right-column>div"
      }
}
var myLayoutReorderer = fluid.LayoutReorderer(container, myOptions);

Or, you might already have your own custom classes on the columns and modules, like this:


<div id="main-container">
    <div class="content-column">
        <div class="news-block">Module 1</div>
        <div class="news-block">Module 2</div>
        <div class="news-block">Module 3</div>
    </div>
    <div class="content-column">
        <div class="news-block">Module 4</div>
        <div class="news-block">Module 5</div>
    </div>
</div>

In this case, you can use these classes as your selectors, like this:


var myOptions = {
    selectors: {
        columns: ".content-column",
        modules: ".news-block"
      }
}
var myLayoutReorderer = fluid.LayoutReorderer(containerElement, myOptions);

So long as you use valid CSS selectors that identify all of your columns and modules, and provide them to the Layout Reorderer throught the options object, the Layout Reorderer will be able to figure it out.