JS（二十五）jquery-gridster插件

向右看齐 2022-06-01 23:06 188阅读 0赞

一、主要特性  
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\]。

四、代码实例

其中layout是json格式的配置