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`
81 lines
3.6 KiB
HTML
81 lines
3.6 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>Nested grids 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;
|
|
}
|
|
|
|
.grid-stack .grid-stack {
|
|
/*margin: 0 -10px;*/
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.grid-stack .grid-stack .grid-stack-item-content {
|
|
background: lightpink;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h1>Nested grids demo</h1>
|
|
|
|
<div class="grid-stack">
|
|
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3">
|
|
<div class="grid-stack-item-content">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius eligendi eos fuga magnam numquam perferendis provident quos rem. Asperiores assumenda dolor error eveniet impedit nihil numquam provident repellat ullam.
|
|
</div>
|
|
</div>
|
|
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
|
|
<div class="grid-stack-item-content">
|
|
|
|
<div class="grid-stack">
|
|
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
|
|
<div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
|
|
<div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
|
|
<div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
|
|
|
|
<div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
|
|
<div class="grid-stack-item" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var options = {
|
|
};
|
|
$('.grid-stack').gridstack(options);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|