92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
|
|
<!doctype html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>jQuery响应式可拖拽的元素组件网格布局插件</title>
|
|
<link rel="stylesheet" type="text/css" href="/BiManage/CSS/bootstrap3.3.5/css/bootstrap.css">
|
|
<link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css" />
|
|
<link rel="stylesheet" href="gridstack.css" />
|
|
<style type="text/css">
|
|
.grid-stack {
|
|
background: lightgoldenrodyellow;
|
|
}
|
|
|
|
.grid-stack-item-content {
|
|
color: #2c3e50;
|
|
text-align: center;
|
|
background-color: #18bc9c;
|
|
}
|
|
</style>
|
|
<!--[if IE]>
|
|
<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="jq22-container">
|
|
<header class="jq22-header">
|
|
<h1>jQuery响应式可拖拽的元素组件网格布局插件 <span>A jQuery plugin for widget layout</span></h1>
|
|
<div class="jq22-demo center">
|
|
<a href="index.html" class="current">float</a>
|
|
<a href="knockout.html">knockout</a>
|
|
<a href="knockout2.html">knockout2</a>
|
|
<a href="nested.html">nested</a>
|
|
<a href="serialization.html">serialization</a>
|
|
</div>
|
|
</header>
|
|
<div class="jq22-content bgcolor-3">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<script src="../jquery-1.11.2.min.js"></script>
|
|
<script src="jqueryui.js"></script>
|
|
<script src="lodash.js"></script>
|
|
<script src="gridstack.js"></script>
|
|
<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> |