首页 > 代码库 > gridster.js
gridster.js
gridster.js
gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素。
使用
引入类库,包括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="http://www.mamicode.com/js/jquery.gridster.min.js"></script>
然后导入gridstrer的css文件:
<link type="text/css" href="http://www.mamicode.com/css/jquery.gridster.min.css">
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Girdster JS</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css"></head><body> <div class="gridster"> <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> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.gridster.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function() { $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140] });});</script></body></html>
gridster.js
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。