gridster插件详解
仉臻
[u][b]gridster插件[/b][/u]
gridster简介：gridster.js是Ducksboard的开源项目，Ducksboard用gridster.js做了自己的产品，gridster是一款自定义，客户菜单插件，他可以随意摆放你关注的几何图形。
在实际项目中每个几何图形都被称为widget,每个widget可以是你项目模块的一个缩影，便于你系统性的观察。
gridster下载：[url]http://gridster.net/[/url].
gridster要求：Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.jquery 1.7+.
grister使用：
gridster简介：gridster.js是Ducksboard的开源项目，Ducksboard用gridster.js做了自己的产品，gridster是一款自定义，客户菜单插件，他可以随意摆放你关注的几何图形。
在实际项目中每个几何图形都被称为widget,每个widget可以是你项目模块的一个缩影，便于你系统性的观察。
gridster下载：[url]http://gridster.net/[/url].
gridster要求：Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.jquery 1.7+.
grister使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="article" id="articlelink" content="/technology/jquerynews/20120815-jqueryplugin-dragndrop-gridster/" />
<meta name="author" content="www.gbin1.com" />
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="dist/jquery.gridster.min.css">
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="dist/jquery.gridster.min.js" charset="utf-8"></script>
</head>
<!--
<script type="text/javascript" src="dist/jquery.coords.js"></script>
<script type="text/javascript" src="dist/jquery.draggable.js"></script>
<script type="text/javascript" src="dist/jquery.collision.js"></script>-->
<style>
body{
font-family: Helvetica, arial, sans-serif;
margin:150px auto;
background: red;
color: #fff;
font-size: 12px;
width:940px;
}
a{
color: #808080;
}
h1{
padding:10px;
font-size: 38px;
}
ul{
list-style:block;
}
li{
background: blue;
}
.s1{
background: blue;
}
.s2{
background: green;
}
.s3{
background:yellow;
}
.s4{
background: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".gridster ul").gridster({
//widget_selector: "> li #sss",
//extra_rows: 1111,//设置多余的行数 默认15行 min_rows
//extra_cols: 9,//设置多余的列数 列数减一 默认为1
//max_size_x: 6,//设置每个widget x的size 默认为 6
//max_size_y: 6,//设置每个widget y的size 默认为 6
//autogenerate_stylesheet: true,//自动生成widget的样式 默认为true
avoid_overlapped_widgets: false,//不让你从数据库或是其他途径 生成的 widget 互相覆盖 默认为true
//serialize_params: function($w, wgd) {//当调用serialize()触发的事件 $w当前的li wgd是{col: 4, row: 3, size_x: 2, size_y: 1,el:b.fn.b.init[1]}
//alert($w+"---"+wgd);
//return { col: wgd.col, row: wgd.row }
//},
/*draggable.start: function(event, ui){},
draggable.drag: function(event, ui){},
draggable.stop: function(event, ui){},
collision.on_overlap_start: function(collider_data) { },
collision.on_overlap: function(collider_data) { },
collision.on_overlap_stop: function(collider_data) { },*/
widget_margins: [10, 10],//设置每个 widget margin 前一个参数是y 后面是x
widget_base_dimensions: [140, 140],//设置 widget width height
draggable:{
start: function(event, ui){
//alert("statr");
console.log("start");
},
drag:function(event, ui){
console.log("drag");
},
stop: function(event, ui){
console.log("stop");
}
},
collision:{
on_overlap_start: function(collider_data) {
// alert(collider_data);
console.log("on_overlap_start");},
on_overlap:function(collider_data) {console.log("on_overlap"); },
on_overlap_stop:function(collider_data) { console.log("on_overlap_stop");}
}
});
});
function test(){
var gridster = $(".gridster ul").gridster().data('gridster');//只能通过 样式得到ul
alert("row:"+gridster.rows+"--cols"+gridster.cols);
// alert(gridster);
gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);//添加一个widget
// gridster.remove_widget( $('.gridster li').eq(3) );//删除某个
var json = gridster.serialize();//得到 所有的 widget
alert(json);
gridster.disable( );
}
function test1(){
var gridster = $(".gridster ul").gridster().data('gridster');//只能通过 样式得到ul
var g = gridster.serialize($(".s1"));
alert(g);
for(var v in g){
//alert(v);
}
}
</script>
<body>
<article>
<h1>Demo </h1>
<section>
<div class="gridster">
[list]
<li id="sss" class="s1" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div>
open source
</div>
</li>
<li class="s1" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
</li>
<li class="s1" data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
<li class="s2" data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
<li class="s4" data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
<li class="s1" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
<li class="s2" data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
<li class="s1" data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
<li class="s1" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
<li class="s1" data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
<li class="s1" data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
<li class="s3" data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
<div style="position:absolute;top:150px;background:black;width:1000px;height:200px;">
11
<div>
[/list]
</div>
</section>
</article>
<input type='button' value='test' onclick='test()'/>
<input type='button' value='test1' onclick='test1()'/>
</body>
</html>
类似资料：