Gridly 基于 jQuery 的容器拖放布局插件
Gridly 是一个基于 jQuery 的容器拖放布局插件,能够动态创建元素和删除元素,流畅的拖拽缩放动画效果,动态的调整网格的大小,能够兼容目前的大多数主流浏览器。
安装插件
1、你可以通过软件包管理器安装,只需要运行下面的代码
npm install -g bower bower install gridly
2、或者你可以访问插件的 Github 地址,然后下载 Gridly 的压缩包得到源文件,然后将他们引入到你的网页中,下面是一个引入的示例:
<script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.min.js"></script> <script src="javascript/jquery.gridly.js"></script> <link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />
使用实例
使用 Gridly 并不难,下面是参考代码 。 参考使用就能够简单是展示出它的效果。
<style type="text/css"> .gridly { position: relative; width: 960px; } .brick.small { width: 140px; height: 140px; } .brick.large { width: 300px; height: 300px; } </style> <div class="gridly"> <div class="brick small"></div> <div class="brick small"></div> <div class="brick large"></div> <div class="brick small"></div> <div class="brick small"></div> <div class="brick large"></div> </div> <script> $('.gridly').gridly(); </script>
可选配置参数
Gridly 使用一个相当标准的模式处理网格和提供三个配置选项的大小:base, gutter 和 columns:
$('.gridly').gridly({ base: 60, // px gutter: 20, // px columns: 12 });
自定义回调函数
当使用拖放排序回调可以通过在初始化时使用下面的方法:
var reordering = function($elements) { // Called before the drag and drop starts with the elements in their starting position. }; var reordered = function($elements) { // Called after the drag and drop ends with the elements in their ending position. }; $('.gridly').gridly({ callbacks: { reordering: reordering , reordered: reordered } }); $('.gridly').gridly('draggable', 'off'); // disables dragging $('.gridly').gridly('draggable', 'on); // enables dragging
相关链接
如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。


目前还没有任何评论,快来抢沙发吧!
发布评论
需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。