mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
Files
391 lines
18 KiB
HTML
Executable File
391 lines
18 KiB
HTML
Executable File
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
<title>gridster.js</title>
|
|
|
|
<meta name="description" content="">
|
|
<meta name="author" content="duscksboard">
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="dist/jquery.gridster.css">
|
|
|
|
|
|
<link rel="stylesheet" href="www/css/style.css">
|
|
<link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'>
|
|
<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<header role="header">
|
|
<div class="wrapper">
|
|
<a href="http://ducksboard.github.com/gridster.js/" class="logo">gridster.js</a>
|
|
<h1 class="claim">put a grid in your life</h1>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#intro">What?</a></li>
|
|
<li><a href="#usage">Usage</a></li>
|
|
<li><a href="#documentation">Documentation</a></li>
|
|
<li><a href="#download">Download</a></li>
|
|
<li><a href="https://github.com/ducksboard/gridster.js/issues">Issues</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<div role="main">
|
|
|
|
<section id="intro" class="wrapper m_txt">
|
|
<div>
|
|
<h2 class="heading-xl">Try it now!</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
|
|
</div>
|
|
<div class="ttr">
|
|
<a href="https://github.com/ducksboard/gridster.js/zipball/master" class="i_download"><span>Download now</span></a>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="demo">
|
|
|
|
<div class="gridster">
|
|
<ul>
|
|
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
|
|
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
|
|
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
|
|
|
|
<li data-row="3" data-col="2" data-sizex="2" data-sizey="1"></li>
|
|
<li data-row="1" data-col="2" data-sizex="2" data-sizey="2"></li>
|
|
|
|
<li class="try" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
|
|
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
|
|
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
|
|
|
|
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
|
|
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
|
|
|
|
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
|
|
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id="usage">
|
|
<div class="wrapper">
|
|
<header>
|
|
<h2 class="heading-xl">Usage</h2>
|
|
</header>
|
|
|
|
<article class="m_txt">
|
|
<h3 class="heading-l">Setup</h3>
|
|
<p>Nowadays griddable.js depends on jQuery and jQuery UI draggable, so you need to include this scripts in the head of your document.</p>
|
|
|
|
<h4 class="heading-m">Include dependencies</h4>
|
|
<p>Download the latest release at <a href="http://jquery.com/">jQuery</a> and <a href="http://jqueryui.com/">jQuery UI</a>.</p>
|
|
|
|
<script src="https://gist.github.com/3129541.js?file=gridder.html"></script>
|
|
|
|
<h4 class="heading-m">HTML Structure</h4>
|
|
<p>The HTML required to make gridster works. Class names and tags are customizable but is needed to follow the structure below:</p>
|
|
|
|
<script src="https://gist.github.com/3129747.js?file=gridster.html"></script>
|
|
|
|
<h4 class="heading-m">Let's go run gridster.js!</h4>
|
|
<p>Gridster only accepts one argument with configuration options. Take a look at the <a href="#documentation">documentation</a>.</p>
|
|
|
|
<script src="https://gist.github.com/3129767.js?file=gridder.js"></script>
|
|
|
|
</article>
|
|
|
|
<article class="m_txt">
|
|
<h3 class="heading-l">Playing with the API</h3>
|
|
<p>The API can be accesed as in most jQuery plugins via the jQuery data method like so:</p>
|
|
|
|
<script src="https://gist.github.com/3129811.js?file=gridster.js"></script>
|
|
|
|
<h4 class="heading-m">Add a new widget to the grid</h4><br>
|
|
<script src="https://gist.github.com/3129866.js?file=gridster.js"></script>
|
|
|
|
<h4 class="heading-m">Remove a widget from the grid</h4><br>
|
|
<script src="https://gist.github.com/3129893.js?file=gridster.js"></script>
|
|
|
|
<h4 class="heading-m">Get serialized array with the elements positions</h4>
|
|
<p>Creates a JavaScript array of objects, ready to be encoded as a JSON string.</p>
|
|
|
|
<script src="https://gist.github.com/3129908.js?file=gridster.js"></script>
|
|
|
|
|
|
</article>
|
|
|
|
</div><!-- .wrapper -->
|
|
</section>
|
|
|
|
|
|
<section id="documentation">
|
|
<div class="wrapper">
|
|
<header>
|
|
<h2 class="heading-xl">Documentation</h2>
|
|
|
|
<h3 class="heading-m">Options</h3>
|
|
<nav>
|
|
<ul class="m_tags">
|
|
<li><a href="#widget_class_opt">widget_class</a></li>
|
|
<li><a href="#widget_margins_opt">widget_margins</a></li>
|
|
<li><a href="#widget_base_dimensions_opt">widget_base_dimensions</a></li>
|
|
<li><a href="#min_cols_opt">min_cols</a></li>
|
|
<li><a href="#min_rows_opt">min_rows</a></li>
|
|
<li><a href="#extra_cols_opt">extra_cols</a></li>
|
|
<li><a href="#extra_rows_opt">extra_rows</a></li>
|
|
<li><a href="#autogenerate_stylesheet_opt">autogenerate_stylesheet</a></li>
|
|
|
|
<li><a href="#on_overlap_start_opt">on_overlap_start</a></li>
|
|
<li><a href="#on_overlap_opt">on_overlap</a></li>
|
|
<li><a href="#on_overlap_stop_opt">on_overlap_stop</a></li>
|
|
</ul>
|
|
</nav><br><br>
|
|
|
|
<div class="m_txt">
|
|
<h3 class="heading-m">Methods</h3>
|
|
<p>The methods listed here are the most common. If this is never enough take a look to the <a href="http://ducksboard.github.com/gridster.js/docs/classes/Gridster.html">documentation generated from source</a>.</p>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="m_tags">
|
|
<li><a href="#add_widget_method">add_widget</a></li>
|
|
<li><a href="#remove_widget_method">remove_widget</a></li>
|
|
<li><a href="#serialize_method">serialize</a></li>
|
|
<li><a href="#serialize_changed_method">serialize_changed</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
|
|
<article id="options" class="m_doc_method">
|
|
<div class="m_txt">
|
|
<h3 id="widget_class_opt" class="heading-l">Options</h3>
|
|
<p>gridder configuration object.</p>
|
|
|
|
<h4 id="widget_selector_opt" class="heading-m">widget_selector: <em>"> li"</em></h4>
|
|
<p>Define who are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElement</p>
|
|
|
|
<h4 id="widget_margins_opt" class="heading-m">widget_margins: <em>[10, 10]</em></h4>
|
|
<p>Horizontal and vertical margins respectively for widgets.</p>
|
|
|
|
<h4 id="widget_base_dimensions_opt" class="heading-m">widget_base_dimensions: <em>[140, 140]</em></h4>
|
|
<p>Base widget dimensions in pixels. The first index for the width and the second for the height.</p>
|
|
|
|
<h4 id="extra_rows_opt" class="heading-m">extra_rows: <em>0</em></h4>
|
|
<p>Add more rows in addition to those that have been calculated.</p>
|
|
|
|
<h4 id="extra_cols_opt" class="heading-m">extra_cols: <em>0</em></h4>
|
|
<p>Add more rows in addition to those that have been calculated.</p>
|
|
|
|
<h4 id="min_cols_opt" class="heading-m">min_cols: <em>1</em></h4>
|
|
<p>The minimum required columns.</p>
|
|
|
|
<h4 id="min_rows_opt" class="heading-m">min_rows: <em>10</em></h4>
|
|
<p>The minimum required rows.</p>
|
|
|
|
<h4 id="autogenerate_stylesheet_opt" class="heading-m">autogenerate_stylesheet: <em>true</em></h4>
|
|
<p>If true, all the CSS required to position all widgets in their respective columns and rows will be generated automatically and injected to the <code><head></code> of the document. You can set this to false, and write your own CSS targeting rows and cols via data-attributes like so: <code>[data-col="1"] { left: 10px; }</code></p>
|
|
|
|
<h4 id="serialize_params_opt" class="heading-m">serialize_params: <em>function($w, wgd) { return { col: wgd.col, row: wgd.row } }</em></h4>
|
|
<p>Return the data you want for each widget in the serialize method. Two arguments are passed: `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid coords object (`col`, `row`, `size_x`, `size_y`).</p>
|
|
|
|
<h4 id="draggable_opt" class="heading-m">draggable: <em>{}</em></h4>
|
|
<p>The configuration object of the jQuery UI Draggable Plugin. See <a href="http://jqueryui.com/demos/draggable/">http://jqueryui.com/demos/draggable/</a> for more information.</p>
|
|
|
|
<h4 id="on_overlap_start_opt" class="heading-m">collision.on_overlap_start: <em>function(collider_data) { }</em></h4>
|
|
<p>Executes a function first time a widget overlaps with a "faux" grid cell.</p>
|
|
|
|
<h4 id="on_overlap_opt" class="heading-m">collision.on_overlap: <em>function(collider_data) { }</em></h4>
|
|
<p>Executes a function each time a widget overlaps with a "faux" grid cell.</p>
|
|
|
|
<h4 id="on_overlap_stop_opt" class="heading-m">collision.on_overlap_stop: <em>function(collider_data) { }</em></h4>
|
|
<p>Executes a function last time a widget overlaps with a "faux" grid cell.</p>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article id="add_widget_method" class="m_doc_method">
|
|
<h3>.add_widget( html, [size_x], [size_y] )</h3>
|
|
|
|
<div class="m_txt">
|
|
<p>Create a new widget with the given html and add it to the grid.</p>
|
|
|
|
<h4 class="heading-m">Parameters</h4>
|
|
<dl>
|
|
<dt>html <em>String</em></dt>
|
|
<dd>The string that represents the HTML of the widget.</dd>
|
|
<dt>size_x <em>Number</em></dt>
|
|
<dd>The number of rows that the widget occupies. Default is <em>1</em>.</dd>
|
|
<dt>size_y <em>Number</em></dt>
|
|
<dd>The number of columns that the widget occupies. Default is <em>1</em>.</dd>
|
|
</dl>
|
|
|
|
<h4 class="heading-m">Returns</h4>
|
|
<p>Returns the jQuery wrapped HTMLElement representing the widget that was just created.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="remove_widget_method" class="m_doc_method">
|
|
<h3>.remove_widget( el )</h3>
|
|
|
|
<div class="m_txt">
|
|
<p>Remove a widget from the grid</p>
|
|
|
|
<h4 class="heading-m">Parameters</h4>
|
|
<dl>
|
|
<dt>el <em>HTMLElement</em></dt>
|
|
<dd>The jQuery wrapped HTMLElement representing the widget that you want to remove.</dd>
|
|
</dl>
|
|
|
|
<h4 class="heading-m">Returns</h4>
|
|
<p>Returns the instance of the Gridster Class.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="serialize_method" class="m_doc_method">
|
|
<h3>.serialize( [$widgets] )</h3>
|
|
|
|
<div class="m_txt">
|
|
<p>Creates an array of objects representing the current position of all widgets in the grid.</p>
|
|
|
|
<h4 class="heading-m">Parameters</h4>
|
|
<dl>
|
|
<dt>$widgets <em>HTMLElement</em></dt>
|
|
<dd>The collection of jQuery wrapped HTMLElements you want to serialize. If no argument is passed all widgets will be serialized.</dd>
|
|
</dl>
|
|
|
|
<h4 class="heading-m">Returns</h4>
|
|
<p>Returns an Array of Objects (ready to be encoded as a JSON string) with the data specified in the serialize_params option.</p>
|
|
|
|
</div>
|
|
</article>
|
|
|
|
<article id="serialize_changed_method" class="m_doc_method">
|
|
<h3>.serialize_changed( )</h3>
|
|
|
|
<div class="m_txt">
|
|
<p>Creates an array of objects representing the current position of the widgets who have changed position.</p>
|
|
<h4 class="heading-m">Returns</h4>
|
|
<p>Returns an Array of Objects (ready to be encoded as a JSON string) with the data specified in the serialize_params option.</p>
|
|
</div>
|
|
</article>
|
|
|
|
</div><!-- .wrapper -->
|
|
</section>
|
|
|
|
|
|
|
|
<section id="download">
|
|
<div class="wrapper">
|
|
<header>
|
|
<h2 class="heading-xl">Download</h2>
|
|
</header>
|
|
|
|
<article class="m_txt">
|
|
<p>Reminds that gridster.js depends on jQuery and jQuery UI draggable. Download the latest release at <a href="http://jquery.com/">jQuery</a> and <a href="http://jqueryui.com/">jQuery UI</a>.
|
|
</p>
|
|
|
|
<h3 class="heading-l">gridster.<u>js</u></h3>
|
|
<dl>
|
|
<dt>Development version</dt>
|
|
<dd><a href="http://ducksboard.github.com/gridster.js/dist/jquery.gridster.js">jquery.gridster.js</a></dd>
|
|
<dt>Production version (minified)</dt>
|
|
<dd><a href="http://ducksboard.github.com/gridster.js/dist/jquery.gridster.min.js">jquery.gridster.min.js</a></dd>
|
|
</dl>
|
|
|
|
<h3 class="heading-l">gridster.<u>css</u></h3>
|
|
<dl>
|
|
<dt>Development version</dt>
|
|
<dd><a href="http://ducksboard.github.com/gridster.js/dist/jquery.gridster.css">jquery.gridster.css</a></dd>
|
|
<dt>Production version (minified)</dt>
|
|
<dd><a href="http://ducksboard.github.com/gridster.js/dist/jquery.gridster.min.css">jquery.gridster.min.css</a></dd>
|
|
</dl>
|
|
|
|
<h3 class="heading-l">or clone the repo from github</h3>
|
|
<dl>
|
|
<dt>Github project</dt>
|
|
<dd><a href="https://github.com/ducksboard/gridster.js">gridster.js</a></dd>
|
|
<dt>Download .zip</dt>
|
|
<dd><a href="https://github.com/ducksboard/gridster.js/zipball/master">gridster.js.zip</a></dd>
|
|
</dl>
|
|
|
|
|
|
</article>
|
|
|
|
</div><!-- .wrapper -->
|
|
</section>
|
|
|
|
<section id="download">
|
|
<div class="wrapper">
|
|
<header>
|
|
<h2 class="heading-xl">Browser support</h2>
|
|
</header>
|
|
|
|
<article class="m_txt">
|
|
<p>Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.</p>
|
|
</article>
|
|
|
|
</div><!-- .wrapper -->
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<footer role="footer">
|
|
<div class="wrapper">
|
|
<a href="http://ducksboard.github.com/gridster.js" class="logo-small">gridster.js</a>
|
|
<p class="claim">put a grid in your life</p>
|
|
</div>
|
|
<p>
|
|
A project by: <a href="http://ducksboard.com" class="ducksboard-logo">Ducksboard</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
|
|
<script type="text/javascript" src="libs/jquery-ui/jquery-ui.js"></script>
|
|
|
|
<script src="dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
<script type="text/javascript">
|
|
var gridster;
|
|
|
|
$(function(){
|
|
|
|
gridster = $(".gridster ul").gridster({
|
|
widget_margins: [10, 10],
|
|
widget_base_dimensions: [140, 140],
|
|
min_cols: 6,
|
|
min_rows: 10
|
|
}).data('gridster');
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-33489625-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|