6746234036
This update allows use of bower.json main value in buildtools that rely on the appropriate files being defined in this main array. It also points to the unminified, but compiled dist versions as per bower spec: https://github.com/bower/bower.json-spec#main * Changes main js file to use unminified version * Adds the gridstack.css file to the main files array * Moves compiled CSS into `dist` folder (upstream build process needs update) * Duplicate `src/gridstack.js` into `dist/gridstack.js` (upstream build process needs update) * Update demo html to point to `dist` instead of `src`
87 lines
3 KiB
HTML
87 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Float grid demo</title>
|
|
|
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
|
|
<link rel="stylesheet" href="../dist/gridstack.css"/>
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
|
|
<script src="../dist/gridstack.js"></script>
|
|
|
|
<style type="text/css">
|
|
.grid-stack {
|
|
background: lightgoldenrodyellow;
|
|
}
|
|
|
|
.grid-stack-item-content {
|
|
color: #2c3e50;
|
|
text-align: center;
|
|
background-color: #18bc9c;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h1>Float grid demo</h1>
|
|
|
|
<div>
|
|
<a class="btn btn-default" id="add-new-widget" href="#">Add Widget</a>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div class="grid-stack">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var options = {
|
|
float: true
|
|
};
|
|
$('.grid-stack').gridstack(options);
|
|
|
|
new function () {
|
|
this.items = [
|
|
{x: 0, y: 0, width: 2, height: 2},
|
|
{x: 3, y: 1, width: 1, height: 2},
|
|
{x: 4, y: 1, width: 1, height: 1},
|
|
{x: 2, y: 3, width: 3, height: 1},
|
|
// {x: 1, y: 4, width: 1, height: 1},
|
|
// {x: 1, y: 3, width: 1, height: 1},
|
|
// {x: 2, y: 4, width: 1, height: 1},
|
|
{x: 2, y: 5, width: 1, height: 1}
|
|
];
|
|
|
|
this.grid = $('.grid-stack').data('gridstack');
|
|
|
|
this.add_new_widget = function () {
|
|
var node = this.items.pop() || {
|
|
x: 12 * Math.random(),
|
|
y: 5 * Math.random(),
|
|
width: 1 + 3 * Math.random(),
|
|
height: 1 + 3 * Math.random()
|
|
};
|
|
this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
|
|
node.x, node.y, node.width, node.height);
|
|
}.bind(this);
|
|
|
|
$('#add-new-widget').click(this.add_new_widget);
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|