File size: 4.84Kb
<!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/demo/">Demos</a></li>
<li><a href="/jQuery-gridmanager/docs/">Documentation</a></li>
<li><a href="https://github.com/neokoenig/jQuery-gridmanager/">gitHub</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>Use the dynamically inserted 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>
</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>