File size: 8.79Kb
<!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 : Gridmanager.js Documentation</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>
<h2 id="gridmanager.js">gridmanager.js</h2>
<h3 id="what-is-it?">What is it?</h3>
<p>Gridmanager allows you to create, reorder, update & delete rows and columns in grid layouts used by frameworks such as Bootstrap 3.x or Foundation 5.x. It is <em>not</em> another Rich Text Editor (although it can use them), and is designed to work more as a structural / page building device for use in web applications, custom CMS system etc.</p>
<h4 id="you-can:">You can:</h4>
<ul>
<li>Drag and drop columns & rows</li>
<li>Resize, delete and add columns on the fly</li>
<li>Apply custom column and row classes</li>
<li>Nest rows within columns</li>
<li>Quickly edit the source code directly</li>
<li>Add row templates for common column width layouts</li>
<li>Add/Alter the ID of a column or row directly</li>
<li>Add, Edit, Delete, Sort editable regions to change column/row text</li>
<li>Tie in Rich Text Editors such as TinyMCE & CKEditor to those editable regions</li>
<li>Change layout modes for easy editing & previewing of responsive classes</li>
<li>Use fluid rows if you want</li>
<li>Create your own custom controls for easily extending functionality</li>
</ul>
<h4 id="changelog">Changelog</h4>
<ul>
<li>0.3.1
<ul>
<li>New style of editable regions which are stackable/editable/deletable</li>
<li>Added: default editable region button</li>
<li>Added: Theming using LESS </li>
<li>Default, light & dark themes now available</li>
<li>Large visual cleanup</li>
<li>Fixed: remoteURL now posts as proper key/value pair</li>
<li>Added: initMarkup() to autowrap non commented markup</li>
<li>Added: editableRegionEnabled & autoEdit options</li>
<li>Added: additional filterCallback option which runs on init();</li>
</ul></li>
<li>0.3.0
<ul>
<li>Nested row & column support & new add nested row button</li>
<li>Added ability to add custom controls on rows & columns (with your own callbacks) </li>
<li>Added Custom column classes in addition to row classes</li>
<li>RTE's are now attached to their own editable regions within columns</li>
<li>Responsive class support added</li>
<li>Responsive class layout mode added</li>
<li>Font Awesome now the icon default</li>
<li>Documentation now available at <a href="http://neokoenig.github.io/jQuery-gridmanager/docs">http://neokoenig.github.io/jQuery-gridmanager/docs</a></li>
</ul></li>
<li>0.2.2
<ul>
<li>Modal removed; </li>
<li>Source code editing now available directly. </li>
<li>Basic (very basic) foundation support with correct config. </li>
<li>Editable Custom row classes. </li>
<li>Editable Custom Row IDs</li>
</ul></li>
<li>0.2.1
<ul>
<li>Fluid rows now supported. </li>
<li>Columns are now resizable. </li>
<li>Column moving improved. </li>
<li>Source code alert now modal</li>
</ul></li>
<li>0.2.0
<ul>
<li>TinyMCE, CKEditor now supported. </li>
<li>Columns now moveable. </li>
<li>Added reset, alert features, redid CSS and most of the plugin</li>
</ul></li>
<li>0.1.1
<ul>
<li>CSS moved to it's own file. </li>
<li>Slight visual tweaks.</li>
</ul></li>
<li>0.1.0
<ul>
<li>initial alpha test.</li>
</ul></li>
</ul>
<h4 id="licence">Licence</h4>
<p>Released under the MIT licence. Go wild.</p>
<h4 id="contributors">Contributors</h4>
<ul>
<li><a href="https://github.com/neokoenig/">Tom King</a></li>
<li><a href="https://github.com/pbreah/">Percy D Brea</a> </li>
</ul>
<h4 id="blog-posts">Blog Posts</h4>
<ul>
<li><a href="http://www.oxalto.co.uk/2014/07/gridmanager-js-0-3-0-released/">http://www.oxalto.co.uk/2014/07/gridmanager-js-0-3-0-released/</a></li>
<li><a href="http://www.oxalto.co.uk/2014/05/gridmanager-js-0-2-1-released/">http://www.oxalto.co.uk/2014/05/gridmanager-js-0-2-1-released/</a></li>
<li><a href="http://www.oxalto.co.uk/2014/05/gridmanager-js-0-2-0-released/">http://www.oxalto.co.uk/2014/05/gridmanager-js-0-2-0-released/</a></li>
<li><a href="http://www.oxalto.co.uk/2014/05/introducing-gridmanager-js/">http://www.oxalto.co.uk/2014/05/introducing-gridmanager-js/</a></li>
</ul>
</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>