JS（二十五）jquery-gridster插件
谢墨竹
一、主要特性
1.只依赖jQuery
2.支持元素的添加和删除
二、使用
引入类库，包括jQuery和gridster.js：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.gridster.min.js"></script>
导入gridstrer的css文件：
<link type="text/css" href="css/jquery.gridster.min.css">
三、gridster.js使用HTML5的data属性来定义相关的拖放元素属性，data-row为行号，data-col为列号，data-sizex为X轴元素宽度，datasizey为Y轴元素宽度。
这里是通过创建的属性来设定每一个区域的大小及定位,所涉及的属性如下：
data-row:数据行，元素所存在的行数。
data-col:数据列，元素所存在的列数。
data-sizex:元素块的宽（以个为单位，每个元素块的宽度为widget_base_dimensions所设定的值）
data-sizey:元素块的高（以个为单位，每个元素块的高度为widget_base_dimensions所设定的值）
例：widget_base_dimensions: [150, 150]
那么每个元素块的宽/高分别为150px/150px
注：元素块合并时的宽度并不只是两个元素块之和
即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px
高度={data-sizey=”1″}=元素块X1==150*1=150px
这里我们只需要设定两个数值，宽高/边距；如
widget_margins:
设置网格之间的外边距；所传的数值是实际像素的2倍，如[2,2]==[4px,4px]=[右边距，下边距]。
widget_base_dimensions:
设置网格的宽高；所传的数值=实际像素，如[150,150]==[150px,150px]=[width,height]。
1.只依赖jQuery
2.支持元素的添加和删除
二、使用
引入类库，包括jQuery和gridster.js：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.gridster.min.js"></script>
导入gridstrer的css文件：
<link type="text/css" href="css/jquery.gridster.min.css">
三、gridster.js使用HTML5的data属性来定义相关的拖放元素属性，data-row为行号，data-col为列号，data-sizex为X轴元素宽度，datasizey为Y轴元素宽度。
这里是通过创建的属性来设定每一个区域的大小及定位,所涉及的属性如下：
data-row:数据行，元素所存在的行数。
data-col:数据列，元素所存在的列数。
data-sizex:元素块的宽（以个为单位，每个元素块的宽度为widget_base_dimensions所设定的值）
data-sizey:元素块的高（以个为单位，每个元素块的高度为widget_base_dimensions所设定的值）
例：widget_base_dimensions: [150, 150]
那么每个元素块的宽/高分别为150px/150px
注：元素块合并时的宽度并不只是两个元素块之和
即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px
高度={data-sizey=”1″}=元素块X1==150*1=150px
这里我们只需要设定两个数值，宽高/边距；如
widget_margins:
设置网格之间的外边距；所传的数值是实际像素的2倍，如[2,2]==[4px,4px]=[右边距，下边距]。
widget_base_dimensions:
设置网格的宽高；所传的数值=实际像素，如[150,150]==[150px,150px]=[width,height]。
四、代码实例
var gridster = [];
layout.map(function(item){
var div = $('<div class="app-column"></div>');
div.append('<div class="app-contents"><ul class="gridster"></ul></div>');
var widgetBaseDimensions = ['auto', 60],
widgetMargins = [10, 10],
maxCols = 24;
var g = div.find('.app-contents>ul')gridster({
widget_base_dimensions : widgetBaseDimensions,
widget_cols:maxCols,
max_cols:maxCols,
resize:{
enabled:true
},
draggable:{
handle:'nothing'
}
}).data('gridster');
gridster.push(g);
var widgets = [];
if(item.grids){
item.grids.map(function(gi){
var el = '<li class="widget" data-widgetid="' + gi.widgetId + '"'></li>';
var widgetTemp = [];
widgetTemp.push(el);
gi.sezex ? widgetTemp.push(gi.sezex) : widgetTemp.push(1);
gi.sezey ? widgetTemp.push(gi.sezey) : widgetTemp.push(1);
if(gi.col && gi.row){
widgetTemp.push(gi.col);
widgetTemp.push(gi.row);
}
widgets.push(widgetTemp);
});
}
$.each(widgets, function(i, widget){
g.add_widget.apply(g, widget);
})
})
gridster.map(function(grid){
grid.recalculate_faux_grid();
})
类似资料：