页面布局插件gridster.js

　　最近做ESOP的demo时，用到了gridster.js插件。它是基于jQuery开发的插件，它就像豆腐似的被切成一块一块的，能直接拖拽页面中的元素，也可以增加和删除。自己做个小demo，以后备用，易于上手，官网地址：http://gridster.net/。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <link href="style/jquery.gridster.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.gridster.js"></script>
    <script type="text/javascript">

      var gridster;

      $(function(){

        gridster = $(".gridster > ul").gridster({
             widget_margins: [10, 10],                      //一个最小基础元素的的上下边距
            widget_base_dimensions: [100, 100],              //最小基础元素的长宽
            resize: {
                enabled: true                              //可以调节元素的大小
            }
        }).data('gridster');


  });

    </script>
    <style type="text/css">

        *{padding:0;margin:0;}
        ul{padding:0;margin:0;list-style:none;}
        .demo{background-color:#d8d8d8;}
        .gridster{width:600px;margin:0 auto;}      /*它的宽度应该加上左右元素的外边距*/
        .gridster .gs-w {background: #FFF;cursor: pointer;-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);box-shadow: 0 0 5px rgba(0,0,0,0.3);}        

    </style>
</head>
<body>
<div class="demo">
    <div class="gridster ready">
        <ul>
            <li id="delete" data-row="1" data-col="1" data-sizex="5" data-sizey="2"><!-- data-row是行数， data-col是列数，data-sizex是横向基础元素长度的倍数 data-sizey是竖向基础元素高度的倍数 -->
            </li>
            <li data-row="3" data-col="1" data-sizex="2" data-sizey="1">
            <li data-row="3" data-col="3" data-sizex="3" data-sizey="1">
            </li>
            <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
            </li>
            <li data-row="4" data-col="2" data-sizex="2" data-sizey="1">
            </li>
            <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
            </li>
            <li data-row="4" data-col="5" data-sizex="1" data-sizey="1">
            </li>
        </ul>
    </div>
</div>
</body>
</html>

 

 

 

 

 

　　

 

posted @ 2014-04-10 17:15  hollyma  阅读(1556)  评论(0)  编辑  收藏  举报