<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>gridmanager.js : Options Reference</title>
<meta name="description" content="Structural editor for rows and columns in popular CSS frameworks">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link rel="stylesheet" href="/jQuery-gridmanager/docs/css/syntax.css">
<link rel="stylesheet" href="/jQuery-gridmanager/docs/css/main.css">
</head>
<body>
<div class="container">
<div class=row-fluid>
<div id=header class=span12>
<h4><a class=brand href="/jQuery-gridmanager/docs/">gridmanager.js</a>
<small>Structural editor for rows and columns in popular CSS frameworks</small>
</h4>
</div>
</div>
<div class=row-fluid>
<div id=navigation class=span2>
<ul class="nav nav-list">
<li><a href="/jQuery-gridmanager/docs/">Home</a></li>
<li class=nav-header>Documentation</li>
<li data-order=""><a href="/jQuery-gridmanager/docs/doc/installation.html">Installation</a></li>
<li class=nav-header>Examples</li>
<li data-order=""><a href="/jQuery-gridmanager/docs/tut/using-foundation.html">Using Foundation</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/tut/fluid-widths.html">Fluid Widths</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/tut/basic-usage.html">Basic Usage</a></li>
<li class=nav-header>Developers</li>
<li data-order=""><a href="/jQuery-gridmanager/docs/dev/themeing-with-less.html">Themeing with LESS</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/dev/options-reference.html">Options Reference</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/dev/function-reference.html">Function Reference</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/dev/extending-gridmanager.html">Extending Gridmanager</a></li>
<!-- List additional links. It is recommended to add a divider
e.g. <li class=divider></li> first to break up the content. -->
</ul>
</div>
<div id=content class=span10>
<div class=page-header>
<h2>Options Reference
</h2>
</div>
<table class="table">
<thead>
<tr>
<th>
Option Name
</th>
<th>
Requires
</th>
<th width=350>
Default
</th>
<th>
Description
</th>
</tr>
</thead>
<tbody>
<tr><td colspan="4"><h3>General<h3></td></tr>
<tr>
<td><code>debug</code></td>
<td>boolean</td>
<td><code>0</code></td>
<td>turn on debugging in the console or not</td>
</tr>
<tr>
<td><code>colSelectEnabled</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Make columns selectable for use with API</td>
</tr>
<tr>
<td><code>editableRegionEnabled</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Turn on facility to add editable regions</td>
</tr>
<tr>
<td><code>autoEdit</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Take existing column markup and wrap in default editable regions if none exist</td>
</tr>
<tr>
<td><code>remoteURL</code></td>
<td>string</td>
<td><code>/replace-with-your-url</code></td>
<td>URL to POST to on save: NB, now posts as key value pair, so should now post as 'content'</td>
</tr>
<tr>
<td><code>cssInclude</code></td>
<td>string</td>
<td><code>//maxcdn...snip...font-awesome.min.css</code></td>
<td>URL to external CSS file to load (i.e font awesome)</td>
</tr>
<tr>
<td><code>filterCallback</code></td>
<td>function</td>
<td><code>null</code></td>
<td>Filter callback. see gm.runFilter(): Callback receives two params: the template grid element and whether is called from the init or deinit method</td>
</tr>
<tr>
<td><code>canvasId</code></td>
<td>string</td>
<td><code>gm-canvas</code></td>
<td>The ID of the main internal canvas as generated by Gridmanager</td>
</tr>
<tr>
<td><code>controlId</code></td>
<td>string</td>
<td><code>gm-controls</code></td>
<td>The ID of the main control bar as generated by Gridmanager</td>
</tr>
<tr>
<td><code>controlMove</code></td>
<td>string</td>
<td><code>gm-move</code></td>
<td>Move handle class</td>
</tr>
<tr>
<td><code>controlNestedEditable</code></td>
<td>string</td>
<td><code>gm-controls-element</code></td>
<td>Editable element toolbar class</td>
</tr>
<tr>
<td><code>controlButtons</code></td>
<td>array</td>
<td><code>[[12], [6,6]..snip..]</code></td>
<td>Array of button widths, i.e <code>[[12],[6-6]]</code> which are then autogenerated in the top control bar</td>
</tr>
<tr>
<td><code>customControls</code></td>
<td>object</td>
<td><code>{ global_row: [], global_col: [] }</code></td>
<td>Array of objects for custom controls: see examples</td>
</tr>
<tr>
<td><code>controlButtonClass</code></td>
<td>string</td>
<td><code>btn btn-xs btn-primary</code></td>
<td>Default control bar button class</td>
</tr>
<tr>
<td><code>controlButtonSpanClass</code></td>
<td>string</td>
<td><code>fa fa-plus-circle</code></td>
<td>Default control bar button icon class</td>
</tr>
<tr>
<td><code>controlAppend</code></td>
<td>string</td>
<td><code>See source code for default bootstrap markup</code></td>
<td>Control bar markup for main controls</td>
</tr>
<tr>
<td><code>controlContentElem</code></td>
<td>string</td>
<td><code>See source code for default bootstrap markup</code></td>
<td>Controls for content elements</td>
</tr>
<tr>
<td><code>gmEditClass</code></td>
<td>string</td>
<td><code>gm-editing</code></td>
<td>Standard Edit Calss, Applied to active elements</td>
</tr>
<tr>
<td><code>gmEditClassSelected</code></td>
<td>string</td>
<td><code>gm-editing-selected</code></td>
<td>Applied to the currently selected element</td>
</tr>
<tr>
<td><code>gmEditRegion</code></td>
<td>string</td>
<td><code>gm-editable-region</code></td>
<td>Editable Region Class, i.e what RTEs get attached to</td>
</tr>
<tr>
<td><code>gmContentRegion</code></td>
<td>string</td>
<td><code>gm-content</code></td>
<td>Editable container class</td>
</tr>
<tr>
<td><code>gmToolClass</code></td>
<td>string</td>
<td><code>gm-tools</code></td>
<td>Tool bar class which are inserted dynamically</td>
</tr>
<tr>
<td><code>gmClearClass</code></td>
<td>string</td>
<td><code>clearfix</code></td>
<td>Clearing class to fix floats, used on most toolbars</td>
</tr>
<tr>
<td><code>gmFloatLeft</code></td>
<td>string</td>
<td><code>pull-left</code></td>
<td>Generic Float Left</td>
</tr>
<tr>
<td><code>gmFloatRight</code></td>
<td>string</td>
<td><code>pull-right</code></td>
<td>Generic Float Right</td>
</tr>
<tr>
<td><code>gmBtnGroup</code></td>
<td>string</td>
<td><code>btn-group</code></td>
<td>Generic Button Group Class</td>
</tr>
<tr>
<td><code>gmDangerClass</code></td>
<td>string</td>
<td><code>btn-danger</code></td>
<td>Generic Class to indicate active button</td>
</tr>
<tr>
<td><code>addResponsiveClasses</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Adds any missing classes in columns for muti-device support</td>
</tr>
<tr>
<td><code>layoutDefaultMode</code></td>
<td>string</td>
<td><code>auto</code></td>
<td>Default layout mode loaded after init</td>
</tr>
<tr>
<td><code>currentClassMode</code></td>
<td>string</td>
<td><code></code></td>
<td>Current layout column mode</td>
</tr>
<tr><td colspan="4"><h3>Rows</h3></td></tr>
<tr>
<td><code>rowClass</code></td>
<td>string</td>
<td><code>row</code></td>
<td>Generic row class. change to <code>row-fluid</code> for fluid width in Bootstrap</td>
</tr>
<tr>
<td><code>rowSelector</code></td>
<td>string</td>
<td><code>div.row</code></td>
<td>Used to find rows, change to <code>div.row-fluid</code> for fluid width</td>
</tr>
<tr>
<td><code>rowSortingClass</code></td>
<td>string</td>
<td><code>bg-warning</code></td>
<td>class of background element when sorting rows</td>
</tr>
<tr>
<td><code>rowButtonsPrepend</code></td>
<td>object</td>
<td><code></code></td>
<td>Buttons at the top of each row - pass in standard button objects (see below)</td>
</tr>
<tr>
<td><code>rowButtonsAppend</code></td>
<td>object</td>
<td><code></code></td>
<td>Buttons at the bottom of each row</td>
</tr>
<tr>
<td><code>rowCustomClasses</code></td>
<td>array</td>
<td><code></code></td>
<td>add your own to make them available in the row settings, i.e <code>['one', 'two']</code></td>
</tr>
<tr><td colspan="4"><h3>Columns</h3></td></tr>
<tr>
<td><code>colClass</code></td>
<td>string</td>
<td><code>column</code></td>
<td>Column Class: this gets automatically added to identified columns</td>
</tr>
<tr>
<td><code>contentDraggableClass</code></td>
<td>string</td>
<td><code>gm-content-draggable</code></td>
<td>Class to allow content to be draggable</td>
</tr>
<tr>
<td><code>addDefaultColumnClass</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Adds colClass to columns if missing: addResponsiveClasses must be true for this to activate</td>
</tr>
<tr>
<td><code>colDesktopClass</code></td>
<td>string</td>
<td><code>col-md-</code></td>
<td>Generic desktop size layout class</td>
</tr>
<tr>
<td><code>colTabletClass</code></td>
<td>string</td>
<td><code>col-sm-</code></td>
<td>Generic tablet size layout class</td>
</tr>
<tr>
<td><code>colPhoneClass</code></td>
<td>string</td>
<td><code>col-xs-</code></td>
<td>Generic phone size layout class</td>
</tr>
<tr>
<td><code>colDesktopSelector</code></td>
<td>string</td>
<td><code>div[class*=col-md-]</code></td>
<td>Wild card column desktop selector</td>
</tr>
<tr>
<td><code>colTabletSelector</code></td>
<td>string</td>
<td><code>div[class*=col-sm-]</code></td>
<td>Wildcard column tablet selector</td>
</tr>
<tr>
<td><code>colPhoneSelector</code></td>
<td>string</td>
<td><code>div[class*=col-xs-]</code></td>
<td>Wildcard column phone selector</td>
</tr>
<tr>
<td><code>classRenameSuffix</code></td>
<td>string</td>
<td><code>-clsstmp</code></td>
<td>String used to temporarily rename column classes not in use</td>
</tr>
<tr>
<td><code>colAdditionalClass</code></td>
<td>string</td>
<td><code></code></td>
<td>Additional column class to add: now possibly obselete as colClass gets autoadded</td>
</tr>
<tr>
<td><code>colButtonsPrepend</code></td>
<td>object</td>
<td><code></code></td>
<td>Buttons at the top of each col</td>
</tr>
<tr>
<td><code>colButtonsAppend</code></td>
<td>object</td>
<td><code></code></td>
<td>Buttons at the bottom of each col</td>
</tr>
<tr>
<td><code>colCustomClasses</code></td>
<td>array</td>
<td><code>['example-col-class','test-class']</code></td>
<td>Custom column classes - add your own to make them available in the col settings, i.e <code>['one', 'two']</code></td>
</tr>
<tr>
<td><code>colMax</code></td>
<td>integer</td>
<td><code>12</code></td>
<td>Maximum column span value: if you've got a 24 column grid via customised bootstrap, you could set this to 24.</td>
</tr>
<tr>
<td><code>colResizeStep</code></td>
<td>integer</td>
<td><code>1</code></td>
<td>Column resizing +- value: this is also the colMin value, as columns won't be able to go smaller than this number (otherwise you hit zero and all hell breaks loose)</td>
</tr>
<tr><td colspan="4"><h3>Rich Text Editors</h3></td></tr>
<tr>
<td><code>tinymce</code></td>
<td>object</td>
<td><code>{}</code></td>
<td>Custom TinyMCE Configuration</td>
</tr>
<tr>
<td><code>tinymce.config</code></td>
<td>object</td>
<td><code>{}</code></td>
<td>Custom TinyMCE Configuration config struct (see tinyMCE documentation)</td>
</tr>
<tr>
<td><code>ckeditor</code></td>
<td>object</td>
<td><code>{}</code></td>
<td>Custom CKEditor Configuration</td>
</tr>
<tr>
<td><code>ckeditor.customConfig</code></td>
<td>string</td>
<td><code></code></td>
<td>Path to ckeditor external custom configuration file: note, relative path is relative to your ckeditor.js file, not the page;</td>
</tr>
<tr><td colspan="4"><h3>Button Objects</h3> <p>Passed into row and column areas</p>
<pre> rowButtonsAppend: [
{
title:"Remove row",
element: "a",
btnClass: "pull-right gm-removeRow",
iconClass: "fa fa-trash-o"
}
],</pre></td></tr>
<tr>
<td><code>title</code></td>
<td>string</td>
<td><code></code></td>
<td>Title for button</td>
</tr>
<tr>
<td><code>element</code></td>
<td>string</td>
<td><code></code></td>
<td>Element to generate, i.e a</td>
</tr>
<tr>
<td><code>btnClass</code></td>
<td>string</td>
<td><code></code></td>
<td>Class for the button</td>
</tr>
<tr>
<td><code>iconClass</code></td>
<td>string</td>
<td><code></code></td>
<td>Class for the button icon</td>
</tr>
<tr><td colspan="4"><h3>Custom Control Objects</h3> <p>Passed into custom controls <code>global_row</code> and <code>global_col</code>.
<pre>customControls: {
global_row: [{ callback: 'test_callback', loc: 'bottom' }],
global_col: [{ callback: 'test_callback', loc: 'top' }]
}</pre></td></tr>
<tr>
<td><code>callback</code></td>
<td>string</td>
<td><code></code></td>
<td>Name of custom callback function (required)</td>
</tr>
<tr>
<td><code>loc</code></td>
<td>string</td>
<td><code></code></td>
<td>Location of custom callback function button: options are <code>top</code> or <code>bottom</code></td>
</tr>
<tr>
<td><code>iconClass</code></td>
<td>string</td>
<td><code></code></td>
<td>css class of icon for custom callback function button, i.e <code>fa fa-myicon</code></td>
</tr>
<tr>
<td><code>btnClass</code></td>
<td>string</td>
<td><code></code></td>
<td>css class of button for custom callback function button</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class=row-fluid>
<div id=footer class=span12>
Documentation for <a href="https://github.com/bruth/jekyll-docs-template">gridmanager.js</a>
</div>
</div>
</div>
<script>
function orderNav() {
var list,
section,
header,
sections = [],
lists = {},
headers = {};
var navUl = document.querySelectorAll('#navigation ul')[0],
navLis = document.querySelectorAll('#navigation ul li');
if (!navUl) return;
for (var i = 0; i < navLis.length; i++) {
var order, li = navLis[i];
if (li.classList.contains('nav-header')) {
section = li.textContent || li.innerText;
sections.push(section);
headers[section] = li;
continue;
}
if (!lists[section]) {
lists[section] = [];
}
order = parseFloat(li.getAttribute('data-order'))
lists[section].push([order, li]);
}
for (var i = 0; i < sections.length; i++) {
section = sections[i];
list = lists[section].sort(function(a, b) {
return a[0] - b[0];
});
if (header = headers[section]) {
navUl.appendChild(header);
}
for (var j = 0; j < list.length; j++) {
navUl.appendChild(list[j][1]);
}
}
}
if (document.querySelectorAll) orderNav();
</script>
</body>
</html>