Layout Customizer API
This page is no longer valid. For information about the Layout Reorderer, see Layout Reorderer API.
layout
The layout object specifies the IDs of the DOM elements and the relationships between them.
For more information about the layout object, see the Layout Customizer - Layout and Permissions.
perms
The perms object is a two-dimensional array of binary numbers (i.e. 0s and 1s) describing any restrictions on where modules can be moved. If there are no restrictions, pass null for this parameter.
In the array,
each row describes the permissions for one module, i.e. the first row describes where the first module can or can't go
each column in that row describes the permissions for one of the drop targets, i.e. the first column refers to the first drop target, the second column refers to the second drop target, etc.
For details about drop targets and the perms object, see the Layout Customizer - Layout and Permissions.
orderChangedCallbackUrl
The orderChangedCallbackUrl is the URL that the Layout Customizer should use to communicate changes in the layout to the server. The Layout Customizer will POST the updated layout to the URL, and expects an updated perms object in response. If there are no restrictions on permissions, the perms object should contain all 1s (for details about the structure of the perms object, see the Layout Customizer - Layout and Permissions).
options
The options parameter is an optional collection of name-value pairs that configure the Layout Customizer:
Selectors
General options
Layout Customizer-specific options
Dependencies
The Layout Customizer dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:
<script type="text/javascript" src="Fluid-all.js"></script>
Alternatively, the individual file requirements are:
<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery/jARIA.js"></script>
<script type="text/javascript" src="jquery/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="jquery/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui.draggable.js"></script>
<script type="text/javascript" src="json/json2.js"></script>
<script type="text/javascript" src="fluid/Fluid.js"></script>
<script type="text/javascript" src="fluid/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="fluid/GeometricManager.js"></script>
<script type="text/javascript" src="fluid/Reorderer.js"></script>
<script type="text/javascript" src="fluid/LayourCustomizer.js"></script>
<script type="text/javascript" src="fluid/ModuleLayout.js"></script>