gridster.js–可拖拽的网格插件

gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素。

可拖放的布局jQuery插件 gridster.js\

主要特性

1.只依赖jQuery

2.支持元素的添加和删除

3.文档比较全

4.拥有测试用例,你可以查看你的浏览器的测试结果

5.比较适合开发益智游戏

如何使用

引入类库,包括jQuery和gridster.js:


 

然后导入gridstrer的css文件:

HTML内容如下:

<div>
   <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">li>

 

    <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">li>
    <li data-row="2" data-col="2" data-sizex="2" data-sizey="2">li>

    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">li>
    <li data-row="2" data-col="4" data-sizex="2" data-sizey="1">li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1">li>

    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">li>
    <li data-row="3" data-col="5" data-sizex="1" data-sizey="1">li>

 <li data-row="1" data-col="6" data-sizex="1" data-sizey="1">li>
    <li data-row="2" data-col="6" data-sizex="1" data-sizey="2">li>
   ul>
  div>

注意gridster.js使用HTML5的data属性来定义相关的拖放元素属性,data-row为行号,data-col为列号,data-sizex为X轴元素宽度,datasizey为Y轴元素宽度。

最后调用插件js,代码如下:

$(".gridster ul").gridster({
 widget_margins: [10, 10],
 widget_base_dimensions: [140, 140]
});

这里是通过创建的属性来设定每一个区域的大小及定位,所涉及的属性如下:
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]。

演示 - 文档 - 下载

你可能感兴趣的:(测试,javascript)