浙江 杭州

jQuery响应式可拖拽的元素组件网格布局插件

系统分类: 网页特效 - jquery插件 - jQuery布局 2016-05-14

人气33288

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


gridstack.js是一款响应式可拖拽的元素组件网格布局jQuery插件。该jQuery插件允许你创建给予Bootstarp v3的响应式可拖拽的网格布局界面,可以用于制作可拖拽的多列网格布局。并且它还可以支持触摸屏设备。

外部依赖

gridstack.js依赖下面的js库文件:

你也可以使用underscore.js来取代lodash.js。

HTML结构
<div class="grid-stack">
    <div class="grid-stack-item" 
        data-gs-x="0" data-gs-y="0" 
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content"></div>
    </div>
    <div class="grid-stack-item" 
        data-gs-x="4" data-gs-y="0" 
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content"></div>
    </div>
</div>                
              
初始化插件
<script type="text/javascript">
$(function () {
    var options = {
        cell_height: 80,
        vertical_margin: 10
    };
    $('.grid-stack').gridstack(options);
});
</script>                
              

配置参数

  • always_show_resize_handle:如果设置为true,缩放手柄将会一直显示。默认为false
  • animate:转换为动画。默认为false
  • auto:如果设置为false将不会初始化已经存在的项。默认为true
  • cell_height:单元格的高度。默认值为60。
  • draggable:允许覆盖 jQuery UI draggable 选项。默认值:{handle: '.grid-stack-item-content', scroll: true, appendTo: 'body'}
  • handle:拖放手柄选择器。默认值为:'.grid-stack-item-content'
  • height:最大行数。默认为0,意思是没有最大行数。
  • float:允许元素浮动。默认值:false
  • item_class:元素组件的class。默认值'grid-stack-item'
  • min_width:最小宽度。如果窗口的宽度小于网格的宽度,将会以单列显示。默认值为768。
  • placeholder_class:placeholder的class。默认值为'grid-stack-placeholder'
  • resizable:允许覆盖jQuery UI resizable选项。默认值为:{autoHide: true, handles: 'se'}
  • vertical_margin:垂直间隙的尺寸。默认值为20。
  • width:网格的列数。默认值为12。
网格属性
  • data-gs-animate:转换为动画。
  • data-gs-width:列数。
  • data-gs-height:最大行数。默认为0,意思是没有最大行数。
Item属性
  • ata-gs-x, data-gs-y:元素的位置。
  • data-gs-width, data-gs-height:元素的尺寸。
  • data-gs-max-width, data-gs-min-width, data-gs-max-height, data-gs-min-height:元素的约束。
  • data-gs-no-resize:禁止元素缩放尺寸。
  • data-gs-no-move:禁止元素移动。
  • data-gs-auto-position:忽略data-gs-xdata-gs-y属性,并将元素放置在第一个可用的位置上。
  • data-gs-locked:元素将被锁定。锁定后其它元素在缩放或移动时不能改变这个元素。但是该元素仍然可以被移动或缩放。如果不希望它移动或缩放,需要添加data-gs-no-movedata-gs-no-resize属性。

关于该元素组件布局jQuery插件的事件、API及其它资料,请参考:https://github.com/troolee/gridstack.js

查看演示
下载资源:10
下载资源
错误提交:

格式:zip 大小:117.02KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1911.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery响应式可拖拽的元素组件网格布局插件

我当前G币余额:0 已下载次数:10

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有2 评论)