This space is an archive space for documentation related to old versions of Fluid Infusion (i.e. versions before 1.3). For documentation related to the latest Infusion, see Infusion Documentation.
Tutorial - Layout Customizer 0.5 Migration
Initialization
The initialization of the Layout Reorderer now uses the function fluid.reorderLayout().
If you used to have... | Now you would have... |
|---|---|
fluid.initLayoutCustomizer(containerSelector,
layoutSelectors,
orderChangedCallback,
options);
|
fluid.reorderLayout(container, options);
|
The specific changes are as follows:
the
containerparameter can now bea CSS-based selector
a single-element jQuery object, or
a DOM element
the
itemSelectorandorderChangeCallbackare now specified through theoptionsparamter
Layout Selectors
Instead of passing selectors identifying the columns and modules as parameters to reorderLayout(), the selectors are specified using the selectors option.
If you used to have... | Now you would have... |
|---|---|
var layout = {
columns: "td",
modules: "td > div"
};
fluid.initLayoutCustomiser("#modules-root", layout);
|
var opts = {
selectors: {
columns: "td",
modules: "td > div"
}
};
fluid.reorderLayout("#modules-root", opts);
|
Order-changed Callback
Instead of passing an order-changed callback function as a parameter to reorderLayout(), the callback is specified using the events option, in particular the afterMove event.
If you used to have... | Now you would have... |
|---|---|
var myCallback = function() {
...
};
fluid.initLayoutCustomizer(myElem, layout, myCallback);
|
var myCallback = function() {
...
};
var options = {
selectors: {
columns: "td",
modules: "td > div"
},
events: {
afterMove: myCallback
}
};
fluid.reorderLayout(myElem, options);
|
Options
Changes have been made to the format of the options object:
cssClassNames
The cssClassNames option has been renamed to styles:
If you used to have... | Now you would have... |
|---|---|
var myClasses = {
defaultStyle: "plain",
selected: "selected",
dragging: "dragging
};
var opts = {
cssClassName: myClasses
};
fluid.initLayoutCustomizer(myLayoutSel, myPerms, myCallback, opts);
|
var myClasses = {
defaultStyle: "plain",
selected: "selected",
dragging: "dragging
};
var opts = {
styles: myClasses
};
fluid.reorderLayout(myLayoutSel, opts);
|